Form Tutorial

Overview

Note: This feature is available in the Classic Editor only. If you are looking for LDP forms, click here.

Building a form in OmniUpdate is a simple process using the WYSIWYG editor. Follow the Form Tutorial outlined below to get started on building form elements. Form elements are elements that allow the user to enter information into a form (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.).  

Creating a Form

The functionality for creating WYSIWYG forms can be enabled by a Level 10 administrator. A set of toolbar icons similar to the ones below will show up in the Classic Editor's toolbar:

Forms Icons

These toolbar buttons allow for the creation of an HTML form and the ability to add elements to it. A few of the most common elements are text input boxes, radio buttons, check boxes, and submit buttons.

To edit a currently existing form field, first click anywhere inside the form to allow the cursor to recognize the form itself, then double-click the form field to which to make changes. Then there is the ability to click the form editor buttons in the toolbar above.

Just remember, the forms toolbar does not create the backend functionality that processes the information once the form is submitted. Some sort of script or program must be installed on the server for the form to process and interpret the information.

This tutorial shows you how to build a simple survey form that contains text fields, a drop-down list, radio button, checkboxes and a button.

Insert a Form

To insert a form into a page:

  1. Click on the Insert/Edit Form button in the WYSIWYG toolbar.Insert/Edit Form Button
  2. This will bring up the Insert/Edit Form modal box. Name the form and set up other properties. For the purposes of this tutorial, the focus is on the General Tab for this form initially. Properties include: 
    • Name: A name for the form (example: testform1)
    • Action: The form′s action attribute defines the name of the file to send the content to the server (example: html_form_submit.asp)
    • Method: Select the method for the action (example: POST)
    • Target: The Target field indicates which frame in a set of frames to send the results to. This attribute can be used so that the form is always visible even as the form results are displayed and redisplayed (example: TargetFrame)
    • Encryption Type: Type of encryption for the target (example: None)General Tab with Data
  3. Once the form is named and parameters added, click Insert. Note that there is now a dotted outline of the form on the page.Forms Outline
  4. Click inside the form and notice the form action buttons in the WYSIWYG toolbar are now active.
  5. Insert form elements such as:
    • Text fields
    • Drop-Down lists
    • Radio buttons
    • Checkboxes
    • Buttons

For more information and tutorials about forms, see Forms Tutorial and W3Schools Forms.

Add Text Fields

Once a form has been inserted onto the page, a variety of form elements can be added. To add a text field:

  1. Click the  Insert/ Edit Form Input Element icon to add text fields.Insert Input Element
  2. This will open the Insert/Edit Form Input Element modal. From the Type drop-down, select the Text element. Insert Text Field
  3. Give it a descriptive name such as firstName.
  4. Set up the first text field with the desired parameters, such as:
    • Name: firstName
    • Value: firstName 
    • Size: 200
    • Width: 200
    • Height: 20
    • Border: #de2051
      Note: All Values must be one word only with no spaces.Insert text parameters
  5. To select colors for border or background color, click inside the color box to see a hex color picker tool.
  6. Click Insert and notice that a new text field has been inserted into the new form on the page.Forms
  7. To create a simple survey form, use the directions above to create three text fields:
  • First name
  • Last Name
  • Email Address.

Form Fields

Add a Drop-Down List

To create a drop-down list:

  1. Click the Insert/Edit Select Element icon. The following modal is displayed. Add option for a drop down list
  2. Click the green add button to enter selection options.  As an example, use the following data for list: pizza, ice cream, hamburgers, and twinkies.
  3. nclude the additional parameters, for example:
    • Number of option rows: 1
    • Width: 200
    • Height: 20
    • Border color: #1759e8
  4. After filling out the dialog box with data, click Insert to place the new drop down list into the form.
  5. Click Save. Notice the drop down list for favorite foods. It should look similar to the image below.

Drop Down List Complete

Add Radio Buttons

To create a radio button:

  1. Click the  Insert/Edit Form Input Element icon
  2. This will open the Insert/Edit Form Input Element modal. From the Type drop-down, select radio button.
  3. As an example, set it up with the following parameters:
    • Name: Yes
    • Value: Yes
    • Type: radio
    • Size: 20
    • Width: 20 Radio Yes
  4. Click Insert and then add a sentence next to the radio button. For example:
  • Yes - Please send more information regarding desserts. 

Note: Multiple radio buttons only work if they all have the same name attribute. If creating more than one radio button, please use the same name attribute for each button.

Add a Checkbox

The next form element that can be created is a checkbox. To create a checkbox:

  1. Click the Insert/Edit Form Input Element icon.
  2. This will open the Insert/Edit Form Input Element modal. From the Type drop-down, select checkbox
  3. As an example, set it up with the following parameters:
    • Name: bbq
    • Value: bbq
    • Type: checkbox
    • Size: 20
    • Width: 20
      Note: Always remember to keep names and values lowercase and all one word. Below is an example of what the modal will look like with the data filled out for a checkbox.checkbox
  4. Click Insert to preview how the checkbox will look in the form.
  5. Repeat the above steps to create more checkboxes until the form looks similar to the screenshot below.

a set of check boxes

Note: It is very important to keep in mind that when using checkboxes, the user may select more than one checkbox, but when using radio buttons the user may only select one. Additionally radio buttons only work if they all have the same name attribute. 

Create a Submit Button

To create a submit button:

  1. Click the Insert/Edit Form Input Element icon.
  2. This will open the Insert/Edit Form Input Element modal. From the Type drop-down, select submit button.submit button from drop down
  3. As an example, set it up with the following parameters:
    • Name: submit
    • Value: submit
    • Type: submit button
    • Size: 40
    • Width: 100
    • Height: 25 
  4. Click Insert.   

Process Form Data

Now that the basic form is completed, the next step is to process the form data. For some external site pages discussing form processing, visit Net Mechanic and Web Cheat Sheet. For more information and tutorials on forms, visit HTML Code Tutorial: Forms.