Templating Example
Your mail form is now ready to be built in the templates. You now need to know where you want the form to live. The form can actually be put into any template, but it often makes sense to use a flatpage to serve the form. We will use a flatpage for our example.
Now add a flatpage. It could resemble the following:
| Field | Content |
|---|---|
| URL | /submit/wedding/ |
| Title |
Submit a wedding announcement |
| Content |
This can be either empty or contain the form HTML, depending on how you want to organize things. |
| Sites |
Select the same site(s) that you chose for the mail form. |
| Registration required |
Enable this since we enabled it for the form. |
| Template name |
This can be either a default template or a custom one, depending on how you want to organize things. |
You can now write the HTML and put it in either the flatpage’s content field or in your custom template, depending on the method you chose when creating the flatpage.
You will create form that has fields for all of the information that you want to gather. This is just a regular HTML form, with only a few special pieces.
Form attributes
method
Must be post (or POST).
action
Must be in the form of /mailform/<slug>.
For our wedding example the form would look something like the following:
<form method="post" action="/mailform/wedding/" enctype="multipart/form-data" …Special, hidden inputs¶
Ellington knows how to process the form based on a few special, hidden inputs that you put in the form.
_subject
If supplied, this will override the value of the “Default subject” field of the mail form.
_required
A comma separated list of the form fields you created which are required to be filled out.
_ordering
A comma separated list of the order in which you want the form fields listed in the e-mail that is sent.
The HTML for our form may look like this:
<form method="post" action="/mailform/weddings/" enctype="multipart/form-data" id="wedding_form">
<input type="hidden" name="_required" value="contact_person,contact_phone,bride_name,groom_name,wedding_date">
<label for="contact_person">Contact Person</label>
<input id="contact_person" type="text" name="contact_person" size="25">
<!-- More fields here -->
<input type="submit" value="Submit">
</form>reCAPTCHA
reCAPTCHA is a free service that uses simple checks to prevent spam bots from successfully submitting forms. Available to be used on Ellington mailforms, ReCaptcha can be a very useful tool in preventing spam.
In order to take advantage of ReCaptcha, you will first need to contact your Project Manager and request that ReCaptcha be enabled for mailforms on your site(s). Once enabled, you’ll need to do the following to add ReCaptcha to your mailforms:
- Create a mailform in the admin at /admin/mailform/mailform/add/
- Create a flatpage for the mailform in the admin /admin/flatpages/flatpage/add/
- Create a custom template for the flatpage and place it in your site’s flatpage template directory (e.g., templates/your_site_name/flatpages/contact.html)
- If you have a large number of flatpages, you may want to include a mailforms directory inside of your flatpages directory (e.g., templates/your_site_name/flatpages/mailforms/contact.html)
- On the flatpage’s admin view, call the custom template under “Advanced options” like so: flatpages/mailforms/contact.html
- Write or copy/paste the HTML form into the custom template; the form must be in the template and not loaded via the “Content” text entry field seen in the admin at /admin/flatpages/flatpage/add/
- Make sure that {% load recaptcha %} appears at the top of the template
- Inside of the form, immediately before the submit button, add:
{% get_recaptcha as recaptcha_form %}
<p>{{ recaptcha_form }}</p>If ReCaptcha is enabled for mailforms, it needs to be loaded on all mailforms.
Below is a simple example of the custom template you might use to load ReCaptcha on a mailform:
{% extends "base_generic.html" %}
{% load content recaptcha %}
{% block title %}{% endblock %}
{% block body_class %}{% endblock %}
{% block content %}
<form method="POST" action="/mailform/contact/" enctype="multipart/form-data" id="contact">
<input type="hidden" name="_required" value="a_contact_name,b_email,c_phone">
<label for="a_contact_name">First & Last Name (required)</label>
<input id="a_contact_name" type="text" name="a_contact_name">
<br />
<label for="b_email">Email (required)</label>
<input id="b_email" type="text" name="b_email">
<br />
<label for="c_phone">Phone (required)</label>
<input id="c_phone" type="text" name="c_phone">
<br />
{% get_recaptcha as recaptcha_form %}
<p> {{ recaptcha_form }}</p>
<label for='submit'>Click here to submit your request</label>
<input type="submit" value="Submit">
</form>
{% endblock %}
0 Comments
Add your comment