FormIt on Modx Cloud

3 Posts

lsouza69 Reply #1, 11 years, 3 months ago

I have a contact form on a site that I am designing and I can not get the validation to work, the email to send or the math question to be required and checked. I have read all the documentation I can find and have had no luck getting things to work. I have attached the code below. I had a lot more stuff being validated and have a chunk for formatting but took all that out as I can't get the basics to work.

<form id="form" action="[[~[[*id]]]]" enctype="text/plain" method="post">
<h2>Get A Quote</h2>
<div class="line number1 index0 alt2">[[!FormIt? &hooks=`math` &validate=`math:required`]]</div>
<p>[[!+fi.validation_error_message:notempty=`<p>[[!+fi.validation_error_message]]</p>`]]</p>
<p>Fill out the form below and a representative will contact within two business days</p>
<!--fields-->
<div><label for="name"> Name: [[!+fi.error.placeholder_name:notempty=`<span class="label label-important">This is a required field.</span>`]] </label> <input id="name" name="name" required="" type="text" value="[[!+fi.name]]" placeholder="First Last" /></div>
<div><label for="tel">Telephone:<span class="error">[[!+fi.error.tel]]</span> <input name="tel" required="" size="35" type="tel" placeholder="(508)555-555" /></label></div>
<div><label for="email">Email:<span class="error">[[!+fi.error.email]]</span></label> <input required="" size="35" type="email" value="[[!+fi.email]]" placeholder="[email protected]" /></div>
<div><label for="message">Quote Type<span class="error">[[+fi.error.Insurance Type]]</span> </label><select name="Insurance Type:">
<option value="Home">Home</option>
<option value="Automobile">Automobile</option>
<option value="Business">Business</option>
<option value="Life">Life</option>
<option value="Health">Health</option>
<option value="Marine">Marine</option>
</select></div>
<label>[[!+fi.op1]] [[!+fi.operator]] [[!+fi.op2]]?</label> [[!+fi.error.math]] <input name="math" required="" type="text" value="[[!+fi.math]]" placeholder="Anti-Spam Put math Answer here" /> 
<div><button id="contact-submit" name="submit" type="submit">Send Email</button></div>
</form>

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 11 years, 3 months ago

In the first place, check your email using BobRay's QuickEmail snippet. http://bobsguides.com/quickemail-snippet-tutorial.html

The snippet call should be above the form itself. And you need some email-specific properties, as well as the email hook.

See http://rtfm.modx.com/extras/revo/formit/formit.tutorials-and-examples/formit.examples.simple-contact-page as well as http://rtfm.modx.com/extras/revo/formit/formit.hooks/formit.hooks.email

Once you are sure that mail is being sent from QuickEmail, try your form snippet with no validation at all, and just the email hook. Remember, the hooks are run in the order they are listed in the snippet property.

Make sure that you do have the email sending chunk that you specify in your snippet call.
[ed. note: sottwell last edited this post 11 years, 3 months ago.]

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

☆ A M B ☆
24,524 Posts

sottwell Reply #3, 11 years, 3 months ago

As far as the "math" hook, you need to read the documentation carefully. http://rtfm.modx.com/extras/revo/formit/formit.hooks/formit.hooks.math

Actually the entire form is badly structured, but that's another matter.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 11 years, 3 months ago

This works. Edit the &redirectTo property to your "thank-you" page's resource ID.

[[!FormIt?
   &hooks=`math,email,redirect`
   &emailTpl=`emailTpl`
   &emailTo=`[email protected]`
   &redirectTo=`7`
   &validate=`name:required,
      tel:required,
      email:email:required,
      type:required,
      math:required`
]]

<h2>Contact Form</h2>
 
[[!+fi.validation_error_message:notempty=`<p>[[!+fi.validation_error_message]]</p>`]]
 
<form action="[[~[[*id]]]]" method="post" class="form">

 <div>
	<label for="name"> Name: <span class="error">[[!+fi.error.name]]</span> </label> 
	<input id="name" name="name" type="text" value="[[!+fi.name]]" placeholder="First Last">
</div>

 <div>
	<label for="tel"> Telephone: <span class="error">[[!+fi.error.tel]]</span> </label> 
	<input id="tel" name="tel" type="tel" value="[[!+fi.tel]]" placeholder="(508)555-555">
</div>

 <div>
	<label for="email"> Email: <span class="error">[[!+fi.error.email]]</span> </label> 
	<input id="email" name="email" type="email" value="[[!+fi.email]]" placeholder="[email protected]">
</div>

 <div>
	<label for="type"> Quote Type: <span class="error">[[!+fi.error.type]]</span> </label> 
    <select name="type" value="[[!+fi.type]]">
        <option value="">Select an option...</option>
        <option value="Home" [[!+fi.type:FormItIsSelected=`Home`]]>Home</option>
        <option value="Automobile" [[!+fi.type:FormItIsSelected=`Automobile`]]>Automobile</option>
        <option value="Business" [[!+fi.type:FormItIsSelected=`Business`]]>Business</option>
        <option value="Life" [[!+fi.type:FormItIsSelected=`Life`]]>Life</option>
        <option value="Health" [[!+fi.type:FormItIsSelected=`Health`]]>Health</option>
        <option value="Marine" [[!+fi.type:FormItIsSelected=`Marine`]]>Marine</option>
    </select>
</div>

<div>
    <label>[[!+fi.op1]] [[!+fi.operator]] [[!+fi.op2]]?</label>
    [[!+fi.error.math]]
    <input type="text" name="math" value="[[!+fi.math]]">
    <input type="hidden" name="op1" value="[[!+fi.op1]]">
    <input type="hidden" name="op2" value="[[!+fi.op2]]">
    <input type="hidden" name="operator" value="[[!+fi.operator]]">
</div>

<div>
    <button id="contact-submit" name="submit" type="submit">Send Email</button>
</div>

</form>

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

3 Posts

lsouza69 Reply #5, 11 years, 3 months ago

sottwell, thanks for your help and I apologize for poor structure everything was neat and clean originally and then I got frustrated when I couldn't get it working and started changing all types of things without undoing what didn't. Frustration lead me to break the rule of only change one thing at a time. Everything on the form seems to work now with the exception of email. I have to look closely at your code and my original as I am still not sure where I went wrong. I had read all the documentation you shared with me already but must have missed something. I used the Bobs Guide and quickmail to test email and it says everything is working but I did not get the email. Here is the debug output.

System Settings (used if property is missing):

emailsender System Setting: [email protected]
site_name System Setting: MODX Revolution
Properties (from parameters, property set, or snippet default properties:

Tpl chunk name:
subject:
to:
fromName:
replyTo:
emailSender:
allowHtml: 1
message:
Final Values (actually used when sending email):

subject: Default Subject
to: [email protected]
fromName: QuickEmail
replyTo: [email protected]
emailSender: [email protected]
allowHtml: 1
Message Body: Default Message
Send reported successful