Forms in OU

Skip over breadcrumbs and local navigation

Video Tutorials

Basic Video Tutorial

Extended Video Tutorial

Contents of Step by Step Instructions

Inserting the form
Entering general information about the form
Arranging the elements of the form in a table
Placement of labels
Types of form elements and how to insert them

Text Fields
Dropdown Box
Text Area

Defining how the form will function
Making the form work
Save and publish
Test and revise

Forms allow site visitors to enter data using check boxes, dropdown menus, radio buttons, and text fields. UND OU users have the forms module available in the WYSIWYG editor's toolbar .

Do not use OU's "Managed Form" assets documentation to create forms. That feature is not available to UND content developers.

Design Forms

Step by Step

1
2
3
4
5
6
7
8
9
Hidden Fields

Step 1 - Inserting the form

To insert a form, place your cursor on the page where you would like to place the form and click the "Insert/Edit a Form" icon in the toolbar .

Step 2 - Entering general information about the form

Under the "General" tab , name the form using only lowercase letters and limit the name to one word if possible. No other properties need to be defined in the General tab.

Under the "Advanced" tab , it is recommend to include an ID that is the same as the name you gave the form. This will help the form be in compliance with web accessibility standards.

When you are finished naming the form, click

Step 3 - Arranging the elements of the form in a table

You will now see a dotted outline of the form on your page. If it doesn't do so automatically, place the cursor inside the form. You may need to stretch the dotted outline to place the cursor inside. Don't worry about the size of the form at this step.

Click the "Insert/Edit Table" icon on the toolbar to insert a new table.

Choose the number of columns and rows you want your form to have. In this example, we are creating a table with two columns and six rows. You do not need to define any other parameters. Click

If you discover later that you need more or less columns or rows in your table, right click inside the table and make adjustments using the menu that appears.

Notice: The table may be placed outside of the form. If this happens, copy and paste it inside the form using the WYSIWYG editor or in HTML view.

Step 4 - Placement of labels

Place your cursor inside the table where you want the label of the first element (e.g., name, phone, email) and type of the name of the element. Your element will go in an adjacent cell.

Remember to mark your required fields with a asterisk.

Mark Required Field

Type an asterisk (*) after the label of the required element.

Select only the asterisk and make it italic.

Apply the required class to the label by going to the Styles drop down menu in the toolbar and selecting "Marks a required field."

The result should look like this in preview.

The required field is now marked with a red asterisk.

Step 5 - Types of form elements and how to insert them

Now you need to add the entry element for the data you want submitted. There are three types of form element icons in the toolbar to choose from.

"Insert/Edit form input element" is for shorter text responses (e.g. name, address, email, phone), a check box, radio button, file, masked password, submit button, or reset button.
"Insert/Edit form select element" is for adding a dropdown list from which a user can select one or more answers.
"Insert/Edit textarea element" is for longer responses such as comments.

To insert an entry field, place your cursor in the table cell where you want the element to be located. Next, choose one of the Insert/Edit element icons mentioned above that fits the type of data you want your visitor to enter.

Submit Button

Remember to include a submit button in your table. Submit buttons are available in the "Insert/Edit form input element" icon.

Predefined Elements

Predefined elements are available under the "Insert/Edit Asset" icon on the toolbar. For example, a dropdown menu of state names if can be included in the table by typing "states" into the Asset Browser and selecting the asset named "-Global: Forms-State List 1" and clicking "Select Asset." There is no need to pick a table element when including predefined assets.

Text Fields

"Insert/Edit form input element"

Name: The Name field gives the text element a name in the code. The user will not see the name of the element. Under the tab, name the element using only lowercase letters or numbers. If it is more than one word, separate the words with an underscore (example_one).

Remember the name you give this element because you will need to enter it again to send the form to the intended recipient.

It is also recommend, but not required, to enter this same name in the Id field under the "Advanced" tab .

Value: The Value field will populate the element with text that the user sees. It isn't necessary to include a value for shorter text boxes, but it is required for custom buttons. OU provides Submit and Reset buttons and therefore, those buttons do not require a Value. For custom buttons, enter the text you want on the button in the Value field and the button will be sized accordingly.

The Value field can include plain text with spaces and uppercase letters.

Type: Select the type of element you want to insert from the dropdown menu. Be sure to include a submit button for your form.

Size: For Size, a pixel size can be entered. A size of 50 is good starting value of try. Otherwise, you can specify a pixel width and height for the element.

Border Color and Background Color: Please leave these parameters empty.

Class: You may use this parameter.

When finished selecting the element parameters, click . You should see the element in your form. If you don't like how it appears, select it again and click the "Insert/Edit form input element" icon and adjust the parameters.

Note: Remember to include a submit button in your table.

input element

Dropdown List

"Insert/Edit form select element"

