How To Configur Drupal's Webform Module

One of our club members asked us how to create a survey form in Drupal 7. They wanted to achieve this without a need for custom coding.

The Webform contrib module is the perfect tool for the job. In this tutoral, you will learn how to use this module to survey what peanut butter, jelly and bread your site visitors prefer.

Webform is a module for making forms and collecting information from users in Drupal.

After a submission, you can send users a thank-you email as well as sending a notification to administrators.

Results can be exported into Excel or other spreadsheet applications. Webform also provides some basic statistical review and has an extensive API for expanding its features.

If you need to build a lot of customized, one-off forms, Webform is a more suitable solution than creating content types and using the CCK or Field modules.

Step #1. Download the Webform, CTools, Views, and Token Modules

• Go to http://drupal.org/project/webform, and download the Webform module.

 

• 

• Go to https://www.drupal.org/project/ctools and download the Chaos tool suite (Ctools) module.
• Go to https://www.drupal.org/project/views and download the Views module.
• Go to https://www.drupal.org/project/token and download the Token module.

Make sure you download the latest versions of the module for Drupal 7. They may have changed since we wrote this, so be sure to check.

Step #2. Install the Webform, CTools, Views, and Token Modules

Note: if you don't see the Install new module link, please go to Modules and enable the Update manager module.

Step #3. Enable the Webform, CTools, Views, and Token Modules

• Go to the Modules and enable the Webform module
• Scroll down to Webform and click the checkbox.
• Click Save configuration.

Step #4. Access the Form Fields

• Go to Structure  > Content types.

• Scroll down to Webform.
• Locate the edit, manage fields, manage display and delete links.

• Click Edit.

You will be taken to the Webform module management page:

This is not the place where you will be creating forms. Editing here is exactly the same as editing Fields in Content Types, which is a way to make fields available to this content type.

From here you can edit fields, manage existing fields, the display and the comment functions by clicking on the appropriate tabs.

But creating the actual form is done by adding content in the same way you would add an article.

You won't need to do much here but review all your choices and see if there is anything you feel you must change.

The default values will work for the purposes of our demonstration. After you create your first form and understand the module you might want to revisit the configuration.

Now that the module is installed and the configuration is checked, you can begin building your survey form.

Step #5. Create a Web Form by Adding It as Content

• Go to Content > Add Content > Webform.

• Give it a title and make the decisions on all basic options.
• Save this with the Save button at the bottom of the page.

Step #6. Add the Form Components

Now you will see the controls for creating and editing the rest of the form elements.

Let's start adding Form components using the WEBFORM tab.

• Make sure you are under the Webform tab.
• Enter Name instead of the New component name text.
• Choose the textfield.
• Click Add.

We are surveying registered users, so we are going to automatically fill in their username.

A name is a basic text field, but we want our registered users to show up on the textfield, so we're going to make use of the Tokens. Using Tokens is just an optional feature.

• Enter the %username token value in the Default value field. This will pull the username from the database and fill it in automatically.

Note: If you don't see the TOKEN VALUES, you probably don't have the Token module installed. You only need the %username token if you want to fill in the default values taken from the database.

If this is going to be a blank field that the user will fill in when they visit the page, you can just leave the Default value blank. I used the token value here to illustrate the possibilities available to you.

• Scroll down the rest of the page and make any configuration selections you need.
• Click Save component at the very bottom of the page.

Step #7. Create the Select options Fields

Now let's create our first select field form component.

• Enter Bread as the filed label.
• Choose the Select options type from the drop-down. 
• Click Add. 
• On the next screen enter the options as displayed in the image below:

• Go to Options and create Key-Value pairs.

These pairs consist of a machine-readable key and a plain language value separated by a "|" - This character is called a "pipe" and you can find it by holding shift while pressing the backslash key "\" key on most keyboards.

Key-value pairs MUST be specified as "safe_key|Some readable option". Use of only alphanumeric characters and underscores is recommended in keys. Enter only one option per line.

• Save the component.
• Repeat this step for the flavor of the jelly and type of peanut butter.

When you are creating lists, the default type is radio buttons. If you want checkboxes or a list box the choices are farther down on the page.

You can also set the field as mandatory or optional. If you click the "Multiple" checkbox at the top, the list will appear as checkboxes.

If you choose the Listbox under DISPLAY you will have a drop-down box. Selecting Multiple and Listbox will allow users to make multiple selections from a drop-down box.

When you create the Jelly type, add Other as a choice. Then add a text field so people can write in their suggestions.

Step #8. Add a textarea Field

• Add a textarea field. It will be a large area used for entering more extensive written responses.

Other field types you might want to add for your purposes are an E-Mail field or Date field. You can choose these types from the drop-down Type box.

Step #9. Add a Preset Field Type for US States

There is a convenience feature you may want to use. You can create pre-built option lists and add them to your form. The module comes with several default lists. 

• Add one for the US States to see how this looks on your form.
• Label it State.
• Choose the Select Options type. 

• Choose the US States from the drop down.
• Click Save Component.

Step #10. Check Your Survey Form

At this point, your form will look similar to the one on the image above.

You can change the locations of the descriptions by clicking the WEBFORM tab and editing each item and making different configuration selections.

• Order the form fields the way you like and all the questions and fields correct. You can use drag and drop to move form elements to different positions.

Next, let's configure the E-Mail Option.

• Go back to the WEBFORM tab > E-mails tab.
• Fill in an e-mail address. 
• Click Add.

Good job. You just set the email address to receive an email when the form is submitted. If you wish, you can add multiple e-mail addresses.

There are lots of choices to make. Be sure you check every one of them so they are correct for your form. Be sure to save the changes.

Let's move on to the last step.

Step #11. Configure the Form Settings

• From the WEBFORM tab click the Form settings sub-tab at the top of the page.
• Check and modify settings as needed. 
• Save your changes.

Step #12. Test Your Form

• Now publish your form exactly like you would publish any other content item on your site.
• Log out of your site.
• Fill in our survey form as an anonymous user.
• Now log in back to your site.

• Click the Results tab.

• On the next screen, click the view link.

You will see the Submission #... screen, resembling the one, displayed on the image above. Job done! If you wish, you can also run a test as a logged in user.