Search the Manual:

Manual Contents

3.9.2.11 Working with Forms

Forms on a website are usually created by a web developer or someone who is familiar with HTML, so some of the terms associated with this feature may seem confusing - in some cases, they will be outside the scope of this manual and the capabilities of the general user. In those instances where programming knowledge is required, this manual will describe what a feature does without going into a lot of background detail.

When you begin to create your form, first you have to define the general parameters of the form, and then you will add the individual input elements using the instructions which follow.

You may wish to create a table to provide structure and format for your form first, and then build your form within the borders provided by your table.

Alternatively, you can build your form directly on your website page without a pre-set structure since the various tools are quite flexible in this regard.

As you create your forms, keep in mind the following key points:

All form elements must be in a form. A button or input element added to your page does not have any function.
Every form must have a "submit" button or it will not work.
You can have multiple forms on a page, as long as each form has a submit button associated with it.

3.9.2.11.1 Inserting and Editing a Form

This button allows you to insert and edit a form on your page. When you click it, the Insert/Edit Form dialogue box will open on the General tab.

GENERAL TAB

In this area you can set and edit a variety of attributes for your overall form.

Auto-validate: If you check this check box, your form will use JavaScript based form validation to check for required fields (this is a built in feature of your web CMS). If this option is not selected, and you have specified required fields in your form, you must write your own JavaScript validation file. Typically, you will select this option if you have any required fields in your form, or leave it blank of you have no fields that are designated "required".
Name: Simply type the name of your form into this text field. It is important to give your form (and any fields in it) a name because this will identify the information submitted with the form so that it can be correctly interpreted when the form is received.
Action: When web developers create a custom script (an action that executes when the form is submitted), they enter the name of the script file here. Normally if you leave an action associated with a form blank, the form will do nothing because it doesn't know what to do or where to submit the form. To avoid this, your web content management system has been programmed to look for empty form actions and to process them and email them to the registered user. So, unless you are a developer creating a customized action for your form, you should leave Action: blank and let the content management system catch it.
Method: This is the way in which form information is submitted. Because the "GET" method is much less secure, your web CMS only accepts "POST" submissions. Make sure you have selected "Post" from the drop down list.
Target: If your website uses frames (no longer common), you can specify the frame you would like your form to open in by entering the name of the frame in the text field provided.
Encryption Type: the forms editor does not currently support multipart/form data, so leave this setting at "none"
Class: If there are pre-defined CSS classes associated with your website (these would have been created by your web designer), they will appear in this drop down menu and you may select them here. Otherwise, leave this setting at "not set".

Once you have finished setting the general properties for your form, you may want to define some advanced properties.

Switch to the Advanced tab by clicking on it at the top of the Insert/Modify Form dialogue box.

ADVANCED TAB

This area of the Insert/Modify Form dialogue box allows you to make your form behave in various ways based on certain events by using JavaScript event handlers.

To use these functions, you must have knowledge of JavaScript and understand how to program JavaScript interactions with your form; otherwise leave all options in this area blank.

You may also wish to add hidden fields to your overall form definition. To do this, switch to the Hidden Fields tab by clicking on it at the top of the Insert/Modify Form dialogue box.

HIDDEN FIELDS TAB

A hidden field is a field that is not visible to site visitors, but still passes on its name and value when the form is submitted.

These fields are used when the person creating the form wants certain information submitted with the form, but does not want the visitor to have to enter that information.

For example; let's say I have created an "ask about this product" form on every page that describes a product on my site. I don't want the user to have to type in what page they are looking at as part of the form, but I do want that information so I can respond more accurately to the question(s) they submit with the form.

So, I create a hidden field on the form. I name it "page_viewed", and since this form is on my "Corvettes" page, I put in the value field "corvettes".

Now, when the form is submitted, along with the information entered directly into the form, I will also get the information "page_viewed = corvettes".

