View source for Page Templates:Inline Form Tools

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:
<source lang="HTML4strict">

<script language="javascript" src="/common/fnEtc.js"></script>

</source>

==INITIALIZE INLINE FORMS==
Add the following code, also in the HEAD of your HTML page, to start inline forms when the page loads:
<source lang="HTML4strict">

<script language="javascript">
<!--
eV.eventAdd(window,'load',eV.inlineFormTools); 
// --> 
</script>

</source>

==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: &lt;input name="firstName" validate="min:3:You must enter three characters in the first name field to proceed"&gt;
:* 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: &lt;input name="emailAddress" validate="email:You must enter a valid email address"&gt;
:* 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: &lt;input name="passwordConfirm" validate="match:password:Password must match Confirm Password"&gt;
;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
<source lang="HTML4strict">
<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>
</source>