Webform

Application: 
OSU Drupal 6

 

Webform is a module which makes it easy to create forms in Drupal. Using Webform you can create sophisticated forms without the need for any coding.

When building forms to collect data be sure to avoid collecting sensitive information as outlined in the Information Security (IS) Policy & Procedures Manual

Create Webform Content

Application: 
OSU Drupal 6

To get started select Webform from the Create Content menu.

displays navigation to create webform content: admin menu /> content management > create content > webform

At this point it looks like you are creating a regular page, as you don't see any options for adding form elements. That will come after. In this screen just set the title and the introductory text. You can also set a menu option for it, or wait and do that later.

data entered into a webform submission form

Add Webform Components

Application: 
OSU Drupal 6

After you save your page you will notice a tab titled Webform. Click this to begin adding form elements.

empty component list on webform tab - field with "New component name" text in it.

  • Type in the label for your first field where it says "New component name".
  • Select the type from the "Type" menu. The default will be "Textfield".
  • Check the checkbox for "Mandatory" if this is a required field.
  • Click "Add" to add the element and go to the element details screen.

After completing the details for your first field you will be returned to the Webform tab to add additional fields.

Default Component Elements

Application: 
OSU Drupal 6

After you add the field you will see the element details screen.

label field, component configuration panel top includes: field key field, default value field, description field

Field Key

Pay particular attention to value you use for the field key. You will want these to be unique across all of the forms you create. If you plan on creating a number of forms you may want to prefix each field key with a short name of the form. For example "survey1_first_name". Only use lowercase and underscores in field keys.

Default Value

If you want the field pre-filled with a default value then enter it here.

Description

Enter any text as an aid to the person filling out the form.

There are a number of other options in the Element Details

Validation

You may have already made the field mandatory. This screen includes the options to make sue the entry is unique across all submissions, and to set a maximum length for the input.

validation fieldset contains mandatory checkbox, unique checkbox, and maxlength field

Display

These options control how the field is displayed on the form. Note that the default is to place the label above the field. If you want in to the left select "Inline" from the menu.

display fieldset contains data fields: width text field, label placed to the left textfield, label placed to the right textfield, label display drop-down, and disabled=

Tokens

Tokens are code shorthand that will expand into a value when the form is displayed. These will not always be that useful. This example will pre-fill the e-mail field with the e-mail address of the person completing the form, but only if they have logged in to the site with their ONID. A more useful example might be the date token to fill in the current date.

data fields: label field, field key field, default value field with token value in it, token value list

Component Types

Application: 
OSU Drupal 6

There are many different types of components that can be used on a Webform, and all of these components can be configured to do different things, or appear different ways, according to what you need.

This section provides an overview of each different component type and the various features the component type consists of.

a list of the different component types available through webform

You can see that these options give you a lot of control over your form. For example you could use a "fieldset" to group form elements and optionally display an outline around them. You can also insert markup to add text or even images to your form.

Currently, the available components in Webform are as follows:

  • Date
  • E-mail
  • Fieldset
  • File
  • Grid
  • Hidden
  • Markup
  • Page Break
  • Select options
  • Textarea
  • Textfield
  • Time

Configure Webform Form Settings

Application: 
OSU Drupal 6

After you have added all of the fields to your form you can set some global settings for the form. Select the "Form Settings" tab in the Webform screen.

submission settings fieldset including a confirmation text area field

Confirmation Message

You may enter a confirmation message that will display once the form has been submitted.

redirection location option set, submission limit option set, status of this form option set

Redirection Location

Optionally you may want the page to redirect elsewhere once the form is submitted.

Submission Limit

Limit how many times a person can submit the form.

Status of this Form

You can disable the form to prevent people from submitting it, but still have it online. You can re-enable it again at any time.

webform form settings: submission access fieldset, advanced settings fieldset

Roles that can submit this webform.

Normally you will want anonymous and authenticated users to be able to submit the form, but it is possible to limit this to specific roles.

Advanced Settings

You may want to have a form available as a block so that you can place it in a region that will always display on certain pages. You may also want to change the text of the submit button.

