We fancy Expression Engine you should too!
GreenJack Ajax Validation for Freeform
We’ve taken your favorite form module for Expression Engine and hijacked it.
You can now take your form submissions from Solspace Freeform, validate via aJax, and display the errors contextually within your form.
Current Version: 1.0.1
How Does it Work
This is not a module, plugin, or extension (yet), its a simple JavaScript file that captures your form submission, scrubs through the required fields and submits the form via aJax. If errors were found, it returns them to the script and you can handle the error messages how (and where) you want. No more redirecting to another page to show the user they forgot a field!!
Updated: December 11, 2009:
- Added the ability to use multiple words for the field label. See Step 10.
Prerequisites:
Instructions:
Step 1
Download all the prerequisites scripts and module, if you do not have them already. Don't forget GreenJack!
Step 2
You will need to create a new template in EE, called success. Inside that template, just enter the work success. I put this in my contact template group to keep everything together.
Step 3
If you want to use a thank you template for your thank you notification, go ahead a create another template in EE. If you are going to toggle the form with your thank you message, make sure you are not including any type of header of footer templates.
Step 4
Include the GreenJack script in your template. It will work either the a script tag or embedding the code in the template.
Step 5
Build your Freeform as usual. The FreeForm return variable will be set to your success template. eg: return="contact/success"
Step 6
Depending our your configuration add the following: For labels to show errors add the label prefix: <strong id="label_name"</stronge>. To show error messages add a container for that: <div id="error_name" class="errorbox">. Add your custom attribute to the each for field eg: <input rel="name" type="text" name="name" value="" class="text" />, you can just add an id attribute.
Step 7
Add an id to your form container <div id="demoform">
Step 8
Add your thank you hidden div <div id="thankyouhidden"></div>, of course your css should be set to display:none;
Step 9
It is IMPORTANT that you leave the <div id="content"> in the User Message Template under the Specialty Templates in the EE admin.
Step 10
If you are using multiple word field labels, use a underscore '_' in your code to separate the words.
Code Snapshot:
<div id="thankyouhidden"></div>
<div id="demoform">
{exp:freeform:form form_name="greenjackdemo" notify="someone@gogreenhouse.com" template="greenjackdemo" required="name|email" return="contact/success"}
<p>
<strong id="label_name">Name <span class="srequired">*</span></strong><br />
<input rel="name" type="text" name="name" value="" class="text" />
<div id="error_name" class="errorbox"></div>
</p>
<p>
<strong id="label_email">Email <span class="srequired">*</span></strong><br />
<input rel="email" type="text" name="email" value="" class="text" />
<div id="error_email" class="errorbox"></div>
</p>
<p>
<strong id="phone_label">Phone</strong><br />
<input type="text" name="phone1" value="" class="text" />
<div class="errorboxcontainer"></div>
</p>
<p>
<strong>Comments</strong><br />
<textarea name="comments" class="text" cols="50" rows="8" /></textarea>
<div class="errorboxcontainer"></div>
</p>
<p>
<input id="thesubmitbutton" type="submit" name="submit" value="Check It Out!" />
</p>
{/exp:freeform:form}
</div>
<div id="demoform">
{exp:freeform:form form_name="greenjackdemo" notify="someone@gogreenhouse.com" template="greenjackdemo" required="name|email" return="contact/success"}
<p>
<strong id="label_name">Name <span class="srequired">*</span></strong><br />
<input rel="name" type="text" name="name" value="" class="text" />
<div id="error_name" class="errorbox"></div>
</p>
<p>
<strong id="label_email">Email <span class="srequired">*</span></strong><br />
<input rel="email" type="text" name="email" value="" class="text" />
<div id="error_email" class="errorbox"></div>
</p>
<p>
<strong id="phone_label">Phone</strong><br />
<input type="text" name="phone1" value="" class="text" />
<div class="errorboxcontainer"></div>
</p>
<p>
<strong>Comments</strong><br />
<textarea name="comments" class="text" cols="50" rows="8" /></textarea>
<div class="errorboxcontainer"></div>
</p>
<p>
<input id="thesubmitbutton" type="submit" name="submit" value="Check It Out!" />
</p>
{/exp:freeform:form}
</div>
Configuration:
createHiddenDiv :
true/false
This div is created to store the messages from Freeform via ajax. If set to false, you will need to add this to your template.
redirectToThankYouTemplate :
true/false
If you want to redirect to a thank you template, reload new page. How it is done typically with Freeform.
toggleThankYouDiv :
true/false
If set to true, the form will be replaced by the thank you message.
thankYouTemplatePath :
path to template
If redirectToThankYou is set to true - this is the ee path to your thank you template.
thankYouDiv :
element id
Div to display thank you message. This will ajax in the thankyou template into the current page.
formDiv :
element id
Div containing the form. Needed if you are toggling the thank you and form.
UseFormIDs :
true/false
If true, the form_id attr needs to be added to the exp:freeform:form. Use false for just one form per page. Multiple forms have not been tested yet!
formID :
element id
This is the ID of the freeform, add attribute form_id="" to the exp:freeform:form tag. Needed if using multiple forms per page.
showErrorMessages :
true/false
Show error messages generated by FreeForm. This will appear where your fieldErrorMessagePrefix div is set. eg: <div id="error_email">
showErrorFormClass :
true/false
Changes class on field to show an error. Set to true if you want to change the class on the input/textarea, something like changing the border to red.
showErrorLabels :
true/false
Changes class on label to show an error. Set to true if you want to change the class on the field label, something like changing the font color to red.
errorClass :
css class name
Css class to show the form field had an error. This class would show something like a red border.
errorLabelClass :
css class name
Css class to show the field label had an error. This class would show the label font color in red.
onSubmitMessage :
text
Text that will appear on submit button when clicked. To show something is happening after submitting the form, the text on the submit button will change to this. If there are errors on the form, the default text will reappear the the button enabled.
validateField :
text
This is the custom attribute added to form fields that are required. This is needs to identify the form field. eg: <input rel="email" type="text" name="email" /> You can use anything, just stay away from real attributes. See Step 10
labelPrefix :
text
This added in front of the element id to display the error message for that field, if showErrorLabels is set to true. This is to identify the label of the returned error. eg: <span id="label_email">Email</span> See Step 10
fieldErrorMessagePrefix :
text
This added in front of the element id to display the error message for that field, if showErrorMessages is set to true. eg: <div id="error_email" class="errorbox"></div> See Step 10
hiddenDivWithFFErrors :
element id
This is the id of hidden div that the ajax call will load the FreeForm errors into. If createHiddenDiv is set to true, this will be created automatically.
Restrictions:
Unless you have been granted prior, written consent from Greenhouse Studio, you may not reproduce, distribute, sell, rent, lease, assign, or sublet this software.
See it in Action:
The form will not do a real submit
Name *
Email *
Phone
Comments