News and Tips

Contact Form Basics

26 May 2015

Contact forms are complicated—this article is a total run-down of all of our supported contact form features.

The Anatomy of a Neto Contact Form

A contact form in Neto has four components: the front-end template, the content page, the success page and the email template.

The Content Page

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 contact_form.

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.

Front-end Template

This is recommended, but optional, as you can put the code for the form into one of the description fields for the content page.

Email Template

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.

Success Page

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.

Building a Basic Contact 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.

1 — Create the Template

First, we need to create the template.

  1. Navigate to the CMS folder in your theme's templates (/private/www/netosuite/Templates/THEME_NAME/cms/)
  2. Create a new file or duplicate default.template.html.
  3. Setup the default fields.

    Every form has some standard, required fields: inp-email, inp-submit and 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>
    <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">

    Tip: the first line manages the error handling. This is totally managed by the software and cannot be customised on the front end. If you'd like custom errors, you should remove this line and build your own javascript validation.

    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.

  4. 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>

2 — Create the Success Page

  1. In the CMS, make a new form or content page (either will work).
  2. In the content for this page, you can enter the information you want to display after the form has been successfully submitted.

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.

3 — Create the Email Template

Each contact form has it's own email template, which dictates the layout for the email our system sends the recipients.

  1. Duplicate the default email template, which is located here: /private/www/netosuite/SysDoc/emails/contact_form/contact_us/

    The email should look something like this:

    <h1>The following enquiry has been received:</h1>
    <li>Name: [@data_firstname@]</li>
    <li>Phone: [@data_phone@]</li>
    <li>Email: [@data_email@]</li>
  2. 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.

4 — Create the Content Page

Now we just need to create our content page.

  1. In the control panel, click Content > Form > Add new.
  2. Name your form and fill out any content you wish to fill out.
  3. Under Template & Design, set the Body Template to be the template you have built for your form
  4. Set Module to be contact_form. This will reveal a new section called Module settings.
  5. Set Subject to be the subject of the email you wish to receive; Recipient to be the email address you want the form to post to; Template to be the name of the email template you want to use (sans .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.
  6. Save this new page and select View On Website.


Can I post customer data in hidden fields?

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.