Creating a ModX website part 8: Setting up the contact form

Now that we have most of the site looking the way we want it to and we have used some of ModX's capabilities to add some dynamic content where required it is time to turn our attention to getting the contact form working.

Setting up ModX

Before ModX can send email it needs to know the mail server, port, username and password. I will not explain how to add these here as an example can be found in Setting up email with MODX using Mailjet.

If you are not using Mailjet then you can skip part of that post and use the settings necessary for your chosen email provider. You will usually find the settings you need in the settings of your email account.

Initial theme setup

The theme we have been using includes some references to SB Forms JS. This will need to be removed before we start adding our own code in.

At the end of your BaseTemplate theme you will see the following

        <!-- Bootstrap core JS-->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Core theme JS-->
        <script src="assets/js/scripts.js"></script>
        <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
        <!-- * *                               SB Forms JS                               * *-->
        <!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
        <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
        <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
    </body>
</html>

We need to remove everything below the <script src="assets/js/scripts.js"></script> line up to the </body> statement. Make sure to click Save when done.

Converting the form

This section can be a bit time consuming as we need to change parts of the HTML that aren't relevant as we aren't using the forms provider the theme was originally set up with.

First of all, open the chunk that you saved the contact form in to. Then remove any comments that relate to SB Forms Contact Form. This won't change the form but will avoid confusion later on as we will be using ModX features to make our form work.

Now remove the data-sb-form-api-token part of the following line

<form id="contactForm" data-sb-form-api-token="API_TOKEN">

It should be left looking like

<form id="contactForm">

Likewise, remove any data-db-validation statements from the form.

The four lines that look like the below can be removed entirely as can the whole phone number section.

<div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
<div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
<div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
<div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>

Now we can also delete the following section

<!-- Submit success message-->
<!---->
<!-- This is what your users will see when the form-->
<!-- has successfully submitted-->
<div class="d-none" id="submitSuccessMessage">
<div class="text-center mb-3">
<div class="fw-bolder">Form submission successful!</div>
  To activate this form, sign up at
  <br />
  <a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
  </div>
</div>
<!-- Submit error message-->
<!---->
<!-- This is what your users will see when there is-->
<!-- an error submitting the form-->
<div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>

Note: If you were creating your own form from scratch then this wouldn't be necessary.

Downloading a ModX extra

ModX already has a free extension (or extra) which adds the code necessary to send a form. This is called FormIt.

To download and install this select Extras from the toolbar on the left - hand side, choose Installer, click on the green Download Extras button and you will likely see FormIt listed as one of the most popular extras.

Click on it and then click on the green Download button for FormIt. When it has finished click on the green Back to Package Management button and then click the green Install button under FormIt.

Now click on the green Setup Options button, fill in the details if you would like to and click on the green Install Package button. When finished installing finally click on the green OK button.

Setting up your contact form with FormIt

Back in your contact form chunk add the following code at the very top before anything else

[[!FormIt?
   &hooks=`email,redirect`
   &emailTpl=`EmailChunk`
   &emailTo=`your_email_address_here`
   &emailFrom=`your_email_address_here`
   &emailReplyTo=`[[+reply]]`
   &emailSubject=`[[+name]] has contacted you.`
   &redirectTo=`???`
   &validate=`name:required,
      email:email:required,
      message:required`
]]

You will also need to update the code for the three input fields to look like the ones below

<input class="form-control" id="name" name="name" type="text" placeholder="Enter your name..." />
<input class="form-control" id="email" name="email" type="email" placeholder="[email protected]" />
<textarea class="form-control" id="message" name="message" type="text" placeholder="Enter your message here..." style="height: 10rem"></textarea>

Now update the <form ... line to look like

<form action="[[~[[*id]]]]" method="post">

We haven't finished yet but what this will do is to tell ModX that when the Send button is pressed to send an email using a chunk called EmailChunk as a template and the redirect the user to another page. This can be used to thank them for contacting you.

Remember that you will have to add your email address to the emailTo and emailFrom lines above. 

Adding the EmailChunk

We now need a template for the email that will be sent.

Create a new chunk and call it EmailChunk. Now add the following code to the Chunk Code (HTML) section. Don't forget to click Save.

<h1 align="center">You have received a message from your site</h1>
<br />
[[+name]] ([[+reply]]) wrote: <br />
[[+message]]

You are obviously free to set up your email template however you wish and this is simply a quick example of how the email template is done.

Creating the 'thank you' page

We now need a page that the user will be redirected to when they have submitted the contact form. For the purposes of this post we will create a basic 'hank you' page.

The first thing we need to do is to create a new template as the existing one won't work for us. Call your new template thankyoutemplate and paste the following code into the Template Code (HTML) section.

[[$HEADsection]]
    <body id="page-top">
      [[$navbar]]
        <section class="page-section bg-primary text-white mb-0" id="thankyou">
            <div class="container">
                <br /><br />
                <h2 class="page-section-heading text-center text-uppercase text-white">Thank you</h2>
                <!-- Icon Divider-->
                <div class="divider-custom divider-light">
                    <div class="divider-custom-line"></div>
                    <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                    <div class="divider-custom-line"></div>
                </div>
                <div class="row">
                    <div class="col-lg-12 ms-auto text-center"><p class="lead">Thank you for contacting me. I will reply as soon as I am able.</p></div>
                </div>
            </div>
        </section>
      [[$footer]]
      [[$copyright]]
        <!-- Bootstrap core JS-->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Core theme JS-->
        <script src="assets/js/scripts.js"></script>
    </body>
</html>

Most of the above code is copied from other parts of the site to ensure that we have a consistent look on all of our pages.

Now create a new page on the Resources tab and call it Thank You. Make sure to choose the thankyoutemplate as the template this page will use.

Lastly, make a note of the number in brackets after the Thank You page you have just created. Go back to your contact form chunk and find the following line

&redirectTo=`???`

Replace the questions marks with the number you made a note of above. This tells ModX to redirect the user to the page with that resource number once the user submits a form.

Finishing off

Now it is time to test your form. Visit your website and enter a name, email address and message into the form. Submit it and you should receive an email with the details you just entered.