Content: Blog

Tutorials

How to Build a Website and Blog with django CMS, Without Knowing Python/Django - Pt. 6

Angelo Dini

Feb. 27, 2016

Index


Part 6: Implementing a Contact Form

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 Dashboard and finish the installation by clicking “Deploy” on the Test Server column of your project.

While your site is deploying, 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 deployment has finished, open your website CMS by clicking “open site” on your project dashboard or click the “Open Test Site” button in the Desktop 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”

add-form.png

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:

Our form is there, but it doesn’t look very pretty. Let’s switch back to our Editor, to fix this. 

Make sure your project is synced and open your project in your Editor. You’ll find a new folder called “aldryn_forms” inside “/templates.” 

If you can’t find the folder, go back to the Divio App, hit “Stop auto-syncing” and click the button again to auto-sync the project.

The structure is a bit different from what we’ve seen in the “/templates/aldryn_newsblog” files, but the concept is the same.

Open up “/templates/aldryn_forms/field.html” and add the following code directly after the {% if field %} line:

<div class="row control-group">
    <div class="form-group col-xs-12 floating-label-form-group controls">

Then add:

    </div>
</div>

directly before the last {% endif %}. The result should look like:

{% load i18n aldryn_forms_tags %}
{% if field %}
    <div class="row control-group">
        <div class="form-group col-xs-12 floating-label-form-group controls">
            ...
        </div>
    </div>
{% endif %}

Now replace the following line:

{% render_form_widget field class=instance.custom_classes %}

with this code:

{% render_form_widget field class="form-control" %}

Finally, replace:

{% if field.help_text %}
    <p>{{ field.help_text }}</p>
{% endif %}

with the following code:

<p class="help-block text-danger">{{ field.help_text }}</p>

Save your file and open submit_button.html inside “/templates/aldryn_forms/.”
Replace the entire contents of the file with:

<br>
<div id="success"></div>
<div class="row">
    <div class="form-group col-xs-12">
        <button type="submit" class="btn btn-default{% if instance.custom_classes %}{{ instance.custom_classes}}{% endif %}">{{ instance.label }}</button>
    </div>
</div>

Hit “Save.” Go back to your website and click the “Publish page now” button. All changes have now been applied and your form is ready to go:

Fill out the form, yourself and hit “Send.” You’ll see that everything works as expected and a short message appears:

admin.png

Any form submissions will now be saved inside the admin panel. Click on the first menu entry right next to the django CMS logo (with the name you gave your project), then click “Administration” and search for “Form submissions.”

Click on “Form submissions” and you’ll see that our submitted form is now showing up in the list:

“SENT AT” might not match as shown in this screenshot, as the time of submission is different for you. Clicking on “Contact” will reveal detailed information about the submitted data.

E-Mail Notifications
If you want to use e-mail notifications for form submissions, check out the tutorial for that here, which explains these steps in detail.

You now have a fully functioning contact form!

 

Jump to Index   Part 7: Setup Project Locally

 

blog comments powered by Disqus

Want to post your article here?

Contact us