Drupal Training Series

This work is licensed under a Creative Commons Attribution-

NonCommercial-ShareAlike 3.0 United States License

Drupal Training Series

Foundations of OSU Drupal 6:203: Form Development with Webform

Provided by Central Web Services541-737-1189http://oregonstate.edu/cws 2

What We’ll Be Covering…

General Site Settings• Overview• Ex. 01 Change Site Name & Footer Info• Ex. 02 Change Post Information Settings

Contact Form• Overview• Ex. 03 Configure Contact Form

Spam•OverviewCAPTCHA

• Overview• Ex. 04 Checking out CAPTCHA

Webform• Overview• Ex. 05 Create a Recipe Submission Form• Ex. 06 Analyzing Results

Summary


Getting Started

As a reminder, to get to your personal development site go to:

http://drupaldev.cws.oregonstate.edu/training/<yourONIDname>/login

From there, log in with your ONID information.

After logging in, please open a second tab in your browser, go to CWS Training at:

http://oregonstate.edu/cws/training

and download the workshop materials to your desktop


Where We’re At…

Currently, your site should look somewhat similar to what’s shown at left.

• A Home page with correct content in it.• A Cooking Companion menu item which leads to the

Cooking Companion book.• Various blocks in the post-content and right sidebar

regions of the Home page.

Parts of exercises that we will be doing today will require that you have some content in your site that uses a content type other than Page.

If you do not have this content available, you will not see the expected results of some of the exercises.


General Settings: Overview

This workshop is devoted to audience interaction. We will be using the built-in Contact Form, as well as using the Webform module to create more in-depth forms that our audience can use to communicate with us.

Given this fact, it would now be a good idea to address a few general side topics that better help us to identify our site.

In this section, we’ll focus on:• Changing the Site name that displays in the header.

• Changing the Footer information at the bottom of our screen.

• Adjusting the Post information settings, which serve as a by-line on nodes.

So, let’s get started with that site name…


General Settings: Site Information – Ex. 01 Change Site Name & Footer

To change the site name, go to Admin menu > Site configuration > Site information and do the following:

• In the Name field enter Food for Thought.

• In the E-mail address field enter [email protected].

• In the Footer message field paste in the text from Section Ex. 01.

• Click the Save configuration button.

11

22

33

44


Your site name and footer information will now be changed on every page within the site.

The e-mail account that has been entered is a fictitious account. For a real e-mail account, this would be the e-mail that would show up as the default contact e-mail for the site.

Please note the Default front page field – do not change the URL alias in this field unless you know what you are doing, as it will cause your current front page to disappear.

General Settings: Site Information – Ex. 01 Change Site Name & Footer - Completed


General Settings: Post Settings – Ex. 02 Change Post Information Settings

Post Information is the by-line information that shows on some of your nodes. To change the Post information settings we need to take a trip into the theme configurations, so go to Admin menu > Site building > Themes > Configure > Global settings and do the following:

1. In the Display post information on fieldset, uncheck all of the checked content types.

Note that Page is already unchecked, which is why you don’t see any post information on the front page.

2. Click the Save configuration button.

22

Post SettingsPost Settings

11


General Settings: Post Settings – Ex. 02 Change Post Settings – Completed

Now, when visiting any existing content on your site, there will be no post information displayed on any of the nodes.

Please note, that if additional content types are added, either through module additions or via CCK, the Post information settings will have to be adjusted if you wish to hide them.

BeforeBefore

AfterAfter


Contact Form: Overview

Contacting a member of your organization via the web is a feature that most audience members now expect when they visit a site.There is a right way and a wrong way to do this, though.Things you want to avoid:

• Directly publishing the text of your e-mail recipient’s address.Why? When an e-mail address using a valid format is published on a web page, this text is scanable. This text can then be scanned and harvested by bots, which in turn will then spam the person whose address you have published.

• Using a mailto: link that automatically opens up an e-mail client on a person’s computer.

Why? Using a mailto link assumes that your user either has something like Microsoft Outlook installed on their computer or uses Windows Live Mail, Yahoo! Mail, or Gmail – this might not be the case.

The best way to deal with e-mail from the web is to use a webmail interface. Drupal has one that’s built in and ready for you to configure and use. So let’s figure out how to do this…


Contact Form: Ex. 03 Configure Contact Form – Contact Form List

