How do I add fields to the web form?

Once you create the page to hold the form you will need to add fields. From the actual VIEW of your page or from the EDIT overlay screen, click the WEBFORM tab.

webform tabs

Notice that the WEBFORM overlay has three sub areas – Form components, E-mails, and Form settings. We’ll look at each.

form components

The Form components area is where you will create the fields for your form.

To add fields:

1. Add the field name in the New component name box.

2. Select a Type for the field display from the drop-down list. Be sure to choose the appropriate Type. Some fields (e.g., time, number) have built in validation and some will offer the user widgets for easy data entry (e.g., date) See explanation of types below.

component pick listTextfield – displays text on single line
Textarea – displays text on multiple lines
Fieldset – group fields together as a unit
Hidden – captures information but does not display
Markup – allows you to insert html and css
Page break – will force a page break within the form
Select options – lets you use radio buttons and check boxes

 

 

3. Click Add. You will see the Edit component overlay where you can adjust settings for this field.

edit component

Make adjustments to the field settings:

  1. Edit the field Label if you desire.
  2. Add a Default value (optional) which will display automatically. The user may change this.
  3. Add a Description to help the user enter data in this field.

Notice the use of a token. A token is a quick way of using some information the systsem knows such as site name, user name, or date. Here the token %profile[profile_first_name] is used to add the person’s first name by default to save the user time.

edit component

  1. Add Validation options to ensure the user enter data (Mandatory) which no one else has entered (Unique). Restrict data to a Maxlength of characters.
  2. Set the maximum Width for this field (in characters).
  3. Add a Prefix or Postfix to be added to the field data.
  4. Set the field Label display to appear above or below the entry box.
  5. Check Disabled to add a unchangeable default value.
  6. Check Private to limit viewing of this field to those with permission.

Be sure to click Save component.  Repeat this process for each field you need.

To see your form click the VIEW tab or close the overlay screen.

You can return to the EDIT and WEBFORM tabs at any point to change the web form page or edit the fields in you form.