The next step is to add a contact form to our website that is adapted to the look and feel of our theme, and which also stores the information in our database, once a form is submitted.
Open the Divio Control Panel and navigate to your project. Click on Addons in the sidebar menu and search for Aldryn Forms.
Click Install for free, then click Install Aldryn Forms.
Switch back to your Divio App and select the Update option when expanding the Setup options. This will pull the changes made from the Control Panel and sync it to your local setup.
While your site is updating locally, head back to your Clean Blog files and open
contact.html in your editor.
Look for the following line:
<form name="sentMessage" id="contactForm" novalidate>
Let’s look at the code in more detail:
<div class="form-group floating-label-form-group controls">
<input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
Each form element has two
<div> wrappers around general classes to style the form. Inside, we have a label, input and help text. At the very end, we have the “submit logic”:
<button type="submit" class="btn btn-primary" id="sendMessageButton">Send</button>
The above code defines where the “Success” message and “Send” button should be displayed.
After the update has finished, click the Open local site button (eye icon) in the Divio App and add a new page by using the Create wizard:
- Click Create in the upper-right corner of the toolbar
- Choose New page
- Set the Title to Contact
- Add some example content to the Content area and hit Create
Next, switch to Structure mode using the toolbar toggle. Click the “+” icon next to the Content area and search for Form.
There are multiple results in this case. The Forms addon provides Form fields with all essential fields, including text, select or radio fields.
We are looking for Form inside the Forms category. This plugin acts as a wrapper to hold our form configuration.
Select Form now to move on to the next step.
Choose the following settings for the “Form” plugin:
- Name: Contact
- Redirect To: CMS Page
- CMS Page: Contact (on the second drop-down)
“Redirect To” defines where a successful form submission will be redirected. In our case, we want to stay on the “Contact” page and display the form’s integrated success message. Feel free to create a second “Success” page to redirect to for custom content.
This is all we need to configure, here. Hit Save.
Next, we need to add the form elements. Our theme has four fields defined and a submission button:
- Email Address
- Phone Number
Click on the “+” icon to the right of the "Form Contact" plugin and search for Text Field. In the opening dialog set the content of Label and Placeholder Text to "Name". Next, select the Field is required checkbox and make sure it’s active. Save the plugin.
Next, search for Email Field. Add "Email Address" for the Label and Placeholder Text. Make sure the Field is required checkbox is selected and hit Save.
Search for Text Field again and add "Phone Number" to Label and Placeholder Text. The phone number should not be mandatory, so make sure Field is required is not selected.
Last but not least, search for Text Area Field and set Label and Placeholder Text to "Message". This field is required, so check Field is required. You can control the size of the area via Rows and Columns. For now, add "5" to Rows as a value and leave Columns empty.
Our form has no button, yet. Click the “+” button on Form Contact, search for Submit Button and add "Send" as the Label. This plugin is now the last in our list:
Now that our form is set up, preview your result:
This isn't pretty yet, so let's head to the next step where we adapt the templates.