Go to Admin menu > Site building > Contact form to view a list of all contacts.Currently, we have no contacts listed, but note the table, especially the Category and Recipients columns. While you can set up individual e-mail accounts, the Contact form will also allow you to set up e-mail lists, whereby you can send an e-mail to multiple people at the same time.Let’s start by creating an individual e-mail contact and then we’ll do a group one.


Contact Form: Ex. 03 Configure Contact Form – Create Category – Individual

To create a category for an individual person, do the following:

1. Click on the Add category tab.

2. In the Category field enter Rasheed Abdul.

3. In the Recipients field enter [email protected].

4. Click the Save button.

11

22

33

44


Contact Form: Ex. 03 Configure Contact Form – Create Category – Individual – Addition to List

You will be redirected back to the Contact List after submitting the contact information.Your new individual contact will appear in the list.Now, let’s add a group to the list.


Contact Form: Ex. 03 Configure Contact Form – Create Category – Group – Add Contact

To create a category for a group person, do the following:

1. Click on the Add category tab.

2. In the Category field enter Web Administration Team.

3. In the Recipients field paste the email addresses provided in Section Ex. 03a of your lab materials.

Note: separate e-mail addresses with a comma.

• In the Auto-reply field paste the corresponding text provided in Section Ex. 03a of your lab materials.

• In the Weight field select -10.• In the Selected field select Yes.• Click the Save button.

11

22

33

44

66

55

77


Contact Form: Ex. 03 Configure Contact Form – Create Category – Group – Addition to List

You will be redirected back to the Contact List after submitting the contact information.Your new group contact will appear in the list.So now, let’s add the rest of our organization’s people.


Contact Form: Ex. 03 Configure Contact Form – Now You Do It

Using Section Ex-03b, add the remaining members of our organization. Add your own work e-mail at the end under the category Test E-mail so you can test everything when finished.

Category field = Use the name supplied in the e-mail address.

Recipients field = paste in provided email address for the individual from Section Ex. 03.

Click the Save button

Using Section Ex-03b, add the remaining members of our organization. Add your own work e-mail at the end under the category Test E-mail so you can test everything when finished.

Category field = Use the name supplied in the e-mail address.

Recipients field = paste in provided email address for the individual from Section Ex. 03.

Click the Save button


Contact Form: Ex. 03 Configure Contact Form – Test the Contact Form

Once a Contact List has been established, to view the form, you simply type the word contact after your site root in your browser’s address bar and the form will appear.Open a new tab in your browser and test out your Contact Form by sending an e-mail to yourself using your Test E-mail category.You’ll need to open up your work e-mail and wait a minute to see the e-mail appear.Now, we should create a link in our menu so our audience can contact us.


To add the Contact Form to a menu go to Admin menu > Site building > Menus > Primary Links > Add item tab and do the following:

1. In the Path field enter contact.

2. In the Menu link title field enter Contact Us.

3. In the Parent Item field select -- Home.

4. In the Weight field select -48.


6. Test your link by hovering over the Home menu item in your top menu bar and then clicking on Contact Us.

We should also add a Contact Us link to our footer…

Contact Form: Ex. 03 Configure Contact Form – Add Contact Us Menu Link

11

22

33

44

55


To add a Contact Us footer link, travel back into the Site Information panel at Admin menu > Site configuration > Site information and do the following:

• In the Footer message field, at the bottom of the text in there, paste the HTML code from Section Ex. 03c at the end of your address information but within the paragraph tags.

• Click the Save configuration button.• Go to some non-admin page and test your

Contact Us footer link by clicking on it.

We’re in pretty good shape in terms of the Contact Form now, so let’s talk about CAPTCHA…

Contact Form: Ex. 03 Configure Contact Form – Add Contact Us Footer Link

11

22

33


SPAM: Overview

We are now opening our site up to interaction from the outside world. When supplying forms of any type to an external audience, security concerns always become elevated.

A common issue that arises when external forms are used is spam. Spam is unsolicited, junk e-mail – often of a commercial (and/or dubious) nature that is sent indiscriminately, and often in bulk, to peoples e-mail accounts.

The University of Iowa Information Technology Services department estimates that the total yearly cost for individual employees to deal with spam is $79.86. Multiply this by 5000 employees and you get a dollar loss of almost $400,000 a year. This doesn’t even count the cost on equipment or legal issues.

If a site is opened to an external, anonymous audience via a form, the site administrator has no idea who is going to respond to the form. This is where CAPTCHA comes in to help.


CAPTCHA: Overview

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is a challenge-response test designed to differentiate between humans and automated programs (bots) that crawl the web and exploit external forms.

