Forms Tutorial

 

Building forms in Omniupdate is a simple process using the WYSIWYG editor. Follow the Forms 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 Forms

If you have the forms module installed, a set of toolbar icons similar to the ones below will show up in the WYSIWYG editor's toolbar:

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

If you wish to edit a currently existing form field, first click anywhere inside the form to allow your cursor to recognize the form itself, then double-click on the form field to which you wish to make changes. You can then click on the form editor buttons in the toolbar above.

Just remember, the forms toolbar does not create the backend functionality that you will need to process the information once the form is submitted. You will need to have some sort of script or program installed on your web server for the form to process and interpret the information.

 

Insert a Form

To insert a form into your page click on the Insert/Edit forms button in the WYSIWYG.

Clicking the Insert/Edit forms button will bring up the Insert/Modify form dialog box.  This is where you will name your form and set up other properties.  For the purposes of this tutorial we will only focus on the General Tab for this form initially.

 

Examples:

Name your form: testForm1

Name the Action:html_form_submit.asp

The form's action attribute defines the name of the file to send the content to the server.

Choose the method:POST

Target:TargetFrame

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

Encryption type: Choose None or mutipart/form data

 

For more information and tutorials on Forms click the following links:

Forms Tutorial

W3Schools Forms

 

 

Once you have named your form and added some parameters click Insert.

Note that you will now see a dotted outline of the form on your page.

 

Click inside the form and you will notice the form action buttons are now active.

Now you can insert form elements such as:  Text fields, Drop-Down Lists, Radio buttons, Checkboxes, and Buttons. For the purposes of this discussion we will be building a simple survey form that contains text fields, a drop-down list, radio button, checkboxes and a button.

 

 

Text Fields

Click the Insert/Edit form input element button which will bring up the Insert/Modify form dialog box. We will be inserting some text fields.

 

Within this dialog box you can select the Text element from the drop down list.  Next give it a descriptive name such as firstName.  Set the other parameters as well. Keep in mind we are only discussing the General Tab initially.

 

 

For your first text field set it up with these parameters

Name: firstName

Value: firstName

Size: 200

Width: 200

Height: 20

Border: #de2051

To select colors click inside the color box to see a color picker dialog.

Leave the other options blank for now.

 

The following is an example of what the dialog box might look like with some sample data inserted to create a text field named firstName.

Very Important: Keep in mind all of your Values must be one word only with no spaces.

Click Insert and you will notice that a new text field has been inserted into your new form on your page.

 

For our simply survey form we will insert 3 text fields. First name, Last Name, and Email Address.

Repeat the steps outlined above until your form looks like the following screen shot.

 

 

Drop Down List

Next we will create a Drop Down List using the Insert/Edit form select element button.

 

Click the Insert Element button and the dialog box will pop up.

 

Click the green add button to enter selection options.  Use the following data for your Drop Down List. pizza, icecream, hamburgers, and twinkies.

 

 

Fill out these additional parameters:

Number of option rows: 1

Width: 200

Height: 20

Border color: #1759e8

 

Once you have filled out the dialog box with data click Insert to place your new drop down list into the form.  Then click Save and you will see your drop down list for favorite foods. It should look similar to the image below.

 

Radio Buttons

 

To create a radio button simply click the Insert/ Modify Form button and select radio button from the drop down list.  Set it up with the following parameters.

Name: Yes

Value: Yes

Type: radio

Size: 20

Width: 20

 

Click Insert and then add a sentence next to the radio button similar to the example below.

Example:                             yes - Please send more information regarding desserts.

 

 

Checkboxes

The next form element we will insert is a checkbox. To create a checkbox simply click the Insert/ Modify Form button and select checkbox from the drop down list.  Set it up with the following parameters.

Name: bbq

Value: bbq

Type: checkbox

Size: 20

Width: 20

 

Very Important: Always remember to keep you names and values lowercase and all one word. Below is an example of what the dialog box will look like with the data filled out for a checkbox.

 

Click insert to preview how it looks in the form. Now insert 2 more checkboxes until you form looks similar to the screenshot below.

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.

 

Submit Button

To create a submit button simply click the Insert/ Modify Form button and select submit button from the drop down list as seen bellow.

 

Set it up with the following parameters then click Insert.

Name:                  submit

Value:                   submit

Type:                     submit button

Size:                       40

Width:                  100

Height:                 25

 

 

 

Now that we have the basic form completed you will want to process the form data.

Below are some links that discuss form processing.

Net Mechanic

Web Cheat Sheet

 

For more information and tutorials on Forms click the following links:

HTML Code Tutorial - Forms

W3Schools - Forms