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:

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

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:

<!-- start our form -->
<form action="index.php" method="POST">
 
<!------------------------>
<!--- HIDDEN FIELDS ---->
<!------------------------>
 
<!-- the formType field attached a 'category' to this form when submitted. 
If you have multiple custom forms on your website, this helps to easily search, filter and group form submissions
ideas for this are: newsletter, catalog request, contact us, feedback... -->
<input type="hidden" name="formType" value="this form">
 
<!-- the emailTo field allows you to enter recipients of this forms contents
When the form is submitted, the contents will be sent to the email addresses in this field -->
<input type="hidden" name="emailTo" value="email@website.com,anotheremail@website.com">
 
<!-- the fa field tells the websiteto process this form on submission -->
<input type="hidden" name="fa" value="USER.formSubmit">
 
<!-- 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">
 
<!-- the following otherFields field is REQUIRED if you have ANY custom fields
enter a comman delim list of the field names -->
<input type="hidden" name="otherFields" value="source,color,likeItalian" />
 
<!--------------------->
<!-- CORE FIELDS ------>
<!--------------------->
 
<!-- first name, last name and email fields are CORE form fields
but are optional - you do not have to include these fields, but if you do,
make sure you use the correct names -->
<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>
 
<!-- the subscribe field is another CORE field that is optional.
If it is used and checked, than the newsletter subscription process
will be triggered for the passed emailAddress upon form submission -->
<br>Check here to subscribe to our newsletter: <input type="checkbox" name="subscribe" value="1">
 
<!--------------------->
<!-- CUSTOM FIELDS ------>
<!--------------------->
<!-- any number of custom fields can be created
each can have any name as long is not one of the above hidden or core field names
make sure to populate the otherFields field with the names of your custom fields
or they will not work -->
<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" />
 
<!-- be sure all your custom field names are entered into the "otherFields" field
see above REQUIRED HIDDEN FIELDS for details -->
<!--- 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>

Newsletter Sign Up Form Example:

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

Catalog Request Example:

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