The CAPTCHA test can vary, there are different programs that create different types, but in general it sets some kind of task that is fairly easy for most humans to perform but difficult for a bot to.

The Contact Form has been set up to automatically introduce a CAPTCHA for anonymous users, but allow people who are logged in to the site to bypass the test.

We’ll take a general look at CAPTCHA from an anonymous perspective now, and then when we start creating our webforms, we’ll revisit it to learn how to add CAPTCHA to the webforms we create.


CAPTCHA: Ex. 04 Checking out CAPTCHA – Open Internet Explorer

CAPTCHA, in our case, is best examined as an anonymous user.

Don’t log out of your site, though. We can easily take a look at things if we just open another browser, so pop open a different browser such as Internet Explorer, Chrome, or Safari and paste your Contact Form URL in its address bar.


CAPTCHA: Ex. 04 Checking out CAPTCHA – CAPTCHA Close Up

How CAPTCHA works:

1. The CAPTCHA supplies an image of text which the user must spell out in the accompanying field.

2. If the CAPTCHA is too distorted, the user can load a new image using the Reload button.

3. If the user is visually impaired, an option for an audio test is provided by clicking the Audio CAPTCHA button.

Anonymous users will always be presented with this. Authenticated users, those who are logged into SSO, are able to bypass it.So now, let’s get started with some webforms…

1

2

3


Webform: Overview

The Webform module is a highly configurable contributed module that helps Drupal site builders create sophisticated web-based forms that can be used by an external audience.

The type of form is up to you…a feedback form, questionnaire, survey…Webform provides enough field types to do the job.

Additionally, the Webform module provides an interface to analyze the results gathered from webform submissions, which can then easily be exported in a comma separated list to be used in a spreadsheet application such as Microsoft Excel.

So let’s get started building our Recipe Submission form that will allow our users to submit their own recipes to our organization.


Webform: Ex. 05 Create Recipe Submission Form – Create Webform Node

First we need to create the Webform node, so go to Admin menu > Content management > Create content > Webform and do the following:

1. In the Title field enter Recipe Submission Form.

2. Click on the Menu settings fieldset to open it.

3. In the Menu link title field enter Send Us Your Recipe!.

4. In the Parent Item field select -- Home.

5. In the Weight field select -48.

6. In the Body field paste the text from Section Ex. 05a.


11

22

33

44

55

77

66


Webform: Ex. 05 Create Recipe Submission Form – Component List

A webform is a little bit different than a typical content type. Once the node is saved, you’ll be redirected into the Component List. This is where the form fields are added:

1. Note the extra tab. The Webform tab is where you go to edit your webform if you ever need to edit it.

2. The Form components tab is where the Component List resides.

3. The E-mails tab is where e-mail configurations are made.

4. The Form settings tab is where form settings are configured.

So let’s add some components…

11

22 33 44


Webform: Ex. 05 Create Recipe Submission Form – Add Recipe Title Textfield Component

To add a Recipe Title textfield component, do the following:

1. In the New Component Name field enter Recipe Title.

2. Check the Mandatory checkbox.3. Click the Add button.11 22 33


Webform: Ex. 05 Create Recipe Submission Form – Configure Recipe Title Textfield Component

In the Recipe Title configuration panel, do the following:

1. In the Description field Please enter your recipe’s title.

2. In the Maxlength field enter 75.

3. Click the Save component button.

33

1

2


Webform: Ex. 05 Create Recipe Submission Form – Create a Your First Name Textfield Component

To add a Your First Name textfield component, do the following:

1. In the New component name field enter Your First Name.

2. Check the Mandatory checkbox.

3. Click the Add button.11 22 33


Webform: Ex. 05 Create Recipe Submission Form – Configure Your First Name Textfield Component

You will be redirected to a configuration panel for the Your First Name field. To configure your field do the following:

1. In the Description field enter Please enter your first name.

2. In the Maxlength field enter 40.


33

11

22


Webform: Ex. 05 Create Recipe Submission Form – Clone a Field

We’ll make a Your Last Name field as well. This field will be identical to the Your First Name field with the exception of the term “Last Name”. We can use the clone feature in the Component List to copy our first field and then just make the necessary changes:

1. In the Your First Name row, click the clone link.

11


Webform: Ex. 05 Create Recipe Submission Form – Configure Your Last Name Textfield Component

Once the clone’s configuration panel shows, do the following:

1. In the Label field, change the word First to Last.

2. In the Field Key field, change the word first to last.

