5/15/2013
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 associated Training Tuesday webex.
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:
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.
Insert a Form
To insert a form into a 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. 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.
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:
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.
Click inside the form and notice the form action buttons are now active.
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.
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.
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.
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.
Click Insert and notice that a new text field has been inserted into the new form on the page.
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.
Drop Down List
Next create a Drop Down List using the Insert/Edit form select element button.
Click the Insert Element button to display the dialog box.
Click the green add button to enter selection options. Use the following data for list: pizza, icecream, hamburgers, and twinkies.
Fill out these additional parameters:
Number of option rows: 1
Width: 200
Height: 20
Border color: #1759e8
After filling out the dialog box with data, click Insert to place the new drop down list into the form. Then click Save. Notice the 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 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.
Click insert to preview how it looks in the form. Now insert 2 more checkboxes until the 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 below.
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 the basic form is completed, the next step is to process the form data.
Below are some links that discuss form processing:
For more information and tutorials on Forms: