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="row control-group">
    <div class="form-group col-xs-12 floating-label-form-group controls">
        <label>Name</label>
        <input type="text" class="form-control" placeholder="Name" id="name" ...>
        <p class="help-block text-danger"></p>
    </div>
</div>
...

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”:

...
<br>
<div id="success"></div>
<div class="row">
    <div class="form-group col-xs-12">
        <button type="submit" class="btn btn-default">Send</button>
    </div>
</div>

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
“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:

  • Name
  • Email Address
  • Phone Number
  • Message
  • Send

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, click “Content” on the upper-right part of the toolbar and preview your result:

This isn't pretty yet, so let's head to the next step where we adapt the templates.

Did this answer your question?