BASICS

ADMINISTRATION

DEVELOPMENT

SUPER ADMIN

  LAST UPDATED
4/8/2014

Building Forms in the WYSIWYG Editor

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.).  For a more in-depth view of forms, see the WebEx event:

Creating Tables and Forms in the WYSIWYG Editor

Creating Forms

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 WYSIWYG editor's toolbar:

Form Actions Activated

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 on the form field to which to make changes. Then there is the ability to click on the form editor buttons in the toolbar above.

Just remember, the forms toolbar does not create the backend functionality that to process 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.

 

Next Page

 

Insert a Form

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

Insert/Edit a form

Clicking the Insert/Edit forms button will bring up the Insert/Modify form dialog 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.

General Tab with Data

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 the form is named and some parameters added, click Insert.

Note that there is now a dotted outline of the form on the page.

Form on Page

 

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

Form Actions Activated

Insert form elements such as: Text fields, Drop-Down Lists, Radio buttons, Checkboxes, and Buttons. This tutorial exemplifies building a simple survey form that contains text fields, a drop-down list, radio button, checkboxes and a button.

 

Previous PageNext Page

 

Text Fields

Click the Insert/Edit form input element button which displays the Insert/Modify form dialog box. The next step is to insert some text fields.

Insert Form Element

 

Within this dialog box select the Text element from the drop down list. Next give it a descriptive name such as firstName. Set the other parameters as well.

 

Insert Text Field

 

Set up the first text field 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: All Values must be one word only with no spaces.

Insert text parameters

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

 

Form with Text Field

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

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

Text Fields Complete

 

Previous PageNext Page

 

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

Radio Yes

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.

 

Previous PageNext Page

 

Checkboxes

The next form element 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 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.

checkbox

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

a set of check boxes

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.

 

Previous PageNext Page

 

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

submit button from drop down

Set it up with the following parameters then click Insert.

Name: submit

Value: submit

Type: submit button

Size: 40

Width: 100

Height: 25 

submit button with circle  

Now that the basic form is completed, the next step is 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:

HTML Code Tutorial: Forms

 

Previous Page

 


Was this page helpful?

Additional Comments:


(Include your email address if you would like a reply)