Name or ID: This field will populate the selection options in the dropdown list. The user will see the text entered in the Name or Id field but not in the Value field. The Name or Id field can contain spaces and uppercase letters, but the value cannot. Click the green "add" button once you enter the Name or Id. Make sure you enter the selection options in the order you want them to appear in the dropdown list. If you make a mistake in the list, click the red X todelete the option.

Value: The value field gives the dropdown element a name in the code. The user will not see the name of the element. Under the "General" tab, name the element using only lowercase letters or numbers. If it is more than one word, separate the words with an underscore (example_one). Remember the name you give this element because you will need to enter it again to send the form to the intended recipient. It is also recommend, but not required, to enter this same name in the Id field under the "Advanced" tab.

Default selected value: Enter the value for the selection option you want to appear first in the list.

Multiple selections allowed: Check the box if you want the user to be able to select more than one option.

All other criteria are optional. When finished, click "Insert." The dropdown list will automatically size itself to accommodate the amount of text.

Text Area

"Insert/Edit textarea element"

Name: The Name field gives the text area element a name in the code. The user will not see the name of the element. Under the "General" tab, name the element using only lowercase letters or numbers. If it is more than one word, separate the words with an underscore (example_one). Remember the name you give this element because you will need to enter it again to send the form to the intended recipient. It is also recommend, but not required, to enter this same name in the Id field under the "Advanced" tab.

Value: You must enter at least a space in the Value field for the form to work. (If your form breaks contact web support) If you want text to appear in the text area box, enter it in the Value. The Value field can contain standard type using spaces and upper case letters.

Rows/Columns: You need to specify how large you want the text area to be. A good starting point to try is 10 rows by 50 columns. View the form and adjust the element size accordingly.

All other fields are optional. When finished, click

textarea element

Step 6 - Defining how the form will function

Once you have all of the elements inside your form completed, highlight one of the inserted elements and click the "Insert/Edit a Form" icon in the toolbar .

Select the tab. Use the Hidden Fields reference table (last tab) to determine what types of Hidden Fields you need to make your form function. The recipient is the only required field. All other fields are optional.

For example, if you want the form to be sent to webadmin@und.edu, enter "recipient" in the "Name or Id" text box and "webadmin@und.edu" in the "Value" field. Click the green button to add this setting to the form. Click when finished adding Hidden Fields.

Step 7 - Making the form work

Note: This will only work on .cfm pages. If you need a form on a different type of page (.php or .html) please contact web-support.

In order to make the form send and receive data, you need to include the "Global: Send Mail" asset on the page. To do this, place your cursor directly above the form (outside the dotted line area).

Choose the "Insert/Edit Asset" icon from the toolbar .

In the Asset Browser, type "form" and press your "enter" key. Select the "Global: Send Mail" asset and click " Select Asset ".

You will see the asset label in the form.

Step 8 - Save and publish

Save and publish your page.

Step 9 - Test and revise

Test your make to make sure it works. If an element isn't working or appearing properly, highlight it in the form and go back into the forms toolbar to correct the mistake.

Hidden Fields

Use this table to determine what types of Hidden Fields you need to make your form function.

Examples of the Hidden Fields tab:

Name or ID	Value
recipient	This is the only required* Hidden Field.* It designates the email address(s) you want the form sent to. If multiple recipients are desired, enter the emails with a comma between them and no spaces. See example
subject	The subject that will appear in the sent email subject field. Default: “Online form submission” See example
from	The address that will be seen as the sender of the email. Default: UndWeb@und.edu See example
redirect	Redirect to a new page after the form is successfully submitted. This function is often used forms with multiple steps. If no redirect is given, a data summary and success message will be displayed. See example
successMessage	The message that will be displayed if there were no errors, and redirect is unspecified Default: “Submission was successful” See example
failureMessage	The message that will be displayed if there was an error in submitting the form. Default: “There was an error submitting your request.” See example
required	This will designate required fields. This only checks to see if the field is not empty. This field will not validate information. For example, if an email address is required, it will not validate the address. Enter the name you gave the field when you created it. The name should be a comma delimited list with no spaces. Example: “name,address,email_address” See example Remember to mark the corresponding label for each required element with a star.
sendCopy	A summary of the form submission can be sent to email addresses provided by the form submitter. The value of this option should be the name (or names, comma delimited) of a text box element designated as an email field. If a field specified by this option contains a value, the value will be checked for validity. An invalid email address will prevent a successful form submission. If you want these fields to be required, you will still have to utilize the "required" option for these fields. See example

Predefined Elements (Assets)

The current predefined elements available are:

Country List - Full Name 1: List of countries
Country List - Short Code 1: List of abbreviated countries (Two letter short codes)

There is also a Country List - Full Name 2 and Country List - Short Code 2. These can be used if you need more than one country list on the same page.

Global Navigation