Forms can be used for a number of interactive functions, such as running java scripts, sending information to a CSV (comma-separated value) file, or emailing information to a specified email address.
There are two types of forms which can be created in the Page Editor: A standard “Contact us” form, and custom forms. Details on how to create each type of form are provided below:
To create a standard “Contact Us” form:
Click on the “Insert” menu.
Select “Form” -> “Contact us Form”
A
default set of fields will appear at the location of your insertion point
in the PageEditor.
To create a custom form:
Click on the “Insert” menu.
Select “Form” -> “Blank Form”
A set of <FORM> </FORM> tags will appear at the location of your insertion point in the PageEditor.
Place your insertion point between the <FORM> and </FORM> tags. Press the [Enter] key on your keyboard a couple of times to create some space between these tags.
Place your insertion point directly beneath the <FORM> tag.
Type in the text description you want for the form element you are about to insert (e.g. Full Name, Comments, etc.)
Click on the “Insert” menu.
Select “Form” -> “Component” and select the form element you wish to insert. Hit the [enter] key on your keyboard once if you wish to add another form element.
Repeat steps 6-8 until all of your form elements are in place. Don’t forget to include a submission button if you want data to be posted somewhere (e.g. to an email address.)
Now that you have your form elements set up, you need to customize and input additional data into the form elements, and select a submission target for your form. Details on performing these tasks are provided below:
Form elements
The following custom form elements are available. A brief description of how you might use each form element is also listed:
|
Form Element |
Description |
|
Submit Button |
Used to send information to a defined target, such as an email address or a CSV file. |
|
Reset Button |
Clicking this button clears all user input from all form elements. |
|
Button |
A generic button which can be used to run Java scripts. |
|
Radio Button |
Radio buttons are used to present a short list of options or values. Only one radio button can be selected at a time; a previously selected button will be deselected if the user clicks on another radio button. |
|
Checkbox |
Displays a box which can be toggled on (checked) or off (unchecked). |
|
Text Field (Single-line) |
A text field which can hold one line of text. |
|
Text Area (multi-line) |
A text field which can hold multiple lines of text, e.g. for inputting comments. |
|
Password Field |
A single-line text box which records a user’s keystrokes, but does not display those keystrokes on the screen. |
|
Hidden Field |
A text field which can contain or collect information which is not visible on the web site. |
|
Pull-down menu |
A menu which when clicked on contains a list of options. Only one item in the menu can be selected. This is similar to radio button usage, except the pull-down menu is a more efficient way to create and store longer lists of options. |
Modifying form element properties
To customize and input data into your drop-down menus, change button names, etc., you much right-click on the form element you want to modify and select “Properties.” Below is a list of all fields which can appear inside form elements, and what they are used for. Please note: Not every field listed below is available for each form element type.
|
Form Field |
Purpose |
|
NAME |
The value in this field is the “name” of the form element. This value is not displayed to people viewing your website. |
|
ONCHANGE |
You can enter in a short Java script, or a tag pointing to a .js file, which will be activated when the status of your form element has changed. |
|
SIZE |
Changes the width of your form element |
|
OPTIONS |
Used to create a list of available options in a drop-down menu form element. |
|
VALUE |
Used to define values for selected options in drop-down menus, radio buttons, etc. Changing the VALUE of a button changes the name which is displayed on the button. |
|
ONCLICK |
Similar to ONCHANGE, except scripts defined in this field are triggered when the form element has been clicked on. |
Defining the submission target of a form
When you are done adding and customizing the values of your form elements, you need to define where the form will be submitted to when an end-user submits data through the form. To set this up, follow these steps:
Right-click on the <FORM> tag and select “Properties.”
In the properties window which pops up, underneath “what should happen when this form is submitted” click on the option you wish to use. Below is a list of your choices:
E-mail results to: Enter an email address to send form submissions to.
Save results in a CSV file: Enter in a filename to save form submissions in. The data will be stored in a CSV (comma-separated value) format. The filename has to end with .csv, and will be stored in the main directory of your website.
Run a custom script: You can select a CGI script (if any are present in your /cgi-bin/ directory) which will run when someone submits form data.
Click “Ok”.