Adding Forms to Your Site

On this page:

Using Webforms on Your Site

The Webform module lets you easily create a web form through which users can supply information. The Webform is often used for a Contact Us form, but could also be used for surveys, feedback or registration information.

You create the form page and then add form fields (components) with entry limits and validation options as well as instructions to users. Data returned through the form is stored in Drupal and is easily viewed for analysis or exported to Excel. Forms can also be configured to send you an email alert. And, forms may be saved as a block for use throughout your site, for example, to create a feedback form placed on multiple page types.

Creating a Webform

The form is created in two steps. The first is to create the page for the form. You’ll supply a name and optional description and set any page options you want. The second step is to create the fields which will be part of the form.

To Create a Form Page

1. From the Administrator menu click Content, then +Add content.
2. Click Webform.
3. Add a Title.
4. Add Body content you wish users to see. This is optional.
5. Adjust any settings, e.g., to provide a menu link or to turn off comments.
6. Click Save.

We recommend that you disable comments on the Webform content type. Go to Structure > Content types > Webform > Edit, then click on Comment settings and change the Default comment setting for new content to Closed.


Notice the Tabs at the top right.


The Edit tab displays information about the Form page (node). You are taken immediately to the Edit tab when you create a new Webform.

Adding Fields to the Web Form

Once you create the page to hold the form you will need to add fields. From the Edit overlay screen, click the Webform tab.


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

Creating the Fields or 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.
   
   
   

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

Making 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[istdraft:profile_first_name] is used to add the person’s first name by default to save the user time.

1. Add Validation options to ensure the user enters 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.

Setting up an E-mail Alert for a Submitted Form

You can set up email alerts to be sent when a form is submitted. Click the E-mails button to set up the recipient and what will be included in the email.

1. Click Webform, then E-mails.
2. Enter the recipient email address in the _Address_box.
3. Click Add.
   

Make Adjustments to Email Settings

1. Add additional recipients separated by commas, if necessary.
2. For the E-mail subject, E-mail from address and E-mail from name enter a value or leave the default value.
3. You can also use the value from any component of your form by choosing from the drop down list.
   

Make Edits to Email Message

1. A default email message template is provided which you can edit. Once edited, you may return to the original default by selecting Default template from the drop down box.
2. The template uses tokens. You may add additional tokens or text.
3. The %email_values token will display any components checked in the Included Email Values area.
4. Click Save e-mail settings.
   

Managing Form Settings

You can make several adjustments to how the form will operate from the Form settings overlay screen.

Add a Confirmation Message

1. Click Webform, then Form settings.
2. Use the edit box to create a custom Confirmation message.
3. Add a redirect to Confirmation page (automatically created) to have this message appear on a new page instead of a display message. You may also create your own confirmation page and redirect to it.
4. Click Save configuration when you are finished making changes.
   

Set Limits to Form Submission

1. Click Limit to and a number to limit Total submissions. You may limit within a time range as well.
2. Click Limit to and a number to limit User submissions. You may limit within a time range as well.
3. You can also click Closed to stop submissions completely. You can re-open submissions at any time.
4. In the Submission Access section, check the roles which you want to respond to the form, or uncheck the role(s) to prevent submission.
5. Click Save configuration when you are finished making changes.
   

Set the text for submission button and other advanced settings:

1. In the Advanced Settings section, enter new text in the Submit button text box to override the default Submit text.
2. Click Available as block to make your form available to be placed on other pages as a block. You would then access the form on the Block overlay page.
3. Click Save configuration when you are finished making changes.
   

Reviewing Submitted Data

On the overlay page for your web form, click the Results tab. This tab lets you view and download the data from your form submissions.

To View a List of All Submissions

1. On the _Results_tab, click the Submissions button to see a list of all submission records.
2. Click a column head to sort by that column.
3. Click a name to see that person’s profile.
4. For each record you may choose to view, edit or delete.
   
   
   When you click View in the Operations column you will see a record which looks like this. If necessary you can Edit the response or Delete it.
   
   
   

To See a Simple Analysis of the Submissions

1. On the Results tab, click Analysis.
2. For each field you will see how many users entered information, how many left the field blank and the average length of the submissions for that field.

To See Field Data for Each Submission in a Table Format

1. On the Results tab, click Table.
2. For each submissions the data from each field will be displayed on a row. This display becomes less useful as the number of fields in your form grows in number.

To Download the Results from your Webform Submissions

1. On the Results tab, click Download.
   
   
   
2. Select the Export format, Delimited text or Microsoft Excel.
3. Change the Delimited text format if required. In most cases you’ll want to leave this as is.

You have a number of options in the List Options, Components and Range sections.

To Clear All Submission Forms (all data)

1. Click Results, then Clear. All of your data will be deleted.
2. You will be presented with a warning message.
3. Click the Clear button.

Be sure you have downloaded and saved your data if necessary before using Clear. This cannot be undone. Also note that any new submissions after a Clear will continue numbering from the last submission, and not begin again with the number 1.

See Also

• Return to Drupal Cloud Landing Page