Configure Webform E-mail Settings

Application: 
OSU Drupal 6

To set where the results of the form will be sent, first click the E-mails tab on the Webform screen.

e-mail settings: options to set a default address or to use an existing component's value as a default

You have the option of sending all of the results to one or more addresses, or to an address based on the results of a form component. In our example I entered some e-mail addresses in the Affiliation field, so I am selecting it here.

After you click the "Add" button you will see the E-mail Settings screen.

e-mail settings: option groups for e-mail subject, e-mail "from" address, and e-mail "from" name

Here you have options to customize the Subject, From address, and Form name, that will be sent in the e-mail.

e-mail settings: e-mail template fieldset including text area to create template in

E-Mail Template

This is a customizable template for the e-mail that will be sent with the results of the form submission.

Included E-mail Values

By default the values of all of the form fields will be returned in the e-mail, but you can change that here.

Create a Webform E-mail Template

Application: 
OSU Drupal 6

To control how the results of the form will appear, first click on the "E-mails" tab on the Webform screen.

e-mail settings: options to set a default address or to use an existing component's value as a default

You now have the option to edit the e-mail settings for the e-mails that are sent out after a Webform is created.

 

To create a new E-mail template, click on the word "Edit" in the Operations column of the E-mail that you want to change.  Once the page has finished loading, you should see the Edit E-mail Settings screen.  Scroll down the page until you see the "E-mail template" fieldset, shown below.

The default E-mail template is shown.

In this area, you can create the e-mail that will be sent out after the form is submitted.

Customizing a Webform E-mail Template

Application: 
OSU Drupal 6

The e-mail template field uses strings of characters and text, called tokens, to determine what information will be included in the e-mail that will be distributed upon submission of the Webform.  These tokens are very powerful tools because they allow for a single e-mail template to use elements from your Webform to customize each email.  This way every e-mail can be tailored to the individual that it is sent to.

 

Click on the words "Token values" to see the available token values.

 

Screenshot of the opened Token values fieldset.

 

Because using these tokens can be a little confusing, here are a few different examples of how to use the tokens.  Each field has it's own unique field key, which is used by the tokens to differentiate between all of your different fields.  For this example we will assume that I have a field whose title is "E-mail".  The key for this field is "email", and the person submitting the Webform has entered johndoe123@oregonstate.edu as their e-mail address.

 

If you put this in the template field:

%email[email]

then you will have this returned:

E-mail: johndoe123@oregonstate.edu

 

Or if you entered:

Email: %value[email]

then the following would be returned:

Email: johndoe123@oregonstate.edu

 

The difference between these two entries is that when you use the %email[key] token you get what Drupal calls a formatted value, while you only are given the value of the field when you use the %value[key] token.  The formatting refers to how Webform adds the title of the field followed by a colon and space before the value of the field.  This way you can have things atomated to show their title the %email[key] token.  Or, now you have the option to do something like put a person's name in the middle of a sentence with the %value[key] token.

Add a CAPTCHA Challenge

Application: 
OSU Drupal 6

To avoid getting a lot of spam submissions it is important to add a Captcha challenge. First click the "View" tab to view your form.

CAPTCHA - click on captcha link at bottom of form "view" tab

Then click the "Captcha" link and click "Place CAPTCHA here for untrusted users."

Note that this shows up on a lot of different places, but this is the only place you do this to get the Captcha on your form.

After clicking this you will get this next screen.

CAPTCHA point administration: form id field with webform id in it and challenge type drop down - choose reCAPTCHA

There are options for several types of Captcha, but we only want to use reCaptcha. Select this from the menu and then click Save.

You form is now protected from spam submissions. Note that logged in users will not see the Captcha, only anonymous users.

Viewing Your Webform Results

Assignment Info
Assigned To: 
fenns
Content Due Date: 
12/21/2012
Status: 
Completed
Application: 
OSU Drupal 7

 

The Webform module provides the ability to analyze the results of your webform submissions in a variety of different ways.

  • A list of all submissions for a given webform.
  • An analytical break down of the aggregated results for each field in a given webform.
  • A table view which shows all of the responses for all of the fields of a given webform.