Add Name or ID: type in the name or ID you would like to use to identify the information you receive when this form is submitted (for example, "page_viewed as described above)
Add Value: type in additional information associated with this form that you wish to receive when this form is submitted (eg. "Corvettes" as described above)

Once you have finished defining the general and advanced properties of your form, and added any desired hidden fields, click [Insert] at the bottom left of any of the three tabs on the Insert/Modify From dialogue box and your form area will be added to your page and you can begin to add the individual input elements or data entry fields to it.

3.9.2.11.2 Inserting and Editing Input Elements

This button allows you to add and edit the various input elements (fields) that will be used in your form.

When you click on the button, the Insert/Edit Form Input Element dialogue box will open on the General tab.

GENERAL TAB

Name: for each input element or field you add to your form you will enter a name. It is important to name each field because this will properly identify the information submitted with your form.
Value: for each input element or field you add to your form, you can enter a value which further identifies the information submitted with the form. In some cases, the value you enter is critical information. For example, if no value is provided for a check box input element, only the name of the field is submitted with no indication of whether the checkbox was checked or unchecked. In other words, with a checkbox field, the value (whatever you choose it to be) indicates that the box was checked.
Type: indicate which type of input element or field you want to add to your form by selecting it from the drop down list provided. Remember, each form requires a submit button, so make sure you add one to your form.
Size: the "size" attribute shown here is old HTML and generally no longer used. Because it is interpreted differently by various internet browsers (such as FireFox, Internet Explorer and Netscape) when used, it may cause your form to appear incorrectly in certain browsers. It is best to leave this one blank and define the size of your input element by entering the desired width and height directly.
Width: (in pixels) enter the desired width of the input element you are adding by typing it into the text field to the right.
Height: (in pixels) enter the height of the input element you are adding by typing it into the text field to the right.
Background Image: you may choose to add an image as a background for your input element. To add a background image...
- Type the name of your image file into the Background image: text field.
- For external links, include the correct prefix (eg. http://).
- To link to a file previously uploaded to your site (or to upload one), click on the file browse icon to open the image manager.
- Follow the same process for uploading image files as you did when using the Insert/Edit Image button.
Border colour: you can select a border colour for your input element in this area as well. To do so,
- Click on the small browse icon to the right of the Border colour text field and a colour palette will open.
- Click on the colour you wish to use for your border. Pick from any of the three available tabs, which each display the colours in a different type of palette and click [Apply]. (See instructions for selecting a background colour when Inserting Media Files).
Background Colour: you can also select a background colour for each input element in your form. This will appear as the background for your input element (unless you also select a background image for the element). To select a background colour,
- Click on the small browse icon to the right of the Background colour: text field - a colour palette will open.
- Click on the colour you wish to use for your background. Pick from any of the three available tabs, which each display the colours in a different type of palette and click [Apply] (See instructions for selecting a background colour when Inserting Media Files).
Class: If there are pre-defined CSS classes associated with your website (these would have been created by your web designer), they will appear in this drop down menu and you may select them here. Otherwise, leave this setting at "not set".

Once you have finished setting the general properties for your input elements, you may want to define some advanced properties.

Switch to the Advanced tab by clicking on it at the top of the Insert/Edit Form Input Element dialogue box.

ADVANCED TAB

In this area you can define some advanced properties for your input elements. If you are familiar with JavaScript, you can also use this area to enter certain JavaScript event handlers.

To use the first eight functions (ID to onkeydown) on this tab, you must have knowledge of JavaScript and understand how to program JavaScript interactions with your form; otherwise leave these eight options blank. In addition, the Summary and Style at the end of the list of properties require knowledge of CSS styles and HTML programming and should otherwise be left blank.

Instructions for using the rest of the advanced properties on this tab are provided below.

Maxlength: if you wish to limit the maximum number of characters which can be entered into an input element (for example a text field), enter that maximum limit in the text field to the right.
Required: if you want the input element you are defining to be a required field (must be completed before the form can be successfully submitted), select this option. Note: form validation must be selected for this to work.
Checked: if the field you are defining is a check box, selecting this option will cause the check box to default as "checked".
Disabled: if you select this option, the field you are defining will appear in your form, but it will be disabled (people completing the form will not be able to type in, check or select it.)
Source (src): this option is only used if the input element type is "image". Typically you will leave this property blank.

Once you have finished defining both your general and advanced input element properties, click [Insert] to update your form and return to the page editing screen.

3.9.2.11.3 Inserting and Editing Select Elements

This button allows you to add and edit select elements (form elements that allow the user to select one or more options from a list) that will be used in your form. When you click it, the Insert/Edit Form Select Element dialogue box will open on the General tab.

GENERAL TAB

In this area you will define the general properties of any select elements that you add to your form.

Name: enter a name for each select element you add to your form so that you can properly identify the information submitted with your form.
Name or ID: in the case of select elements, the Name you enter above is the name of the field (eg. seminar registration), while the Name or ID you enter here would identify the specific select option (eg. seminar #1)
Value: in this area, enter additional information you would like to receive when your form is submitted. For example, the value might identify the date of seminar #1 identified above, in which case the information received when the form was submitted would be...seminar registration: seminar #1=Jan 1/08.
Default Selected Value: if you would like a particular option in your list to be selected by default, enter it here. Otherwise, leave this field blank and the top item in your list will be the automatic default selected value.
Multiple Selections Allowed: if you check this box then people completing the form will be able to select more than one option from your list. To select multiple options, users can hold Shift or Ctrl while choosing from the list.
- If a user holds the Shift key while selecting from the list, they will select multiple options in a continuous block (this is good for selecting a long list of options)
- If a user holds the Ctrl key while making selections, they can select multiple individual items from the list (good for selecting just a few options, especially when they are not listed one after another in the order of choice).
Number of Option Rows: leave this property blank
Width: (in pixels) enter the desired width of the select element you are adding by typing it into the text field to the right.
Height: (in pixels) enter the height of the select element you are adding by typing it into the text field to the right.
Background Image: you may choose to add an image as a background for your select element. To add a background image...
- Type the name of your image file into the Background image: text field.
- For external links, include the correct prefix (eg. http://).
- To link to a file previously uploaded to your site (or to upload one), click on the file browse icon to open the image manager.
- Follow the same process for uploading image files as you did when using the Insert/Edit Image button.
Border colour: you can select a border colour for your select element in this area as well. To do so,
- Click on the small browse icon to the right of the Border colour text field and a colour palette will open.
- Click on the colour you wish to use for your border. Pick from any of the three available tabs, which each display the colours in a different type of palette and click [Apply] (See instructions for selecting a background colour when Inserting Media Files).
Background Colour: you can also select a background colour which will appear as the background for your select element (unless you also select a background image for the element). To choose a background colour,
- Click on the small browse icon to the right of the Background colour: text field - a colour palette will open.
- b. Click on the colour you wish to use for your background. Pick from any of the three available tabs, which each display the colours in a different type of palette and click [Apply] (See instructions for selecting a background colour when Inserting Media Files).
Class: If there are pre-defined CSS classes associated with your website (these would have been created by your web designer), they will appear in this drop down menu and you may select them here. Otherwise, leave this setting at "not set".

Once you have finished setting the general properties for your select elements, you may want to define some advanced properties.

Switch to the Advanced tab by clicking on it at the top of the Insert/Edit Form Select Element dialogue box.

ADVANCED TAB

In this area you can define some advanced properties for your select elements. If you are familiar with JavaScript, you can also use this area to enter certain JavaScript event handlers.

To use the first six functions (ID to onclick) on this tab, you must have knowledge of JavaScript and understand how to program JavaScript interactions with your form; otherwise leave these six options blank.

In addition, the Summary and Style properties at the end of the list of properties require knowledge of CSS styles and HTML programming and should otherwise be left blank.

Instructions for using the other advanced properties on this tab are provided below.

Required: if you want the select element you are defining to be a required field (must be completed before the form can be successfully submitted), select this option. Note: auto-validate must be selected for this to work.
Disabled: if you select this option, the select element you are defining will appear in your form, but it will be disabled (people completing the form will not be able to use it)

3.9.2.11.4 Inserting and Editing Text Area Elements

This button allows you to add and edit text entry fields in your form.

Note:you can also add and edit text area elements using the Inserting and Editing Input Elements button on your toolbar ; however the Text Area button includes some additional properties

When you click on the button, the Insert/Edit Form Text Area Element dialogue box will open on the General tab.

GENERAL TAB

In this tab you will define the general properties of any text areas that you add to your form.

Name: for each text area element, enter a name by typing it into the text field to the right. It is important to name your elements because this will properly identify the information submitted with your form.
Value: for each text area element you add to your form, you can enter a value which further identifies the information submitted with the form. In the case of text input elements, the value you enter will appear in the text area of the form and will be replaced by the text entered when the form is completed. For this reason, it can be used to provide brief instructions for the user.
Rows: each row represents a line of text and the number you enter for this property will determine how many rows long your text area will be.
Columns: each column represents one character of text. The number you enter for this property will determine how many characters wide your text area will be.
Background Image: you may choose to add an image as a background for your text area. To add a background image...
- Type the name of your image file into the Background image: text field.
- For external links, include the correct prefix (eg. http://).
- To link to a file previously uploaded to your site (or to upload one), click on the file browse icon to open the image manager.
- Follow the same process for uploading image files as you did when using the Insert/Edit Image button.
Border colour: you can select a border colour for your text area from this tab as well. To do so,
- Click on the small browse icon to the right of the Border colour text field and a colour palette will open.
- Click on the colour you wish to use for your border. Pick from any of the three available tabs, which each display the colours in a different type of palette and click [Apply] (See instructions for selecting a background colour when Inserting Media Files).
Background Colour: you can also select a background colour that will appear as the background for your text area (unless you also select a background image for the element). To select a background colour,
- Click on the small browse icon to the right of the Background colour: text field - a colour palette will open.
- Click on the colour you wish to use for your background. Pick from any of the three available tabs, which each display the colours in a different type of palette and click [Apply] (See instructions for selecting a background colour when Inserting Media Files).
Class: If there are pre-defined CSS classes associated with your website (these would have been created by your web designer), they will appear in this drop down menu and you may select them here. Otherwise, leave this setting at "not set".

Once you have finished setting the general properties for your text area elements, you may want to define some advanced properties.

Switch to the Advanced tab by clicking on it at the top of the Insert/Edit Form Text Area Element dialogue box.

ADVANCED TAB

In this area you can define some advanced properties for your input elements.

If you are familiar with JavaScript, you can also use this area to enter certain JavaScript event handlers. To use the first eight functions (ID to onkeydown) on this tab, you must have knowledge of JavaScript and understand how to program JavaScript interactions with your form; otherwise leave these eight options blank. In addition, the Summary and Style properties at the end of the list of properties require knowledge of CSS styles and HTML programming and should otherwise be left blank.

Instructions for using the rest of the advanced properties on this tab are provided below.

Maxlength: if you wish to limit the maximum number of characters which can be entered into your text area, enter that maximum limit in the text field to the right.
Required: if you want the text area you are defining to be a required field (must be completed before the form can be successfully submitted), select this option. Note: form validation must be selected for this to work.
Disabled: if you select this option, the text area you are defining will appear in your form, but it will be disabled (people completing the form will not be able to type in it).

Once you have finished defining both the general and advanced properties for your text area element, click [Insert] at the bottom left of either tab to update your form and return to the page editing screen.