Contact forms are complicated—this article is a total run-down of all of our supported contact form features.
A contact form in Neto has four components: the front-end template, the content page, the success page and the email template.
Just like blog posts and content pages, your form needs a dedicated content page in the back end. This should ideally be under the content type Forms and have the Module set to
The content page will also either have the code for the form in one of it's description fields or have a custom design template assigned to it.
We recommend using a custom template so you can manage it with a proper text editor via FTP.
This is recommended, but optional, as you can put the code for the form into one of the description fields for the content page.
This is where you define the format for the email which is sent to you on submission of the form.
It is referenced under the Module Settings for the content page which hosts the form. The relevant fields are Template and Template File.
This is the page that shows after the form has been successfully submitted. It is set under the Success Content Id field under the Module Settings for the content page that hosts your form.
Below is the recommended process for building a contact form in Neto. It's worth noting that not all contact forms have been setup like this—so if you've got an older custom design or your website is built by a third-party it may be setup differently.
First, we need to create the template.
Setup the default fields.
Every form has some standard, required fields:
state (this is functional and not related to location/addresses).
There are also some other required elements, such as the form action and submit button. Below is the standard code you should start with.
[%if [@out-error@]%]<div class="alert alert-warning">[@out-error@]</div>[%/if%]<form action="[%URL type:'page' id:'[@content_id@]'/%]" method="post"> <div class="form-group"> <label>Email Address</label> <input name="inp-email" class="form-control" type="email" required> </div> <input name="inp-submit" type="hidden" value="y"> <input name="state" type="hidden" value="email_sent"> <input class="btn btn-success" type="submit" value="Send Email"> </form>
Tip: If you don't want your form to require the
inp-email field, you can simply make it a hidden field and put dummy text in it.
Now that we have the standard code in our template, we can add the extra fields we want to utilise.
To add a new field, you simply need to put the input in and name it. All input name attributes must start with
inp-. So, if you want to add a field for First Name, you'd add the code below:
<div class="form-group"> <label>First Name</label> <input name="inp-firstname" class="form-control" type="text" required> </div>
Tip: Multiple forms can use the same success page so you can just use the default, generic success page instead of creating a new, specific one.
Each contact form has it's own email template, which dictates the layout for the email our system sends the recipients.
Duplicate the default email template, which is located here:
The email should look something like this:
<!--[SUBJECT:[@subject@]]--> <!--[FROM:firstname.lastname@example.org]--> <!--[TO:[@recipient@]]--> <h1>The following enquiry has been received:</h1> <ul> <li>Name: [@data_firstname@]</li> <li>Phone: [@data_phone@]</li> <li>Email: [@data_email@]</li> </ul>
Now you need to add the fields. Every field in your form needs to be represented here.
To add the field
inp-firstname, you simply need to add the data tag
[@data_firstname@]. The same goes for any custom field you have setup—simply replace
inp- from the input's name attribute with
data_, and use it as a data tag.
Now we just need to create our content page.
contact_form. This will reveal a new section called Module settings.
.email.html); and Success Content ID to be the ID of the content page you wish to show after the form has been submitted successfully.
Yes—this is easy if you either do not use the Neto Web Accelerator or you are using the form on a page that does not get cached.
To do this, you simply need to include new hidden fields, with the value attribute populated with the appropriate user tags.