Page Templates:Inline Form Tools

From Whirlwind eCommerce Wiki
Revision as of 20:08, 14 October 2009 by Root (Talk | contribs)

Jump to: navigation, search

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

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>

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>
Retrieved from "http://wiki.whirlwind-ecommerce.com/mediawiki/index.php?title=Page_Templates:Inline_Form_Tools&oldid=845"