Difference between revisions of "Page Templates:Inline Form Tools"

From Whirlwind eCommerce Wiki
Jump to: navigation, search
(New page: 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 h...)
 
(→‎INCLUDE fnEtc.js JAVASCRIPT LIBRARY)
 
(7 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
In order for inline form tools three steps are required
 
In order for inline form tools three steps are required
  
−
===INCLUDE fnEtc.js JAVASCRIPT LIBRARY==
+
==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:
 
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">
 
<source lang="HTML4strict">
Line 10: Line 10:
  
 
</source>
 
</source>
 +
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==
 
==INITIALIZE INLINE FORMS==
Line 17: Line 18:
 
<script language="javascript">
 
<script language="javascript">
 
<!--
 
<!--
−
eV.eventAdd(window,'load',eV.inlineFormTools); //
+
eV.eventAdd(window,'load',eV.inlineFormTools);  
 
// -->  
 
// -->  
 
</script>
 
</script>
Line 32: Line 33:
 
The following attributes can be added to each form element (INPUT/SELECT/TEXTAREA tags):
 
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.
 
;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.
+
;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.
 
;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.
 
;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.
Line 38: Line 48:
  
  
−
===EXAMPLES===
+
==EXAMPLES==
−
Generic Example, with detailed explainations:
+
Example
 
<source lang="HTML4strict">
 
<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;
 +
}
  
−
<!-- start our form -->
+
.hmclass {
−
<form action="index.php" method="POST">
+
font-size : 10px;
−
 
+
color : #999999;
−
<!------------------------>
+
display:inline-block;
−
<!--- HIDDEN FIELDS ---->
+
}
−
<!------------------------>
+
.hmclass2 {
−
 
+
font-size : 10px;
−
<!-- the formType field attached a 'category' to this form when submitted.  
+
color : #AA6666;
−
If you have multiple custom forms on your website, this helps to easily search, filter and group form submissions
+
display:inline-block;
−
ideas for this are: newsletter, catalog request, contact us, feedback... -->
+
background-color: #FFAAFF;
−
<input type="hidden" name="formType" value="this form">
+
}
−
 
+
.vmclass {
−
<!-- the emailTo field allows you to enter recipients of this forms contents
+
color : #FF0000;
−
When the form is submitted, the contents will be sent to the email addresses in this field -->
+
font-size : 10px;
−
<input type="hidden" name="emailTo" value="email@website.com,anotheremail@website.com">
+
}
−
 
+
.vmclass2 {
−
<!-- the fa field tells the websiteto process this form on submission -->
+
color : #00FF00;
−
<input type="hidden" name="fa" value="USER.formSubmit">
+
background-color: #FFFFAA;
−
 
+
font-size : 10px;
−
<!-- the redirect field tells the website where to put the visitor after the form has been procesed -->
+
}
−
<input type="hidden" name="redirect" value="index.php?pageId=123&message=Thank you for filling our our form">
+
-->
−
 
+
</style>
−
<!-- the following otherFields field is REQUIRED if you have ANY custom fields
+
</head>
−
enter a comman delim list of the field names -->
+
<body>
−
<input type="hidden" name="otherFields" value="source,color,likeItalian" />
+
<table>
−
 
+
<form
−
<!--------------------->
+
helpButtonClass="hbclass"  
−
<!-- CORE FIELDS ------>
+
helpMessageClass="hmclass"  
−
<!--------------------->
+
validateMessageClass="vmclass">
−
 
+
<tr>
−
<!-- first name, last name and email fields are CORE form fields
+
<td>First Name</td>
−
but are optional - you do not have to include these fields, but if you do,
+
<td><input type="text" name="firstName"  
−
make sure you use the correct names -->
+
validate="min:1:You must enter a first name"></td>
−
<br>First Name: <input type="text" name="firstName" size=25 maxlength=50>
+
</tr>
−
<br>Last Name: <input type="text" name="lastName" size=25 maxlength=50>
+
<tr>
−
<br>Email Address: <input type="text" name="emailAddress" size=50 maxlength=255>
+
<td>Last Name</td>
−
 
+
<td><input type="text" name="lastName"  
−
<!-- the subscribe field is another CORE field that is optional.
+
validate="min:1:You must enter a last name"></td>
−
If it is used and checked, than the newsletter subscription process
+
</tr>
−
will be triggered for the passed emailAddress upon form submission -->
+
<tr>
−
<br>Check here to subscribe to our newsletter: <input type="checkbox" name="subscribe" value="1">
+
<td>Email Address</td>
−
 
