FormIt.Examples.Simple Contact Page
Last edited by Susan Ottwell on Jul 16, 2014.
This is a user-contributed Extra. If you find issues or would like more info or help, please contact the author.
A simple Contact page with email sending, validation and redirection to Resource with ID 123.
Will also strip tags from the message, validate the email as a real email address, and make sure none of the fields are blank.
And finally, we want reCaptcha support. We've already setup our public and private keys for reCaptcha via the following System Settings:
- formit.recaptcha_public_key
- formit.recaptcha_private_key
Snippet Tag
[[!FormIt? &hooks=`recaptcha,spam,email,redirect` &emailTpl=`MyEmailChunk` &emailTo=`user@example.com` &redirectTo=`123` &validate=`name:required, email:email:required, subject:required, text:required:stripTags, numbers:required, colors:required` ]]
Contact Form
<h2>Contact Form</h2> [[!+fi.validation_error_message:notempty=`<p>[[!+fi.validation_error_message]]</p>`]] <form action="[[~[[*id]]]]" method="post" class="form"> <input type="hidden" name="nospam:blank" value="[[+fi.nospam]]" /> <label for="name"> Name: <span class="error">[[!+fi.error.name]]</span> </label> <input type="text" name="name" id="name" value="[[!+fi.name]]" /> <label for="email"> Email: <span class="error">[[!+fi.error.email]]</span> </label> <input type="text" name="email" id="email" value="[[!+fi.email]]" /> <label for="subject"> Subject: <span class="error">[[!+fi.error.subject]]</span> </label> <input type="text" name="subject" id="subject" value="[[!+fi.subject]]" /> <label for="text"> Message: <span class="error">[[!+fi.error.text]]</span> </label> <textarea name="text" id="text" cols="55" rows="7" value="[[!+fi.text]]">[[!+fi.text]]</textarea> <label> Numbers:[[+fi.error.numbers]] <select name="numbers" value="[[!+fi.numbers]]"> <option value="">Select an option...</option> <option value="one" [[!+fi.numbers:FormItIsSelected=`one`]]>One</option> <option value="two" [[!+fi.numbers:FormItIsSelected=`two`]]>Two</option> <option value="three" [[!+fi.numbers:FormItIsSelected=`three`]]>Three</option> </select> </label> <label> Colors:[[!+fi.error.colors]] <input type="hidden" name="colors[]" value="" /> </label> <ul> <li> <label><input type="checkbox" name="colors[]" value="red" [[!+fi.colors:FormItIsChecked=`red`]] /> Red</label> </li> <li> <label><input type="checkbox" name="colors[]" value="blue" [[!+fi.colors:FormItIsChecked=`blue`]] /> Blue</label> </li> <li> <label><input type="checkbox" name="colors[]" value="green" [[!+fi.colors:FormItIsChecked=`green`]] /> Green</label> </li> </ul> <br class="clear" /> [[!+formit.recaptcha_html]] [[!+fi.error.recaptcha]] <br class="clear" /> <div class="form-buttons"> <input type="submit" value="Send Contact Inquiry" /> </div> </form>
MyEmailChunk (Tpl Chunk)
This is the Formit Email Chunk. <br />[[+name]] ([[+email]]) Wrote: <br /> [[+text]]
Suggest an edit to this page on GitHub (Requires GitHub account. Opens a new window/tab).