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.
- The action of the form must always be set to '/mailer'.
- _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 the homepage, but you can use any page on your website including a Thank You static page you can create using the Page Manager.
- _msg_order = the order of the fields as they should be displayed in the email sent to the form mailer recipient.
- An example of a field. This field's label (visible to the reader) is "Name." The input type is "text," which means they will be able to type in the field. The size is "30," which is the number of characters. Be sure to update these based on the amount of text you want your reader to enter.
- 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."
- 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.
- Each field’s label and input is surrounded with a div tag. Forms created in this manner will look clean.
2. If necessary, confirm or update who should receive submissions by email in your Sys Admin Tools. The file is named formmailer.to.email and lives in your System 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. Click Edit to view or update the email address.
2.2. Edit the email address in the Value field. Click Save. If you would like to enter multiple recipients, separate the email addresses with a comma (e.g. email@example.com,firstname.lastname@example.org)
After saving, the email address will be saved where the solid black box appears above.
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.
<input name="timezone_hp" type="text" id="timezone_hp" />
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.
[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, add a data atrribute of validation equal to "required".
<form data-validation="required" ...>
Then, each form field will need a class set to "required". For example:
<input type="text" name="company" class="required" />