Data Form is a simple data entry mechanism that allows you to enter, edit, and export data. It can be used for something simple like an address book, query form, or Contact Us mail form. While a bit time consuming to set up, this is a great way to gain valuable information from your users.

1. Select Data Form from the New Content menu of the Admin Bar.

2. The “Add Data Form” screen will open.
   
   

3. Enter a title for your form in the “Title” field.

4. The “Menu Title” is the title as it appears in the site navigation. You can leave this blank and WebGUI will insert a menu title for you (by default, WebGUI will use the “Title”).

5. The URL can also be left blank and WebGUI will generate a URL for you.

6. In the “Description” field enter a short description of the data form. Here is where you could provide instructions for the user. This text will appear between the data form title and the actual form.

7. At the bottom of the screen, there is an option to select a “Default view” for the data form. If the “Default View” is set to “Data List,” users will view a list of data already collected from users via this form. From this view a link will be made available to direct users to the data form itself. If set to “Data Form,” users fill out the form and only view their own answers along with the message you entered in the “Acknowledgment” field.

8. In the “Acknowledgment” field, enter a message that will be displayed to the user once the data form has been submitted (this appears if you do not set the default view to Data List ).The “Mail attachments” option must be used in conjunction with “Mail data” in the display tab. Use this if you intend to allow users to submit this data form via email. If this is done, the data form will be submitted as an attachment to that email. If the “Mail data?” field in the Display tab is set to Yes, then the form will contain typical email fields for this purpose.

9. Choose your display settings from the “Display” tab.

1. If the “Hide from navigation?” field is set to “Yes,” your data form “menu title” will not appear in your navigation.

2. If “Open in new window?” is set to “Yes,” the data form will open in a new browser window when clicked on from the navigation (this happens only when the data form is accessed directly through the navigation).

3. If “Display the title?” is set to “Yes,” the title of your data form entered in the “Properties” tab will be displayed to users at the top of your data form.

4. You can choose a “Style Template” in which to view this data form, and a template used to make the page printable.

5. Under “Data Form Template,” you can choose the layout used to display your form on the page. This includes a template for an Email form and Mail form. The Default Data Form looks like a normal form, and the Tab Form allows you to add separate tabs to the form for the purpose of categorization.

6. Next, you can choose the “Email Template.” The “Default Email” template is the main template. This is the template used to display the form to submit data via email.

7. The “Acknowledgment Template” is what users see after they have completed the form.

8. The “List Template” is the template used to display data submitted by users in a list form. If the default view for the data form is set to List View in the properties tab, this is the template used to display that.

9. If the “Mail data?” field is toggled to “Yes”, the form will begin with typical email fields, such as “To,” “From,” and “Subject.” The form will then be emailed to a designated user when it is submitted by a user. (Save the form, then edit each of the From, To, CC, BCC, and Subject fields setting the Default Value for each field to your requirements.)

10. If the “Store data” field is left at “Yes,” the submitted data forms will be stored in WebGUI's database.
    
    

10. Choose your security settings from the “Security” tab.
    
    

1. The owner has full editing and viewing rights for this asset. Usually, the owner is the person who created the asset.

2. The “Who can view?” field allows you to limit who can view this asset. Select a group of users allowed to view this asset from the dropdown menu. If there are no viewing restrictions, leave the menu at Everyone. The Owner can always view the asset.

3. Select who has editing rights for this asset from the “Who can edit?” dropdown menu. The Owner can always edit.

4. The “Group to View DataForm Entries” is the group of users allowed to access data submitted by users through the use of this form.

11. If you wish, enter metadata in the “Metadata” tab. The metadata tab is the standard tab seen amongst all assets.

12. When all your settings are complete, click save.

13. After saving, you will be taken back to your page.

Adding Fields

1. Turn admin on.

2. At the top of the data form asset is a gray bar containing a number of links. Click the “Add a field” link to open the Edit Field screen.
   
   

2. In the “Label” field of the Edit Field screen, enter the question you want users to answer, or enter a field label that indicates to users what data should be placed in this field. This is what users will see on the form.

3. In the “Field Name” field, enter a field name which must be unique among all fields on your form.

4. The “Tab” field defines which tab the field appears in if you have multiple tabs. If you're not using the “Tab Form” template, then just leave all your fields in the “No Tab” tab.

