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="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:

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?