UNIVERSITY OF CALGARY | Information Technologies WEBFORMS DRUPAL 7 WEB CONTENT MANAGEMENT March 2015
Table of Contents
Creating a Webform – First Steps ............................................................................................................................................................ 1 Form Components ......................................................................................................................................................................................... 2
Component Types...………………………………………………………………………………………………………………………………………..4
Conditionals ................................................................................................................................................................................................... 18 Form Validation ............................................................................................................................................................................................ 19 E-mails .............................................................................................................................................................................................................. 20 E-mails sent to an address specified by the webform creator .......................................................................................... 20 E-mails sent to an address entered by the user filling out an E-mail component .................................................... 23 E-mails list .............................................................................................................................................................................................. 23 Form Settings................................................................................................................................................................................................. 24 Results .............................................................................................................................................................................................................. 29 Webforms
Drupal 7 Web Content Management
The Webform feature allows people visiting your site to submit information or files through forms,
questionnaires, surveys, and polls. Submissions are stored in the site’s database and may also be sent to
designated email addresses. The Webform feature also includes simple analytical tools and allows for all the
data to be downloaded for detailed statistical analysis.
Creating a Webform – First Steps
1. Hover over Content in the Administration menu. Move down to Add content and then click the
Webform option that appears.
Note: If you do not see Webform listed under Add content, contact the WCM Support team to request the
Webform feature be activated on your site. To do so, go to www.ucalgary.ca/it/help.
2. Notice the Privacy Assessment note on all webform pages. Please read this carefully.
1 | P a g e March 2015
3. Give the webform a Title. It will appear at the top of the webform. This is a mandatory field.
4. You may include some content that would appear below the Title and above the webform itself. This is
optional. It would typically be used to describe the webform and include any relevant instructions.
To do this, enter the desired content into the Body field.
5. Fill in any other fields that you require (e.g. File attachments, Menu settings, etc.).
6. Click Save at the bottom of the page. The Title and Body are now visible on the View tab.
Form Components
You are now ready to begin adding Form Components to your webform. These components consist of the
questions and other elements that will make up your webform.
If you are not already there, go to the Webform tab, then the Form components sub-tab. You will see a list of
existing components in this webform (there are none to begin with) and space to add new components.
2 | P a g e March 2015
1. Enter a Label into the New component name field. This will be the actual question that you are asking.
For example, if you need to ask “What day did you attend Drupal training?”, then that is what you
should enter into the New component name field under the Label column.
Note: Components are not numbered in webforms. Therefore, if you want your components (or questions)
numbered, enter the relevant number or letter as part of the Label, or New component name (e.g. “1. What
day did you attend Drupal training?”).
2. Next, select the Type of component by choosing an option from the drop-down menu.
3 | P a g e March 2015
There are several types to choose from. Below is a summary. Each will be described in more detail in
step 6. (To quickly see more information about most of the component types below, click their title.)
Component
Description
Type
Date
Used for selecting a date
E-mail
Used for entering an email address, which may be used for you to collect email
addresses, but may also be used to send a copy of the webform submission to the user
Fieldset
Used for grouping components together in sections
File
Used for attaching files to a submission
Grid
Used for listing multiple questions as rows, with multiple answers for each question as
columns – useful for ranking-type questions, for example
Hidden
Used for inserting information hidden to the user, but available to the site administrator
– contact WCM Support to use this component
Markup
Used for entering Basic page-type content into the webform (e.g. text, images, links –
not a question on the webform, but perhaps some text explaining the purpose of the
next components listed on the webform)
Number
Used for entering a numeric value (e.g. ID number)
Page break
Used for creating a page break, thereby splitting up the webform into multiple pages
Select options
Used for multiple choice-type questions
Textarea
Used for creating a large textbox (which may be resized by the user) for the user to enter
free-form text
Textfield
Used for creating a single-line textbox for users to enter free-form text
Time
Used for selecting a time
4. You may choose to make responding to a component mandatory or not. By checking off the Required
checkbox, users will not be able to make a submission without filling in that component.
5. Click the Add button.
4 | P a g e March 2015
6. Depending on the component Type selected, you will now be prompted to adjust a variety of settings.
With all types, however, you can change the Label (or component name - do not worry about the Field
Key), enter a Default value, enter a Description (which will appear in small font directly below the
component when viewed on the webform), or change the Required setting. You may also select
whether the Label display is set to Above or to the left of the component (Inline), or not at all (None).
With all components, be sure to click Save component at the bottom of the page when you are done.
Some component specific settings for each Type are as follows:
5 | P a g e March 2015
a. Date: In the Year drop-down menu that will be presented to users, you can specify how many
years to offer. The default setting is ± 2 years (e.g. If it is currently 2015, the list will include years
from 2013 to 2017.). You may change the Start date and End date to suit your needs. If you
prefer that users manually type in a year, check off Use a textfield for year.
Enable popup calendar is selected by default and presents users with a clickable calendar to
select the date, rather than using the drop down menus.
When saved, the Date component will look similar to this:
Note: The red asterisk beside the Label (or component name) indicates that this component is mandatory.
b. E-mail: Aside from using this component type to collect email addresses, you may also use this
component to provide users the ability to receive a copy of their own submissions. This will be
explained later on page 23.
When saved, the E-mail component will look similar to this:
6 | P a g e March 2015
c. File: You can limit the file types and file size that users may attach as part of their webform
submissions.
The Max upload size is set to 100 MB.
Allowed file extensions is where you can specify what file types users may attach, or upload.
The default file extensions checked off are all for Web images, but you may add and remove as
necessary from any Category. You can select all file extensions in a given Category by clicking
the select link to its right.
If you are expecting users to attach large files, you may wish to change the Progress indicator
to Bar with progress meter. However, that option will take more space on your webform.
When saved, the File component will look similar to this:
7 | P a g e March 2015
d. Grid: Ideal for soliciting responses to one or more questions based on a scale, the Grid
component has a number of settings to consider.
First, you must enter the Options users will choose from. These will serve as the responses to the
Questions and will be listed across the top of the grid. Enter one value into each field. Three
fields are listed by default, but you may add or remove options using the + and x icons off to
the right.
Next, enter the Questions. As above, one question will be entered per field. If you need more or
less than three questions, use the + and x icons off to the right to adjust accordingly.
Finally, you have the option to Randomize the Options and/or Questions.
When saved, the Grid component will look similar to this:
8 | P a g e March 2015
e. Markup: To insert static content on a webform, like text, images, or links (perhaps to provide an
explanation part way through the webform), the Markup component uses the same rich text
editor found in the Body of a Basic page.
When saved, the Markup component will look just as it would on a Basic page, placed between
the components you have chosen:
Note: The Label (or component name) is not displayed in the Markup component.
9 | P a g e March 2015
f.
Number: There are many options to consider when using the Number component.
If only whole numbers are acceptable, check off Integer and users will not be able to enter
numbers with decimal places. You can specify a Minimum and Maximum numeric values (e.g. 1
to 100). If the numbers entered must follow a specific increment (e.g. 5, 10, 15, etc.), enter the
minimum increment in the Step field (e.g. 5).
The default Element type is to provide users
with a Text field for them to type the relevant
number in, but you can change it to a Select list
where they would choose from a drop-down
menu. In the latter case, you will need to specify
Minimum and Maximum values.
Prefix and Postfix text may be included (e.g. $,
%). The number of Decimal places and what the
Decimal point and Thousand separator should
be (period or comma) can also be specified.
If statistical analyses will be conducted on the
numbers collected, entries of zero or that are
blank may be excluded when counting
submissions to calculate average and standard
deviation by checking off Exclude zero.
10 | P a g e March 2015
When saved, the Number component will look
similar to this:
g. Page break: When splitting a webform into more than one page, the Page break form
component simply needs to be placed between the components where the split should occur.
By default, the buttons that will appear at the bottom of each page
of your webform will be labelled as Next Page > and < Prev Page.
You may change the labels as you see fit with the following fields:
Note: A progress bar is automatically activated when page breaks are used. To learn more, refer to the Form
Settings section (step 7, page 26).
h. Select options: Multiple choice is another name for Select options. Enter the Options users will
choose from in the Value fields. Enter one value into each field. Three fields are listed by default,
but you may add or remove options using the + and x icons off to the right. To have a particular
option already selected by default for users, which they may change as necessary, click the
Default radio button beside the option of your choice.
Users can only select one option by default. To allow users to select multiple options, check off
Multiple. Instead of round radio buttons, square checkboxes will be displayed instead.
Checking off Allow “Other…”
option allows users to enter
an option not on the list.
11 | P a g e March 2015
To save space on your webform, you can display your Select options in a drop-down menu by
checking off Listbox.
The order of the options may be randomized by checking off Randomize options.
When saved, the Select options component will look similar to this:
i.
Textarea: Larger than a single-line Textfield, the actual size may be adjusted. The Width may
not be modified within our templates, but the Height can be. Resizable is checked off by
default and that allows the user to
resize the height of the box.
A Placeholder may be added and
will appear in the field until the user
begins entering a value.
When saved, the Textarea component will look similar to this (if permitted, the user can resize
the box by dragging the handle at the bottom):
12 | P a g e March 2015
j.
Textfield: The maximum length of what users may enter into the Textfield may be specified (in
number of characters) in the Maxlength field. The Width of the box may be modified (to a
certain extent). A Placeholder may be added and will appear in the field until the user begins
entering a value. Prefix or Postfix (e.g. $, %) values may be included.
When saved, the Textfield component will look similar to this:
k. Time: You can choose the Time format (12 or 24 hour) and what Minute increment is
appropriate (from 1 minute to 30 minute increments).
When saved, the Time component will look similar to this:
13 | P a g e March 2015
l.
Fieldset: If you need to group a few components together, you must use the Fieldset
component.
You may make it Collapsible so that the user can open or close the Fieldset (it will initially
appear open – or expanded) and you may force it to be Collapsed by Default when initially
viewed (in that case, the user will have to click to open the Fieldset).
Once saved, you must place the Fieldset component before the components you wish to group
together. (To illustrate this and how to add components to an existing Fieldset, the File and Grid
components discussed above will be used.)
Hover your mouse pointer over the left-hand side of the Form components list (over the small
triangles at the beginning of each row) and a four-headed arrow will appear.
14 | P a g e March 2015
This indicates that you can click and drag a row (i.e. component) to where it needs to be.
When a component is moved in this fashion, an asterisk appears beside its Label indicating that
this change must be saved in order to take effect.
15 | P a g e March 2015
Next, the components that are to be included within the Fieldset must be indented by moving
each component slightly to the right (by hovering over the small triangles until the four-headed
arrow appears, then clicking and dragging that row to the right).
Again, an asterisk appears beside the Label indicating that this change must be saved.
Once all components have been moved, be sure to Save the changes.
Note: Rows may also be arranged up and down the list by Weight. To do this, click the Show row weights link
found above the right-hand most column of the Form components table. When in this mode, you cannot
drag-and-drop. Indenting rows to place them within a Fieldset cannot be accomplished by Weight, therefore
you would have to Hide row weights to go back to the drag-and-drop method.
When saved, the Fieldset component will look similar to this:
16 | P a g e March 2015
The Form components sub-tab will now list all the components that have been added to the webform, in their
correct order, including any Fieldset groupings, Markup, and Page break components.
You may return to this list and use the links on the far right to Edit or Delete any of the components. You may
also Clone a component if you need to create an additional similar component. Component order may be
rearranged and more components may be added, as well.
17 | P a g e March 2015
Conditionals
To have a component appear or not, based on a previous response, you will need to define Conditional
actions.
For example, you already have a Select options component on your webform asking what the user’s favourite
day of the week is. If they answer Monday, you want more information to help you understand why. Therefore,
you want a Textarea component to appear for the user to provide an explanation if, and only if, they select
Monday as their answer.
1. If you are not already there, go to the Webform tab, then the Conditionals sub-tab. You will see a list
of existing conditional actions in this webform (there are none to begin with).
2. Click the + button to add a conditional action.
3. First, you need to select which component will drive the action. This is chosen from the If drop-down
menu. In this example, we will select the component called “What is your favourite day of the week?”
4. Next, you need to select which response to the chosen component will the trigger the conditional
action: has the user entered a response (is not empty) or not (is empty), or whether the user has
selected a particular response (is) or not (is not). In this example, we want to know why someone would
choose Monday as their favourite day of the week, so we need to select is and “Monday”.
5. Finally, you need to select whether the above conditions will cause another component to appear or be
hidden. In this example, we want the above selections to make a component to appear, so we will
choose show (rather than hide) and then choose which component to show, in this case the component
called “Why
Monday?”
6. When the
conditional rule is
fully defined, click
Save conditions.
18 | P a g e March 2015
Form Validation
Validation rules can be applied to form components in order to ensure that only certain kinds of data are
collected. For instance, if you want to ensure that someone can only enter numbers into a Textfield, you can
apply the Numeric values validation rule to that component.
To apply a validation rule, click the Webform tab, followed by the Form validation sub-tab. Select the
validation rule that you need. You will be required to give the validation rule a name, select which components
it applies to (only eligible component types will be offered) and, depending on the rule selected, there may be
more settings to consider.
When complete, click the Add rule button, and the rule will appear at the top of the rule list.
Please contact WCM Support at http://www.ucalgary.ca/it/help if you have questions about how to use any of
the Validation rules.
19 | P a g e March 2015
E-mails
E-mails can automatically be sent to one or more e-mail addresses whenever a webform submission is made.
They may be sent to an e-mail address specified by the webform creator, or to an e-mail address entered by
the user filling out an E-mail component in the webform.
E-mails sent to an address specified by the webform creator
1. Click the Webform tab, followed by the E-mails sub-tab.
2. Enter the e-mail address that webform submissions should be sent to by filling in the Address field.
Multiple addresses may be included, each separated by commas.
3. Click Add.
4. You can adjust the e-mail address in the Custom field under the E-mail to address heading.
20 | P a g e March 2015
5. The E-mail header details that the e-mail recipient sees when receiving a submission can be
customized, if required. The E-mail subject, E-mail from address, and E-mail from name can all be set
to one of the following three options:
a. Default: The default E-mail subject heading will be “Form submission from: <title of
webform>”.
The default E-mail from address and E-mail from name are based on the site’s default settings
(found in the Administration menu under Configuration > System > Site information > Site
details).
All default values are displayed in italics to the right of the Default option.
b. Custom: You can change any of E-mail header details to whatever you like by selecting
Custom and entering the desired value.
c. Component: You can choose a component from your webform for any of the E-mail header
details. The response made to the given component will be used. Only valid components will be
available to choose from.
21 | P a g e March 2015
6. The format of the body of the e-mail itself may also be modified. The E-mail template is initially based
on the Default template, which includes text and tokens to indicate the following:
a. The date of the submission.
b. Who made this submission, if the person filling out the webform is logged in. Otherwise, it will
be listed as anonymous.
c. The values – or answers – from all the components on the webform.
d. A hyperlink to the submission results on the site where the webform is housed. This link will only
work if the person clicking it has access to log into the site as a site administrator.
You may change the template as you see fit, using text and any available tokens found by clicking the
Browse available tokens link immediately below the template.
By default, responses to all components are included in the e-mail. To change this, click the Included email values link and select whichever components you wish to include.
7. Click Save e-mail settings at the bottom of the page.
22 | P a g e March 2015
E-mails sent to an address entered by the user filling out an E-mail component
The E-mail component is used for collecting e-mail addresses, but this option is also useful for providing users
an e-mail copy of their own submission.
1. Click the Webform tab, followed by the E-mails sub-tab.
2. Click the Component value radio button.
3. Select from the list of valid components. All E-mail components in the webform will be listed.
4. Click Add.
5. You can change the Component selected from the drop-down menu under the E-mail to address
heading.
6. The remaining settings are identical to pervious section. Please refer to steps 5 through 7 in the E-mails
sent to an address specified by the webform creator section above.
E-mails list
Once you have added E-mail to recipients to the webform, you will see them listed along with links to Edit,
Clone, or Delete them.
23 | P a g e March 2015
Form Settings
What a user experiences when submitting a webform, as well as who can submit and how often, is defined here.
1. Click the Webform tab, followed by the Form settings sub-tab.
2. The default Confirmation page that will appear when a user makes a submission states “Thank you,
your submission has been received.”, followed by a “Go back to the form” hyperlink.
If you want to change this, you have the option to enter a different Confirmation message.
Alternatively, you can change the Redirection location from the Confirmation page to a Custom URL
(which opens in the same browser tab/window) or have No redirect, which simply reloads the webform.
24 | P a g e March 2015
3. If you need to limit the total number of submissions that can be made to the webform, switch the Total
submissions limit from Unlimited to a Limit to value. You can then go further and specify if this is an
absolute limit (ever) or the limit per minute, five minutes, hour, day, or week.
4. If users must log into your site to complete the webform, you can also specify the number of times a
given user may submit the webform under the Per user submission limit. If people do not log into
your site, then this limit cannot be applied because they would all be considered anonymous users.
5. By default, once you create a webform, it is ready to receive submissions. If you wish to prevent further
submissions, select Closed under the Status of this form.
6. Most webforms are for anonymous users (i.e. people who are not logged into the site). By default, an
anonymous user and an authenticated user (i.e. someone who is logged in) are permitted to make
submissions. If you need to change these settings, select what you need under Roles that can submit
this webform, found in the Submission access section.
25 | P a g e March 2015
7. If you include the Page break component type in your webform, a Progress bar will automatically be
enabled. This will show users how far along they are in the webform. The first page of the webform is
labelled Start by default and the confirmation page at the end is labelled Complete. Please note that
subsequent webform pages will display page labels on the progress bar based on the Label you gave
to the respective page break components. You may choose to hide these page labels, change the
default labels, disable the progress bar altogether, or configure other settings to meet your needs.
The will Progress bar will appear below the webform’s Title and any text entered into Body field and
above the Form components, as illustrated below.
Note: The example above shows a Progress bar on a two-page webform. The default “Start” is being used for
the first page and the default “Complete” for the Confirmation page at the end. There is one Page break
(thereby creating the two pages) and it is labeled “Page 2”. This example is also using a Preview page (See step
8 below to learn more about the Preview page.
26 | P a g e March 2015
8. You can give users a chance to preview their submission before actually submitting it by having them
click a Preview button at the bottom of the webform before submitting it. To enable this, click on the
Preview page header to open that section and check off the Enable preview page box that appears.
Several options will appear. You can configure the Preview page title (or use the default: Preview) and
you can also specify the Preview button label and the Previous page button label (defaults: Preview
and <Previous, respectively). You can also include a Preview message and select which form
components should be Included preview values.
Note: Enabling the Preview page will also enable the Progress bar, if it is not already in use. See step 7
immediately above to learn more about the Progress bar.
27 | P a g e March 2015
9. Under the Advanced settings section, you may change the default label displayed on the Submit
button (the default is “Submit”) by entering a new value in the Submit button label field.
The Show “Save draft” button, Automatically save as draft between pages and when there are
validation errors, and Show the notification about previous submissions options only apply to
authenticated users (those who are logged in).
Please contact WCM Support at http://www.ucalgary.ca/it/help if you have questions regarding the
Available as block and Next submission number options.
10. Click Save configuration.
28 | P a g e March 2015
Results
All submissions from a given webform will be stored in the webform itself, under the Results tab.
To view a submission, click the View link beside that submission. Files collected using a File component type
will be found by viewing individual submissions.
Submissions may be edited by clicking the Edit link.
If required, a submission may be deleted by clicking the Delete link. To delete all submissions, click the Clear
sub-tab.
Note: If you delete a submission or clear all submissions from the webform, these actions cannot be undone.
The Analysis sub-tab will give you the overall results for each component, showing various statistics, depending
on the component type.
The Table sub-tab will show you each submission, including all answers, selections, and text entries, in a table
format.
The Download sub-tab offers you the option to download all current submissions to your computer. You may
download the results in Delimited text (e.g. .csv) or Microsoft Excel (e.g. .xlsx) formats. Options exist to specify
how to download results from Select components, which components to download (all, by default), and what
range of submissions to download (e.g. based on time, when you last downloaded, etc.).
Finally, the Clear sub-tab is used for deleting all submissions to a given webform. Please be careful with this
option since you cannot undo this action.
29 | P a g e March 2015