Start a FREE 7 day trial! Get training videos and books, plus expert support:  

Drupal Tutorials and How-to Support Articles

Getting Started With Drupal's Webform Module

Webform is the 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.

Download the Webform Module

tutuploadsStep_1._Download_the_Webform_Module.png

Go to this url https://drupal.org/project/webform, and download the Webform Module.

There are some additional modules that add some functionality and make some operations easier. You can download the optional modules as well. To keep things simple, we'll use the basic module and show you how to create a simple survey of registered users.

tutuploadsmedia_1317090861314.png

Download the correct version. They may have changed since we wrote this, so be sure to check.

Install the Webform Module

tutuploadsStep_2._Install_the_Webform_Module.png

Enable the module

tutuploadsEnable_the_module.png

Go to the Modules page and scroll down to Webform and click the check box. Click Save configuration.

Access the form fields

tutuploadsAccess_the_form_fields.png

Go to Structure > Content types

tutuploadsmedia_1317093423174.png

Scroll down to Webform and look the right for the links to edit and manage fields and the display.

tutuploadsmedia_1317094660865.png

Click Edit

If you are familiar with CCK in Drupal 6, or Fields, which is now part of D7 core, you will see a familiar interface for adding and managing new fields.

tutuploadsmedia_1317095178845.png

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.

Create your first webform by adding it as content

tutuploadsStep_3._Create_your_first_webform_by_adding_it_as_content.png

Go to Content > Add Content > Webform

Don't get confused over Poll vs Webform. We are creating a form with various types of questions, not taking a Poll. Poll is another content type that is similar, but restricted to multiple selection fields and gathering the statistics on the responses. Webform is a form submission module, and collects the actual responses and stores them in a table for you to review. You can collect almost any type of data using Webform.

Create the basic form details

tutuploadsCreate_the_basic_entry_form_and_configure_the_same_as_any.png

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

Add form components

tutuploadsStep_4._Start_adding_form_components.png

Now you will see the controls for creating and editing the rest of the form elements. Start adding Form components on the WEBFORM tab.

tutuploadsStep_5._Make_a_pre-filled_username_field_using_a_Token.png

Give the component a label, choose textfield and then click Add.

We're surveying registered users, so we are going to automatically fill in their username. A name is basic text field, but we want our registered users to show up on the textfield, so we're going to make use of Tokens. Using Tokens is just an optional feature.

tutuploadsmedia_1317148972326.png

Enter the token %username in the Default value field.

This will pull the username from the data base and fill it in automatically.

If you don't see the TOKEN VALUES, you probably don't have the Token module installed. You only need Token if you want to fill in the default values taken from the data base. 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 Token here to illustrate the possibilities available to you.

If you need the Token module you can download it here https://drupal.org/project/token

Scroll down the rest of the page and make any configuration selections you need then click Save Component at the very bottom of the page.

Create a "Select" field

tutuploadsStep_6._Create_your_first_Select_field.png

Fill in a new label and choose the Select options type from the drop down. Click Add and complete the options on the next screen

Create the list of options

tutuploadsStep_7._Create_the_list_of_options_for_the_user_to_choose.png

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. One option per line.

Save the Component.

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

tutuploads-_Default_choice_is_radio_buttons.png

When you are creating lists, the default type is radio buttons. If you want check boxes or a listbox the choices are farther down on the page. You can also set the field as mandatory or optional. If you click the "Multiple" check box at the top, the list will appear as check boxes. If you choose "Listbox" under DISPLAY you will have a drop down box. Selecting "Multiple" and "Listbox" will allow users to make multiple selections from a dropdown box.

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

Add a Text field

tutuploadsStep_8._Add_a_Text_field.png

You can add a text field, or a textarea. A text field is for short entries like names. A textarea will be a large area 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 thees types from the dropdown "Type" box.

tutuploadsmedia_1317154370995.png

You can choose other field types from the Type drop down.

Add a preset field type

tutuploads-_Add_a_preset_field_type_-_an_added_feature_of_Webform.png

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 States if you want to see how this looks on your form. Label it State and then choose the Select Options type and when you get to the next screen, make your selection.

tutuploadsmedia_1317151406971.png

Choose US States from the drop down.

Check your form

tutuploadsStep_9._Check_your_form_and_fine-tune_the_view..png

At this point your form will look similar to this. You can change the locations of the descriptions by clicking the WEBFORM tab and editing each item and making different configuration selections. Once you have the form ordered the way you like it and all the questions and fields correct. Go back to the WEBFORM tab EMAIL tab and set the EMAIL options.

You can use drag and drop to move form elements to different positions.

Configure the E-Mail options.

tutuploadsStep_10.__Configure_the_E-Mail_options..png

Go back to the WEBFORM tab and look for the E-mails sub-tab. Fill in an address and click Add.

Set the email address if you want to receive an email when the form is submitted. You can add multiples.

tutuploadsmedia_1317152290926.png

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.

Configure the Form Settings

tutuploadsStep_11._Configure_the_Form_Settings.png

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.

Now you can publish your form exactly like you would publish any other content item on your site. After you've had a chance to collect submissions, you will see the results when you are logged in as a user with the correct permissions.

tutuploadsmedia_1317152553413.png

Click Content > Find Content and select the form from the content list and you can find the results tab. This will allow you to see the collection of data you have as well as give you some simple analysis.

Video on how to use Webform

 

Start a FREE 7 day trial! Get training videos and books, plus expert support:  

License

All of our tutorials are published under the Creative Commons Attribution-NonCommercial license. This means:
  • You can re-use these tutorials.
  • You can modify these tutorials.
  • You must link back to our original tutorial.
  • You can't use these tutorials commercially.
Click here to read the full license.