Page Templates:Inline Form Tools - Revision history

Root: /* INCLUDE fnEtc.js JAVASCRIPT LIBRARY */

2009-10-14T20:11:02Z

‎INCLUDE fnEtc.js JAVASCRIPT LIBRARY

Root at 20:08, 14 October 2009

2009-10-14T20:08:18Z

Root at 20:06, 14 October 2009

2009-10-14T20:06:33Z

Root at 20:03, 14 October 2009

2009-10-14T20:03:37Z

Show changes

Root at 19:49, 14 October 2009

2009-10-14T19:49:36Z

Root at 19:48, 14 October 2009

2009-10-14T19:48:42Z

Root at 19:47, 14 October 2009

2009-10-14T19:47:18Z

Root at 19:41, 14 October 2009

2009-10-14T19:41:16Z

Root: 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...

2009-10-14T19:40:33Z

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...

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 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">

</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.
;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===
Generic Example, with detailed explainations:
<source lang="HTML4strict">


<form action="index.php" method="POST">






<input type="hidden" name="formType" value="this form">


<input type="hidden" name="emailTo" value="email@website.com,anotheremail@website.com">


<input type="hidden" name="fa" value="USER.formSubmit">


<input type="hidden" name="redirect" value="index.php?pageId=123&message=Thank you for filling our our form">


<input type="hidden" name="otherFields" value="source,color,likeItalian" />






<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>Check here to subscribe to our newsletter: <input type="checkbox" name="subscribe" value="1">





<br />How did you find out about us? <input type="text" name="source" size=50 maxlength=100 />
<br />What is your favorite color?
<select name="color">
<option>Red</option>
<option>Blue</option>
<option>Green</option>
</select>
<br />Do you like italian food?
YES<input type="radio" name="likeItalian" value="1" />
NO<input type="radio" name="likeItalian" value="0" />





<br /><input type="submit" value="SUBMIT" />


</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">

<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>


<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">


<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>


<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>

← Older revision		Revision as of 20:11, 14 October 2009
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 98: / Line 98: @@
 <body>
 	<table>
-	<form helpButtonClass="hbclass" helpMessageClass="hmclass" validateMessageClass="vmclass">
+	<form
 		<tr>
 			<td>First Name</td>
-			<td><input type="text" name="firstName" validate="min:1:You must enter a first name"></td>
+			<td><input type="text" name="firstName"
 		</tr>
 		<tr>
 			<td>Last Name</td>
-			<td><input type="text" name="lastName" validate="min:1:You must enter a last name"></td>
+			<td><input type="text" name="lastName"
 		</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 and also to send correspondence"></td>
+			<td><input type="text" name="email"
 		</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 log into our web site" validateMessageClass="vmclass2" helpMessageClass="hmclass2"></td>
+			<td><input type="password" name="password"
 		</tr>
 		<tr>
 			<td>Confirm Password</td>
-			<td><input type="password" name="confirmPassword" validate="match:password:Your password and confirm password must match"></td>
+			<td><input type="password" name="confirmPassword"
 		</tr>
 	</form>

@@ Line 54: / Line 54: @@
 <script language="javascript" src="/common/fnEtc.js"></script>
 <script language="javascript">
-<!--
+	<!--
-eV.eventAdd(window,'load',eV.inlineFormTools);
+	eV.eventAdd(window,'load',eV.inlineFormTools);
-// -->
+	// -->
 </script>
 <style type="text/css">
@@ Line 97: / Line 97: @@
 </head>
 <body>
-<table>
+	<table>
-<form helpButtonClass="hbclass" helpMessageClass="hmclass" validateMessageClass="vmclass">
+	<form helpButtonClass="hbclass" helpMessageClass="hmclass" validateMessageClass="vmclass">
-<tr>
+		<tr>
-<td>First Name</td>
+			<td>First Name</td>
-<td><input type="text" name="firstName" validate="min:1:You must enter a first name"></td>
+			<td><input type="text" name="firstName" validate="min:1:You must enter a first name"></td>
-</tr>
+		</tr>
-<tr>
+		<tr>
-<td>Last Name</td>
+			<td>Last Name</td>
-<td><input type="text" name="lastName" validate="min:1:You must enter a last name"></td>
+			<td><input type="text" name="lastName" validate="min:1:You must enter a last name"></td>
-</tr>
+		</tr>
-<tr>
+		<tr>
-<td>Email Address</td>
+			<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 and also to send correspondence"></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 and also to send correspondence"></td>
-</tr>
+		</tr>
-<tr>
+		<tr>
-<td>Password</td>
+			<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 log into our web site" validateMessageClass="vmclass2" helpMessageClass="hmclass2"></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 log into our web site" validateMessageClass="vmclass2" helpMessageClass="hmclass2"></td>
-</tr>
+		</tr>
-<tr>
+		<tr>
-<td>Confirm Password</td>
+			<td>Confirm Password</td>
-<td><input type="password" name="confirmPassword" validate="match:password:Your password and confirm password must match"></td>
+			<td><input type="password" name="confirmPassword" validate="match:password:Your password and confirm password must match"></td>
-</tr>
+		</tr>
-</form>
+	</form>
-</table>
+	</table>
 </body>
 </html>
 </source>

@@ Line 33: / Line 33: @@
 ;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
+:* 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;

@@ Line 33: / Line 33: @@
 ;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
+* 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;

@@ Line 32: / Line 32: @@
 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.
+;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:
 ;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.

@@ Line 3: / Line 3: @@
 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:
 <source lang="HTML4strict">
@@ Line 38: / Line 38: @@
-===EXAMPLES===
+==EXAMPLES==
 Generic Example, with detailed explainations:
 <source lang="HTML4strict">