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

Open your project in your editor. You’ll find a new folder called /aldryn_forms inside /templates

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="control-group">
  <div class="form-group floating-label-form-group controls">

Then add:

  </div>
</div>

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

{% if field %}
<div class="control-group">
  <div class="form-group 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:

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!

Did this answer your question?