The Anatomy of a Neto by Maropost 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. Set the "Module" field to contact_form under the "Template & Design" section for the page that hosts your 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 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.

This is referenced under the "Module Settings" section for the 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. This is set using the "Success Content ID" field under the "Module Settings" section for the 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.

Step 1: Duplicate the default template

Duplicate the existing default.template.html file within /httpdocs/assets/themes/[THEME-NAME]/templates/cms and rename it to contact_form.template.html.

Every form has some standard required fields:

• inp-email
• inp-submit
• 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.

<form action="[%URL nohost:'1' type:'page' id:'[@content_id@]'/%]" enctype="multipart/form-data" method="post">
    <div class="form-group">
        <label for="inp-first_name">Name </label><span class="small text-danger">*</p>
        <input class="form-control" id="inp-first_name" name="inp-first_name" required="" size="40" type="text" value="[%nohtml%][@inp-first_name@][%end nohtml%]" />
        <input class="hidden" name="inp-title" type="text" value="" />
    </div>
    <div class="form-group">
        <label>Email Address </label><span class="small text-danger">*</span>
        <input class="form-control" name="inp-email" required="" size="40" type="email" value="[%nohtml%][@inp-email@][%end nohtml%]" />
    </div>
    <div class="form-group">
        <label>Message</label>
        <textarea class="form-control" name="inp-msg" rows="5">[%nohtml%][@inp-msg@][%end nohtml%]</textarea>
    </div>
    <div class="form-group">
        <div class="clear"> </div>
        <input name="inp-submit" type="hidden" value="y" />
        <p><input name="state" type="hidden" value="email_sent" /></p>
        <p><input class="btn btn-lg btn-default" type="submit" value="Submit" /></p>
    </div>
</form>

Tip: the first line manages the error handling. This is 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.

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 add the input field to the contact form and name it. All input name attributes must start with inp-. So, if you want to add a field for Phone Number, you'd add the code below:

<div class="form-group">
    <label>Phone Number</label>
    <input name="inp-phone" class="form-control" type="text">
</div>

Step 2: Create the Success Page

1. In the control panel, create a new form page and enter the details you want displayed after the form has been successfully submitted.

Tip: Multiple forms can use the same success page so you can just use the default success page instead of creating a specific one.

Step 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 existing contact_us.email.html template within /private/www/netosuite/SysDoc/emails/contact_form/contact_us and rename it.

The email template should look something like this:

<!--[SUBJECT:[@subject@]]-->
<!--[FROM:[@config:company_email@]]-->
<!--[REPLY-TO:[@data_email@]]-->
<!--[TO:[@recipient@]]-->

<p>The following enquiry has been received:</p>

<ul>
    <li><strong>Name:</strong> [@data_first_name@] [@data_last_name@]</li>
    <li><strong>Phone:</strong> [@data_phone@]</li>
    <li><strong>Email:</strong> [@data_email@]</li>
</ul>

<h2>Message</h2>
<p>[@data_msg@]</p>

2. If you have added new form fields, these will need to be represented here. To add the field inp-first_name, you simply need to add the data tag [@data_first_name@]. 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.

Step 4: Create the Content Page

Now we just need to create our content page.

1. In the control panel, navigate to Webstore > Form and create a new form, filling out the name and page content.

2. Under Template & Design section:

   • Set the Body Template to the template you have built for your form.
   • Set the Module field to be contact_form - this will reveal a new section called Module settings.

3. Set the following "Module Settings":

   • Subject field 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 (eg. contact_form.email.html)
   • Success Content ID to be the "ID" of the content page you wish to show after the form has been submitted successfully

FAQs

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.