UNIVERSITY OF CALGARY Information Technologies WEBFORMS DRUPAL 7 WEB CONTENT MANAGEMENT

UNIVERSITY OF CALGARY Information Technologies WEBFORMS DRUPAL 7 WEB CONTENT MANAGEMENT

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 age

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 age

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 age

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 age

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 age

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 age

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 age

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 age

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 age

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 age

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 age

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 age

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 age

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 age

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 age

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 age

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 age

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 age

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 age

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 age

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 age

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 e- mail values link and select whichever components you wish to include. 7. Click Save e-mail settings at the bottom of the page. 22 P age

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 age

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 age

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 age

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 age

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 age

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 age

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 age