There even exists the ability to download the results in a comma-separated value (CSV) file format for use in a spreadsheet application such as Microsoft Excel or Open Office Calc.

So let’s take a moment to examine the analysis tools that are provided by the Webform module.

Accessing the Webform Manager

Assignment Info
Assigned To: 
fenns
Content Due Date: 
12/21/2012
Status: 
Completed
Application: 
OSU Drupal 7

 

The Webform Manager is where you can find a list of all of the different webforms that have been created on your site.

To access the Webform Manager, go to Admin menu > Content management > Webforms.

  1. Each webform has its own separate entry in the table. 
    • Clicking on any of the links in a given row will show you the category for that particular webform.
  2. Clicking on the title of a webform will redirect you to the node view of that webform.
  3. The remaining items in the View and Operations columns will display different information about the webform in their corresponding row.

Viewing Webform Submissions

Assignment Info
Assigned To: 
fenns
Content Due Date: 
12/21/2012
Status: 
Completed
Application: 
OSU Drupal 7

 

On the Webform Manager, the Submissions link will take you to a simple list of all submissions for a given webform.  To view the submission information for a particular webform, do the following:

  1. From the Webform Manager, click on the Submissions link.
  2. Included in the Submissions results are the following:
    • The sequential number of each response.
    • The date submitted.
    • The user who submitted it.
    • An IP Address listing.
    • Operations to View, Edit, and Delete the individual submissions.

Viewing the Webform Analysis

Assignment Info
Assigned To: 
fenns
Content Due Date: 
12/21/2012
Status: 
Completed
Application: 
OSU Drupal 7

 

The Webform module will provide you with an analysis of each and every field that users may (or may not) enter data in.  To view this information, do the following:

  1. From the Webform Manager, click on the Analysis link, or if you're inside a webform, click on the Analysis tab:
  2. Included in the Analysis results are the following:
    • Number of times a field is left blank.
    • Number of times a field is answered.
    • The average submission length of words for text fields.

Viewing a Webform Table

Assignment Info
Assigned To: 
fenns
Content Due Date: 
12/21/2012
Status: 
Completed
Application: 
OSU Drupal 7

 

The Webform module will provide a Table view of your webform, which displays all of the collected field data in their respective columns. To view the Table display, do the following:

  1. From the Webform Manager, click on the Table link, or if you're inside a webform, click on the Table tab.
    • The quantity of columns that is displayed in this table varies depending on how many different components have been added to your webform. It can grow very big and become quite unreadable.

Downloading Your Webform Results to a Spreadsheet

Assignment Info
Assigned To: 
fenns
Content Due Date: 
12/21/2012
Status: 
Completed
Application: 
OSU Drupal 7

 

The Webform module provides you the ability to download the results for a given webform into a comma-separated value (CSV) file, which can then be opened in a spreadsheet application such as Microsoft Excel or Open Office Calc.  This will allow you to easily chart your results.  To download your results, do the following:

  1. From the Webform Manager, click the Download link, or if you're within a webform, click the Download tab.
    1. In the Export format group, check Delimited Text.
    2. In the Delimited Text Format drop down, select Comma (\c).
    3. Click the Download button.
  2. A dialog box will then open and ask you if you want to open or save the file:
    • If you choose to open the file from the dialog box, you will immediately see the results.  To save it from here you will need save the file to your preferred location from within your spreadsheet application.
    • If you choose to save the file from the dialog box, it will automatically save in the location specified in your browser settings (by default, this is usually in some temporary internet file location, unless you have changed the download settings in your browser).
    • Typically to change your browser settings you will need to look inside the Tools or Help menu item for your browser.  For specific information regarding how to change your browser's download settings, please see the help instructions provided by the organization responsible for the browser (such as Microsoft, Mozilla, Google, Apple, etc).

Please note that while Webform gives you an option to download results into a Microsoft Excel format, this may not always work depending on the version of Microsoft Excel that you have on your computer.  Your safest bet is to use the more generic CSV method, which will be automatically recognized by most spreadsheet applications.