+
<td><input type="text" name="email"  
−
<!--------------------->
+
validate="email:You must enter a valid email address"  
−
<!-- CUSTOM FIELDS ------>
+
help="Your email address will be used as your login"></td>
−
<!--------------------->
+
</tr>
−
<!-- any number of custom fields can be created
+
<tr>
−
each can have any name as long is not one of the above hidden or core field names
+
<td>Password</td>
−
make sure to populate the otherFields field with the names of your custom fields
+
<td><input type="password" name="password"
−
or they will not work -->
+
validate="min:8:Your password must be at least 8 characters long"  
−
<br />How did you find out about us? <input type="text" name="source" size=50 maxlength=100 />
+
help="Your password will be required, along with your email, to login"  
−
<br />What is your favorite color?
+
validateMessageClass="vmclass2"  
−
<select name="color">
+
helpMessageClass="hmclass2"></td>
−
<option>Red</option>
+
</tr>
−
<option>Blue</option>
+
<tr>
−
<option>Green</option>
+
<td>Confirm Password</td>
−
</select>
+
<td><input type="password" name="confirmPassword"  
−
<br />Do you like italian food?
+
validate="match:password:Your password and confirm password must match"></td>
−
YES<input type="radio" name="likeItalian" value="1" />
+
</tr>
−
NO<input type="radio" name="likeItalian" value="0" />
+
</form>
−
 
+
</table>
−
<!-- be sure all your custom field names are entered into the "otherFields" field
+
</body>
−
see above REQUIRED HIDDEN FIELDS for details -->
+
</html>
−
<!--- DONE WITH CUSTOM FIELDS ---->
+
−
 
+
−
<!-- just your plain run of the mill submit button - nothing special -->
+
−
<br /><input type="submit" value="SUBMIT" />
+
−
 
+
−
<!-- close out the form -->
+
−
</form>
+
−
</source>
+
−
 
+
−
Newsletter Sign Up Form Example:
+
−
<source lang="HTML4strict">
+
−
 
+
−
<form action="index.php" method="POST">
+
−
 
+
−
<input type="hidden" name="formType" value="newsletter">
+
−
<input type="hidden" name="emailTo" value="newsletters@mywebsite.com">
+
−
<input type="hidden" name="fa" value="USER.formSubmit">
+
−
<input type="hidden" name="redirect" value="index.php?pageId=123&message=Thank you for registering for our newsletter">
+
−
<!-- no custom fields in this example, but you are free to add if you need them! -->
+
−
<input type="hidden" name="otherFields" value="" />
+
−
 
+
−
<h1>Register for our newsletter!</h1>
+
−
 
+
−
<br>First Name: <input type="text" name="firstName" size=25 maxlength=50>
+
−
<br>Last Name: <input type="text" name="lastName" size=25 maxlength=50>
+
−
<br>Email Address: <input type="text" name="emailAddress" size=50 maxlength=255>
+
−
 
+
−
<!-- notice the subscribe field is hidden here,
+
−
since it is assumed they want to subscribe
+
−
otherwise they would not be submitting this form -->
+
−
<input type="hidden" name="subscribe" value="1">
+
−
 
+
−
<br /><input type="submit" value="SUBSCRIBE!" />
+
−
 
+
−
</form>
+
−
</source>
+
−
 
+
−
 
+
−
Catalog Request Example:
+
−
<source lang="HTML4strict">
+
−
 
+
−
<form action="index.php" method="POST">
+
−
 
+
−
<input type="hidden" name="formType" value="catalog request">
+
−
<input type="hidden" name="emailTo" value="catalogrequests@mywebsite.com">
+
−
<input type="hidden" name="fa" value="USER.formSubmit">
+
−
<input type="hidden" name="redirect" value="index.php?pageId=456&message=You will receive a copy of our catalog shortly">
+
−
 
+
−
<!-- a shipping form will contain custom fields here -->
+
−
<input type="hidden" name="otherFields" value="street1,street2,city,state,zipCode" />
+
−
 
+
−
<h1>Order a Catalog</h1>
+
−
 
+
−
<br>First Name: <input type="text" name="firstName" size=25 maxlength=50>
+
−
<br>Last Name: <input type="text" name="lastName" size=25 maxlength=50>
+
−
<br>Email Address: <input type="text" name="emailAddress" size=50 maxlength=255>
+
−
<br>I would like to receive occassional emails about specials and what-not: <input type="checkbox" name="subscribe" value="1">
+
−
<br>
+
−
 
+
−
<!-- the following custom fields are used to make a shipping form -->
+
−
<br>Address: <input type="text" name="street1" size=50>
+
−
<br>Address Line 2: <input type="text" name="street2" size=50>
+
−
<br>City: <input type="text" name="city" size=50>
+
−
<br>State: <select name="state">
+
−
<option>AK</option>
+
−
<option>AL</option>
+
−
<option>... more states here ...</option>
+
−
</select>
+
−
<br>Zip: <input type="text" name="zipCode" size=10>
+
−
 
+
−
 
+
−
<br /><input type="submit" value="ORDER!" />
+
−
 
+
−
</form>
+
 
</source>
 
</source>

Latest revision as of 20:11, 14 October 2009

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>

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