Create a Form

A Webform is a content type which makes it easy to create forms in Web Express. You can create sophisticated forms without the need for any coding.

When building forms to collect data be sure to avoid collecting sensitive information as outlined in the  FERPA directory data policy for acceptable information. Please review our managing forms best practices article to review steps you can take to keep data secure.

Note: you must enable the Forms bundle to use this feature.

1

Create a Webform Page

The first step in creating a Webform is to create the Webform page. At this point it looks like you are creating a regular basic page, as you don't see any options for adding form elements. That will come after. In this screen just set the title and the introductory text. You can also set a menu option or wait and do that later.

  1. Go to the Shortcuts toolbar and select Add Content. 
  2. Select Webform from the list of options.
  3. Title: is for the main title of the form.
  4. Body (optional): is the content area of the page. Adding text to the body of the page is optional.
  5. Menu settings (optional): to manipulate the menu/navigation.
  6. Click Save.
2

Add Form Components

After you save your page you will notice you are now in a tab titled Edit Webform. Now you may add your form fields/ components.

  1. Type in the Label for your first field where it says "New component name".
  2. Select the type from the Type menu. The default will be "Textfield".
  3. Check the checkbox for Required if this is a required field.
  4. Click Add to add the component and go to the component details screen.

After completing the details for your first field you will be returned to the Webform tab to add additional fields.

4

Default Form Components

After you add the field you will see the component details screen.

  1. Field Key: pay particular attention to value you use for the field key. It is helpful to have a short field key names if you plan to do any submission email customization. Only use lowercase and underscores in field keys.
  2. Default value: If you want the field pre-filled with a default value then enter it here.
  3. Description: enter any text that will aid the person filling out the form.
  4. Validation: you may have already made the field required. This screen includes the options to make sure the entry is unique across all submissions, and to set a maximum length for the input.
  5. Display: these options control how the field is displayed on the form. Note that the default is to place the label above the field. If you want the label to the left, select Inline from the Label display drop-down menu.
  6. Click Save Component.
5

Component Types

There are many different types of components that can be used on a Webform. All of these components can be configured to do different things according to what you need.

This is an overview of each component type and the various features the component type consists of. Currently, the available components in Webform are as follows:

  • Date: Provides month, day and year drop-down fields, as well as a pop-up calendar, for date input.
  • E-mail: Provides a field for e-mail address input, and validates the submitted value is an e-mail address.
  • Fieldset: Used for grouping form components; use the drag-and-drop handle to arrange components that are part of the group as child items of the fieldset.
  • File: Provides a file upload for attaching files to form submissions. (Note: using this component requires you to use Spam prevention on the form)
  • Grid: Provides a grid formatted field for radio button (single selection) or check box (multiple selection) input. Questions are formatted as rows, and responses are formatted as columns. All questions in the grid component have the same options for a response. Create separate grid components for different sets of responses.
  • Hidden: Provides a hidden field for internal content entry. Label and text in hidden field will not be displayed on the webform, but will be included in the data saved. A Hidden field does not provide for any input by the webform submitter.
  • Markup: Provides a field for content entry by the form creator. Markup fields are typically used for text, links, or images to be displayed within the webform components - i.e. for additional instructions. A Markup field does not provide for any input by the webform submitter.
  • Number: Provides a field for number input. 
  • Page break: Provides a page break configuration to create multi-page webforms. 
  • Select options: Provides a select field for text input. Radio buttons are provided for single value selection. Check boxes and list boxes are provided for multiple value selection.
  • Textarea: Provides a multi-line text field for text input (i.e. descriptions, comments, etc.).
  • Textfield: Provides a single-line text field for text input (i.e. name, address, etc.).
  • Time: Provides hour and minute drop-downs, as well as am/pm radio buttons, for time input.

Related Articles