3. In the Description field, change the word first to last.


44

11

22

33


Webform: Ex. 05 Create Recipe Submission Form – Create an Email Component

Now let’s create a Your E-mail field:

1. In the New Component Name field, enter Your E-mail.

2. Check the Mandatory checkbox.3. Click the Add button.

11 22 33


Webform: Ex. 05 Create Recipe Submission Form – Configure Your E-Mail Component

Once the configuration panel shows, do the following:

1. Check the User email as default checkbox.

2. In the Description field, enter Please enter your e-mail address. This information will be kept private.

3. Check the Private button.


11

22

33

44


Webform: Ex. 05 Create Recipe Submission Form – Add Fieldset Component

Sometimes, when you have a group of related data on a form, such as contact information, it makes sense to visually combine them together in what is known as a fieldset.To add a Your Contact Information fieldset component, do the following:

1. In the New component name field enter Your Contact Information.

2. In the Type field choose Fieldset.3. Click the Add button.

11 22 33


Webform: Ex. 05 Create Recipe Submission Form – Configure Fieldset Component

In the Your Contact Information configuration panel, do the following:

1. Check the Collapsible checkbox.2. Click the Save component button.3. Upon returning to the Component

Manager, drag the Your First Name, Your Last Name, and Your E-mail components into the Your Contact Information fieldset.


11

2

33


Webform: Ex. 05 Create Recipe Submission Form – Add Course Option Component

Sometimes you may want to limit the options your audience can enter into a field. To do this we need an option group.To add the Course option component, do the following:

• In the New component name field enter Course.

• In the Type field choose Select options.

• Check the Mandatory checkbox.• Click the Add button.

11 22 33 44


Webform: Ex. 05 Create Recipe Submission Form – Configure Course Option Component

In the Course configuration panel, do the following:

1. In the Description field enter Select the course that best applies to this recipe.

2. In the Options field, paste in the text from Section Ex. 05b.


33

11

22


Webform: Ex. 05 Create Recipe Submission Form – Add Ingredients Text Area Component

At times you may need a larger area to input more text in than what a normal text field allows. For this you will need a text area.To add the Ingredients text area component, do the following:

• In the New component name field enter Ingredients.

• In the Type field choose Textarea.• Check the Mandatory checkbox.• Click the Add button.

11 22 33 44


Webform: Ex. 05 Create Recipe Submission Form – Configure Ingredients Text Area Component

In the Ingredients configuration panel, do the following:

1. In the Description field enter Please add all ingredients and measurements.


22

11


Webform: Ex. 05 Create Recipe Submission Form – Add Directions Text Area Component

To add the Directions text area component, do the following:

• In the New component name field enter Directions.

• In the Type field choose Textarea.• Check the Mandatory checkbox.• Click the Add button.

11 22 33 44


Webform: Ex. 05 Create Recipe Submission Form – Configure Directions Text Area Component

In the Directions configuration panel, do the following:

1. In the Description field enter Please add the directions to create this recipe.


22

11


Webform: Ex. 05 Create Recipe Submission Form – Add Photo File Component

To add the Photo file component, do the following:

1. In the New component name field enter Photo.

2. In the Type field choose File.3. Click the Add button.

11 22 33


Webform: Ex. 05 Create Recipe Submission Form – Configure Photo File Component

In the Photo configuration panel, do the following:

1. In the Description field enter If you have a photo of your recipe, you may upload it here.

2. In the table, we don’t need to make any changes, but note that there are many different file extensions for photos, documents, and other media.


33

11

22


Webform: Ex. 05 Create Recipe Submission Form – Add E-mail Recipient

E-mail settings are available if you would like to have notifications of when a form is submitted. There are a couple of ways this can be configured, either by designating a static e-mail recipient, or by creating a component with e-mail addresses as keys – we’ll use the static method for now:

1. Click the E-mails tab.2. Select the Address option.3. Enter your work e-mail address in the

field to test the e-mail.Remember, this can always be changed at a later date.

4. Click the Add button.

11

22 3344


Webform: Ex. 05 Create Recipe Submission Form – Configure E-mail Settings

You will be redirected to an e-mail configuration panel. In this panel you can configure things such as a Subject Line, a From E-Mail Name and Address, and E-Mail Template settings. The default settings here will suffice for our purposes, though:

1. Click the Save e-mail settings button.

11


Webform: Ex. 05 Create Recipe Submission Form – Completed E-mail Settings

Upon completion of the e-mail settings, you’ll be redirected back to the E-mails main panel.