5. In order for users to give an answer to the question, the “Status” field must be set to “Modifiable” or “Required.”

6. The “Type” field allows you to limit the type of information submitted to you. For example, if you ask for a telephone number, you wouldn't expect a text response, so you would select Telephone Number from this field. Likewise, for an email address you would select Email Address from this menu.

7. Set the width, height, and vertical alignment fields if applicable to the “Type” you chose. The “Align vertical” field simply determines if values in this field will be aligned vertically or horizontally.

8. In the “Extras” field you can enter optional tag properties to give this field a different look using stylesheets (ex: “'class=myClass'”). Just ignore this field if you don't know what that means.

9. The “Possible Values” field applies if you are using a “Type” such as checkbox list or select list where you would want to give predefined answers for your users. This is where you enter the values, using a carriage return between each value.

You can fill in the “Possible Values” field in a normal manner, such as:

Nothing

50 Percent

Full Amount

Or, you can do key/value pairs:

0|Nothing

50|50 Percent

100|Full Amount

An example of this using hex color codes would look like:

#ff0000|Red

#00ff00|Green

#0000ff|Blue

When using key/value pairs, the first value (before the pipe) is what gets stored in the database, but the second value (after the pipe) is what gets displayed to the user.

10. At the bottom of the page is the “What next?” field. You can choose to “Add a field,” or “Go back to the page.”

1. If you choose to add another field, you will be taken to a fresh “Edit Field” screen. Repeat the same process to add information for this new field in your data form.

2. If you do not wish to add any more fields to your data form, choose “Go back to the page.”

11. When you have completed the information for all your fields, click “save” at the bottom of the “Edit Field” screen.

12. Your data form will appear on your web page for users to fill out.
    
    

Users fill out the form, click “save,” and view the acknowledgment.

The example above is the Tell a Friend mail form from a WebGUI demo site. This Data Form asset is set up as a mail form, so you an see the standard email forms are present. Upon clicking the Send button, this form will be emailed to the email address entered in the Your Friend's Email Address field.

Using Tabs

Configure your Data Form as instructed in the previous section; however, this time the “Data Form Template” in the Display tab must be set to Tab Form. Click save to return to your page, and click “Add a field” from the gray bar of links beneath the asset description. Enter your first field in the Edit Field screen. In the “What next?” field of the Edit Field screen, select “Go back to the site.” You will return to the web page. From the gray bar of links beneath the asset description, select the “Add a Tab” link.

The “Add New Tab” screen will open.

In the “Label” field enter a name for the tab, and enter some text in the “Subtext” field. Select the next action from the “What next?” field, either add a new tab or go back to the site. Click save.

In this example, two tabs were created. You will see the two tabs listed below the data form title.

From the gray bar, once again select a link, this time “Add a field.”

In the Edit field screen, you will now see some new options under the “Tab” field. In this field you may now select to add this field to one of the tabs you have created. Select to continue adding fields, assigning them to the appropriate tabs as you go, or go back to the site. When you’re done, commit your content and exit admin mode. When you return to the site, you will see all the fields you created assigned to the designated tabs as the user views them.

In this example, two tabs were created: Contact Info and Professional Profile. These are displayed at the top of the form, below the Data Form title and text. The default view will be the first tab created, so displayed above is the Contact Info tab with its assigned fields (name, email address, street address, telephone number).

To view the Professional Profile tab, simply click on its name at the top of the form.

If you would like to change the order in which the tabs are displayed, in this case make the Professional Profile tab the default view, enter admin mode and use the arrow icons on the tabs’ toolbars.

The order of fields displayed in each tab can be altered in the same way. Simply click the arrow icons on each individual field’s toolbar to move it up or down in the field placement.

View Data Form Entries

You can view data entered by users by clicking on the “List all entries” link, located in the gray bar at the top of the Data Form asset.

Clicking on the list entries link will direct to a page on which all data form entries are listed.

Each entry is given an Entry ID. Clicking on an entry's ID will direct you to the Data Form asset view of the original entry, a shown below.

The second column in the list entries screen shows the Message sent in the data form. At the far right is the date on which the user submitted the form. This example is the default template for this screen on a WebGUI demo server. The fields and columns may differ on your site.