Webforms Quick Start Guide

A webform is a node type that can be used to collect one-way input submissions from users. Example uses might include account requests, email list inclusion requests, service requests, registration or contact forms, or even small or limited surveys and questionnaires.

Your site visitors will be able to fill out the form, click a Submit button to send in their response. Submission results are stored by Drupal and can be emailed, viewed online within your Drupal site, or even downloaded into a spreadsheet.

Here, we'll walk through the basic steps required to create a webform. For advanced documentation on webforms and a full explanation of these steps, please see our Webform User Guide.

1. Create webform page

Click on Add Content and then select Webform.

Give the page a title. The body is an optional area that can be used to introduce the webform or to provide instructions to your users. Assign a section to the page (unless you're using Sections, it will be "This Site"), and then click Save.

2. Add components

After saving the page, you should see a tab called Webform. Click on the Webform tab, and make sure the sub-tab Form Components is selected.

Components are form input elements that can be added one at a time. Give the component a label, or name, and then select the component type using the dropdown menu. If necessary, you can make a form component required by checking the box. Finally, click Add to create the component.

The most common component types are: 

• Fieldset - a container in which you can place other components. This helps visually organize your form
  • Example: add all contact information components in one fieldset
• Textfield - a text box, such as “first name”
• Text Area - a box for visitors to enter data (e.g. for comments)
• Date - select a date from a drop down list
• Email - allows user to enter an email address; is handy when configuring email responses of submissions
• File - allows visitors to upload files, such as documents or images 
  • Do not ask visitors to scan in sensitive (Level 1) data and upload it to your site!
  • Upload directory can be set in the configuration screen after you’ve added the component
• Grid - a questionnaire-like section using radio buttons
• Markup - allows form creator (you) to add custom HTML and place it between other form components (e.g. text, links, images)
• Select Options - checkboxes, radio buttons, drop down lists, and list boxes to offer choices. 
  • Radio buttons let users select only one option, and checkboxes allow users to select more than one option. On the configuration screen, in the Options field, type your choices in this format: 
    
    0|Yes
1|Maybe
2|No

The pipe character located between the number and the choice is located between the delete and enter keys on most keyboards. 

To reorder your components, or to drag them into fieldsets, click on the icon to the left of the component. Dragging up or down changes the order of appearance, and dragging to the right can nest a component within a fieldset.

3. Configure form settings

• Click on the Webform tab, then the Form Settings sub-tab. 
• Here you can enter a confirmation message so users know they have successfully submitted the form, or you can direct users to an existing page upon form submission.
• You can explore additional options here, such as a progress bar for forms multi-page forms.

4. Configure email settings

• Click on the Webform tab, then the E-mails sub-tab. 
• To receive an email when forms are submitted, add your email to the Address field, and then click Add.
• Form submitters can be sent a confirmation email if Component Value is set to a component that they populate with their email address.
• After clicking Add, edit the E-mail Template to change the content of the email.

5. CAPTCHA

CAPTCHA is a challenge-response test to determine whether the user is human. It’s purpose is to block submissions by spambots, and ITS recommends you use it on your forms. Even though the CAPTCHA prompt appears on every page when you’re signed into your site, you only place it on the main page of your form. 

1. Click the View tab
2. Scroll to the bottom and click CAPTCHA: No challenge enabled, then Place a CAPTCHA here for untrusted users
3. Select Default challenge from the dropdown and click Save

CAPTCHA will not appear for users who are signed in to the site – if you want to test that this is set up correctly, you must first sign out.

6. Viewing and downloading your submission results

• Click the Results tab.
• Use the sub-tabs to view, edit, download, or clear the submission results.
• For advanced views of the submission results, consider setting up a Webform Report (see Webforms User Guide for more information).

7. Conditionals

Conditionals can be used to create advanced webforms that reveal or omit certain questions based on user input. For example, you could ask users at the beginning of the form to indicate if they are staff or faculty, and use a conditional to show different follow-up questions depending on their response.

You can view the short demonstration and tutorial of this feature with an example here.

The following is a simple set of instructions you can follow to set up and use conditionals:

1. Click on the Webform tab, then the Conditionals sub-tab
2. Click the + icon next to the text "Add a new condition"
3. Use drop-down menus to set up each conditional logic, as described below.
   • The basic formatting is as follows:
     
     If [component][condition][value],
     then [component] [condition] [state]
      
   • As an example, consider a form used to reserve a room. Perhaps different follow-up questions are required based on the day of the week the user chooses from a select options component. A conditional might read:
     
     If [Day of the week] [is] [Monday],
     then [Weekend reservation] [isn't] [shown]
4. You can add or remove conditionals, or "if" and "then" statements to an existing conditional, with the + and - icons.
5. Click Save conditions to apply your conditionals to the form.

You can view the short demonstration and tutorial of this feature with an example here.

Webforms Tips and Tricks