Page Templates:Inline Form Tools
From Whirlwind eCommerce Wiki
Revision as of 20:11, 14 October 2009 by Root (Talk | contribs) (→INCLUDE fnEtc.js JAVASCRIPT LIBRARY)
Inline form tools allow content managers to easily add messaging and validation to forms inline with the fields. Inline form messaging has been proven as the most user-friendly method of handling forms, resulting in more form completions. A knowledge of HTML form coding is required to do this.
In order for inline form tools three steps are required
Contents
INCLUDE fnEtc.js JAVASCRIPT LIBRARY
As this contains the code to execute and manage inline forms. Just place the following line in the HEAD of your HTML page:
<script language="javascript" src="/common/fnEtc.js"></script>If you are executing your html page from outside of a whirlwind site, be sure to put the domain name in the src attribute of the above script tag
INITIALIZE INLINE FORMS
Add the following code, also in the HEAD of your HTML page, to start inline forms when the page loads:
<script language="javascript"> <!-- eV.eventAdd(window,'load',eV.inlineFormTools); // --> </script>
SET COMMANDS
Form Tag Commands
The following commands can be placed in the FORM tag:
- helpButtonClass
- OPTIONAL : The name of the CSS class that will govern the style of help buttons generated by the inline forms tool.
- helpMessageClass
- OPTIONAL : The name of the CSS class that will govern the style of the help messages generated by the inline form tool.
- validateMessageClass
- OPTIONAL : the name of the CSS class that will govern the style of the validation messages generated by the inline form tool.
Element Tag Commands
The following attributes can be added to each form element (INPUT/SELECT/TEXTAREA tags):
- help
- OPTIONAL: sets the help message that will appear with user requests help with the form field. By setting this attribute, the system will automatically create a help button that will trigger the display of this help message when selected.
- validate
- OPTIONAL: sets the validation commands that will qualify the field value. Multiple commands can be entered, though only the message from the last failing command for each form element will be presented to the visitor at any given time. Validation command options are below:
- min - requires a minimum number of characters to be present in the form element value
- Syntax: min:integer:message. Where Integer is the minimum number of characters and message is what is outputted to the user upon failure.
- Example: <input name="firstName" validate="min:3:You must enter three characters in the first name field to proceed">
- email - requires that the value of the form element is in email format "a@b.c"
- Syntax: email:message. Where message is what is outputted to the user upon failure.
- Example: <input name="emailAddress" validate="email:You must enter a valid email address">
- match - requires that the value of the form element exactly match the value of another form element
- Syntax: match:elementToMatch:message. Where elementToMatch is the name of the form element that must match values with this form element and message is what is outputted to the user upon failure.
- Example: <input name="passwordConfirm" validate="match:password:Password must match Confirm Password">
- helpButtonClass
- OPTIONAL : The name of the CSS class that will govern the style of help buttons generated by the inline forms tool for this element. Setting this attribute at the form element level will override the helpButtonClass attribute set at the FORM tag.
- helpMessageClass
- OPTIONAL : The name of the CSS class that will govern the style of the help messages generated by the inline form tool for this element. Setting this attribute at the form element level will override the helpMessageClass attribute set at the FORM tag.
- validateMessageClass
- OPTIONAL : the name of the CSS class that will govern the style of the validation messages generated by the inline form tool for this element. Setting this attribute at the form element level will override the validateMessageClass attribute set at the FORM tag.
EXAMPLES
Example
<html> <head> <script language="javascript" src="/common/fnEtc.js"></script> <script language="javascript"> <!-- eV.eventAdd(window,'load',eV.inlineFormTools); // --> </script> <style type="text/css"> <!-- .hbclass { background-color: #FFFF00; font-size : 10px; text-decoration : none; color : #999966; border : solid 1px #999966; font-weight : bold; -moz-border-radius : 10px; -webkit-border-radius : 10px; padding-right: 2px; padding-left: 2px; } .hmclass { font-size : 10px; color : #999999; display:inline-block; } .hmclass2 { font-size : 10px; color : #AA6666; display:inline-block; background-color: #FFAAFF; } .vmclass { color : #FF0000; font-size : 10px; } .vmclass2 { color : #00FF00; background-color: #FFFFAA; font-size : 10px; } --> </style> </head> <body> <table> <form helpButtonClass="hbclass" helpMessageClass="hmclass" validateMessageClass="vmclass"> <tr> <td>First Name</td> <td><input type="text" name="firstName" validate="min:1:You must enter a first name"></td> </tr> <tr> <td>Last Name</td> <td><input type="text" name="lastName" validate="min:1:You must enter a last name"></td> </tr> <tr> <td>Email Address</td> <td><input type="text" name="email" validate="email:You must enter a valid email address" help="Your email address will be used as your login"></td> </tr> <tr> <td>Password</td> <td><input type="password" name="password" validate="min:8:Your password must be at least 8 characters long" help="Your password will be required, along with your email, to login" validateMessageClass="vmclass2" helpMessageClass="hmclass2"></td> </tr> <tr> <td>Confirm Password</td> <td><input type="password" name="confirmPassword" validate="match:password:Your password and confirm password must match"></td> </tr> </form> </table> </body> </html>