Additional e-mail addresses can be added to this list as needed.


Webform: Ex. 05 Create Recipe Submission Form – Configure Form Settings

We’ll make just a few basic configurations for the form itself by doing the following:

• Click on the Form settings tab.• In the Confirmation message text

area, paste in the text from Section Ex. 05c.

• In the Submission limit option set, enter 2 in the first field and select every day from the second field.

• Click the Save configuration button.

11

44

22

33


Webform: Ex. 05 Create Recipe Submission Form – View Webform

Click the View tab to take a look at your webform.


Webform: Ex. 05 Create Recipe Submission Form – Add CAPTCHA Challenge

The last thing to add to this webform is a CAPTCHA challenge. To add a CAPTCHA, do the following:

• From within the View tab, scroll to the bottom of the form and click on the CAPTCHA: no challenge enabled link.

• Click the Place a CAPTCHA here for untrusted users link that appears.

• You will be redirected to a CAPTCHA point administration page

• In the Challenge type field, select reCAPTCHA (from module recaptcha).

• Click the Save button.

You’ll be redirected back to your webform.

11

22

33

44

44


Webform: Ex. 05 Create Recipe Submission Form – Test Form

Now test out your webform by going into another browser, pasting the address in, and submitting a test form as an anonymous user.

You should receive a message after you submit the form and a notification in your work e-mail.


Webform: Webform Manager - Overview

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 for use in a spreadsheet application such as Microsoft Excel.

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


Webform: Ex. 06 Analyzing Webform Results – Webform Manager

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 groups will display different information about the webform in their corresponding row.

11 22

33


Webform: Ex. 06 Analyzing Webform Results – Submissions

The Submissions list provides a simple list of all submissions for a given webform:

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.

11

22

aa bb cc dd ee


Webform: Ex. 06 Analyzing Webform Results – Analysis

The Analysis list provides a detailed table view of the results for all fields on a given webform:

1. Click on the Analysis tab.2. Included in the Analysis results

are the following:a. Number of times a field is left blank.b. Number of times a field is answered.c. The average submission length of words

for text fields.

11

aa

bb

cc


Webform: Ex. 06 Analyzing Webform Results – Table

The Table list displays the actual data inside each field that is answered:

1. Click on the Table tab.2. 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.

11

22


Webform: Ex. 06 Analyzing Webform Results – Download

Results can be downloaded into a format that can be used in a spreadsheet via the Downloads feature:

• Click the Download tab.• Export format group =

Delimited text.• Delimited text format field =

Comma (,)• Click the Download button.

11

22

44


A dialog box will open:

1. Select Microsoft Office Excel from the drop down list.2. Click the OK button.3. Excel will then open and display the results within the

spreadsheet.

The file can be saved from here, if desired.

Webform: Ex. 06 Analyzing Webform Results – Microsoft Excel Download

11

22

33


Webform: Ex. 06 Analyzing Webform Results – Clear

To clear the results, do the following:

1. Click on the Clear tab.2. Note the confirmation message. If the

results are cleared, they will be gone and irretrievable. Take care when deleting. Click the Cancel link.

11

22


Webform: Ex. 06 Analyzing Webform Results – Access via Webform Node

A webform’s results can be reached while on the webform node as well. Return to Admin menu > Content management > Webforms:

1. Click on the Recipe Submission form link to open the webform node.

2. Click on the Results tab to open the results.

11

22


Summary

You’ve made it through the final intermediate OSU Drupal 6 workshop! In this workshop you learned:

• How to configure some general site settings such as the Site Name, Footer Information, and Post Information settings.

• How to configure the Contact Form.• What CAPTCHA is and how to use it on external forms.• How to build a Webform.

You’re strongly encouraged to continue regularly visiting and working within your training site. At this point, the more time you spend practicing, the more you’ll understand and also discover on your own.Stay tuned for our next training installment, the Generating Custom Content Types workshop, where we move into some advanced concepts concerning the construction of custom content types with the CCK module.


Conclusion

This completes the OSU Drupal 6 tutorial. For additional tutorials, please visit WebTrain, the CWS web publishing training site, at:

http://oregonstate.edu/cws/training/view/training-materials

To view and register for all OSU Drupal 6 Workshops, visit the Professional Development Central Registration site at:

http://oregonstate.edu/cws/register

To submit a Help Ticket or make a Site Request on-line, go to:

http://oregonstate.edu/cws/contact

Documents

Drupal Training Series