I am using FormIt to process my contact form. Everything seems to be working fine except the Error Messages. The error messages are pulling the names from the form names/ids. I would prefer to set up some customer output for that so that instead of getting:
fName: This field must be at least 2 characters long.
The user would see:
First Name: This field is required and must be at least 2 characters long.
You can see the form here:
http://www.syntheticshield.com/index.php?id=8
I also have a dropdown list on that form and would like to be able to make it a required field too, but am unsure how to do that. I would also like to capture that data and have it sent in the email that comes to me but Im not sure if the [[+fieldname]] is the same usage for a dropdown as it is for the rest of the fields.
I checked the Lexicon to change the error messages, but being a fairly new MODx Revo user Im not sure what needs changed there or if I could somehow add new messages that would be displayed intstead.
If anyone could and be willing to help out I would grately appreciate it.
FormIt Hooks and set up
[[!FormIt?
&hooks=`email,redirect,FormItAutoResponder`
&emailTpl=`sentEmailTpl`
&emailSubject=`Message from SyntheticShield.com`
&emailTo=`[email protected]`
&validate=`fName:required:minLength=^2^,
email:email:required,
message:required`
&redirectTo=`21`
&validationErrorMessage=`Please correct the following errors:<br />[[+errors]]<br /><br />`
&fiarTpl=`autoResponseTpl`
&fiarSubject=`Thank You for contacting SyntheticShield`
&fiarToField=`email`
&fiarFromName=`SyntheticShield.com`
]]
Code for the form:
[[!+fi.validation_error_message]]
<form id="contactForm" class="cmxform" method="post" action="[[!~[[*id]]]]">
<fieldset class="contact-info">
<legend class="contactfields">Contact Information</legend><br />
<div class="reason">
<label for="regarding"><strong>Regarding:</strong></label>
<select name="regarding">
<option selected> </option>
<option value="General">General</option>
<option value="Product Order">Product Order</option>
<option value="Product Information">Product Information</option>
<option value="Oil Analysis">Oil Analysis</option>
<option value="Dealership Information">Dealership Information</option>
<option value="Commercial Sales">Commercial Sales</option>
</select>
</div>
<div>
<label for="fName"><strong>First Name:</strong></label>
<input type="text" id="fName" class="required" name="fName" size="30" value="[[!+fi.fName]]" />
</div>
<div>
<label for="lName">Last Name:</label>
<input id="lName" class="lName" name="lName" size="30" value="[[!+fi.lName]]" />
</div>
<div>
<label for="email"><strong>E-Mail:</strong></label>
<input id="email" name="email" size="30" class="required email" value="[[!+fi.email]]" />
</div>
<div>
<label for="contact_phone">Phone: </label>
<input id="contact_phone_NA_format" name="contact_phone_NA_format" size="14" class="phone" value="[[!+fi.contact_phone_NA_format]]" maxlength="14" />
</div>
<div>
<label for="contact_ext">Extension:</label>
<input id="contact_ext_NA_format" name="contact_ext_NA_format" size="5" class="ext" value="[[!+fi.contact_ext_NA_format]]" maxlength="5" /><br /><br />
</div>
</fieldset>
<fieldset class="vehicle-info">
<legend class="vehiclefields">Vehicle Information</legend><br />
<div>
<label for="vYear">Year: </label>
<input id="vYear" class="vYear" name="vYear" size="10" value="[[!+fi.vYear]]" />
<p class="example">Example: 2001, 2004, 2007, etc.</p>
</div>
<div>
<label for="vMake">Make: </label>
<input id="vMake" class="vMake" name="vMake" size="30" value="[[!+fi.vMake]]" />
<p class="example">Example: Chevrolet, Ford, Pontiac, etc.</p>
</div>
<div>
<label for="vMake">Model: </label>
<input id="vModel" class="vModel" name="vModel" size="30" value="[[!+fi.vModel]]" />
<p class="example">Example: Camaro, F150, Grand Prix, etc.</p>
</div>
<div>
<label for="vEngine">Engine: </label>
<input id="vEngine" class="vEngine" name="vEngine" size="30" value="[[!+fi.vEngine]]" />
<p class="example">Example: 6.2L V8, 5.4L V8, 3.8L V6, etc.</p>
</div>
<div>
<label for="vCode">VIN Code: </label>
<input id="vCode" class="vCode" name="vCode" size="10" value="[[!+fi.vCode]]" />
<p class="example">Your VIN Code is the 8th character from the left on your VIN plate.</p>
</div>
</fieldset>
<fieldset class="message-text">
<legend class="messagefield">Message</legend><br />
<div>
<p class="heading"> <strong>Enter your message below:</strong></p>
<textarea id="message" name="message" cols="70" rows="10" class="required">[[!+fi.message]]</textarea><br /><br />
</div>
</fieldset>
<div>
<input name="submit" class="submit" type="submit" value="Send Your Message" />
<input name="reset" class="reset" type="reset" value="Clear The Form" />
</div>
</form>
Error Messages from Validation:
Please correct the following errors:<br />
<li>fName: This field must be at least 2 characters long.</li>
<li>email: This field is required.</li>
<li>message: This field is required.</li>
<br /><br />
