How do I use the form mailer?

This article reviews the elements you need for all forms created for Page Manager pages or editorial content areas. These forms could also be integrated into articles or blog posts or anywhere you can add HTML. When a reader fills out a form, the information will be sent directly to someone at your company. Forms that do not use a hidden input for recipient list, which is typically an email address list hosted by your Email Services Provider (ESP), will automatically be connected to the email address specified in your website's settings, as described below.

1. Customize the below code to create your form. This is an example.

  1. The action of the form must always be set to '/mailer'.
  2. _msg_confirmation = the URL that the visitor is taken to after he submits the form. In the example above, the reader will be taken to a static Page Manager Thank You page called /contact-form-submission. You can user any page on your website.
  3. _msg_order = the order of the fields as they should be displayed in the email sent to the form mailer recipient.
  4. An example of a field. 
    • This field's label (visible to the reader) is "Your Name." 
    • Use for="name" to indicate to screen readers that the label is connected to the Name input field
    • The input id="name" matches the for name in the label
    • The name="name" matches the form value in item 3
    • If you want the field to be required, add the word required to trigger validation
    • The size is "25," which is the width of the field characters.
    • The type is "text," which means they will be able to type in the field. 
  5. Another example of a field. This field is set up similarly to #4 above, but it allows for multiple rows and columns in what is called a "textarea."
  6. This is the button, as designated by class="button." The form and button will default to a standard look and feel and are driven by CSS. However, any changes you make to your CSS and any other in-line styles will trump any built-in form styles.
  7. Each field’s label and input is surrounded with a div tag.  Forms created in this manner will look clean.

The form sample above can be downloaded here.

2. If necessary, confirm or update who should receive submissions by email in your Settings under Advanced. The file is named formmailer.to.email and lives in your Settings.

Only users with the appropriate privileges can change this setting. Forms that do not specify a hidden input for _recipient_list will automatically be sent to the email addressed specified in 'formmailer.to.email'.

2.1. Edit the email address in the Value field. Hit Enter/Return to Save. If you would like to enter multiple recipients, separate the email addresses with a comma (e.g. [email protected],[email protected])

3. If you'd like anti-bot functionality, add a line of code called a honeypot.

The optional honeypot field that should thwart most bots while remaining transparent to site visitors. Include the field exactly as it is written below in a form that uses the Form Mailer for processing. If the form submission contains a value for timezone_hp then we assume non-human activity, or a bot.

<span style="display:none;">

    <input name="timezone_hp" type="text" id="timezone_hp" />

</span>

We use timezone_hp because honeypot seemed a little too obvious. Smarter bots are more likely to be tripped up with what seems like a real field. At the same time, we chose something most of our clients would not actually need as a real field.

If a bot submits something in this hidden field, the form will redirect it to the homepage and will can cancel the submission.

4. If you would like to add a reCAPTCHA to your form, use our shortcode

Insert the following shortcode into your form's source code wherever you'd like the reCAPTCHA to display. Be sure it is somewhere before the end of the </form> tag.

[recaptcha] - standard reCAPTCHA. Most people will use this option.

[recaptcha error="Custom error message"] - customize the error message displayed when the reCAPTCHA fails.

[recaptcha validate="false"] - turn off client-side validation.

5. OPTIONAL: Enable Form Validation

To enable form validation, simply add the word "required" to the field. This will trigger validation when the form is submitted:

<input id="email" name="email" required size="25" type="text" />