Drupal Training Series

Drupal Training Series • Foundations of OSU Drupal 6: • 203: Form Development with Webform

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 • Overview • CAPTCHA • 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 fft-admin@fft.com. • In the Footer message field paste in the text from Section Ex. 01. • Click the Save configuration button. 1 2 3 4

General Settings: Site Information – Ex. 01 Change Site Name & Footer - Completed • 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: 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: • 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. • Click the Save configuration button. Post Settings 1 2

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. Before After

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: • Click on the Add category tab. • In the Category field enter Rasheed Abdul. • In the Recipients field enter rasheed.abdul@fft.com. • Click the Save button. 1 2 3 4

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: • Click on the Add category tab. • In the Category field enter Web Administration Team. • 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. 1 2 3 4 5 6 7

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

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.

Contact Form: Ex. 03 Configure Contact Form – Add Contact Us Menu Link • To add the Contact Form to a menu go to Admin menu > Site building > Menus > Primary Links > Add item tab and do the following: • In the Path field enter contact. • In the Menu link title field enter Contact Us. • In the Parent Item field select -- Home. • In the Weight field select -48. • Click the Save button. • 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… 1 2 3 5 4

Contact Form: Ex. 03 Configure Contact Form – Add Contact Us Footer Link • 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… 1 3 2

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: • The CAPTCHA supplies an image of text which the user must spell out in the accompanying field. • If the CAPTCHA is too distorted, the user can load a new image using the Reload button. • 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… 2 3 1

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: • In the Title field enter Recipe Submission Form. • Click on the Menu settings fieldset to open it. • In the Menu link title field enter Send Us Your Recipe!. • In the Parent Item field select -- Home. • In the Weight field select -48. • In the Body field paste the text from Section Ex. 05a. • Click the Save button. 1 2 3 4 5 6 7

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: • Note the extra tab. The Webform tab is where you go to edit your webform if you ever need to edit it. • The Form components tab is where the Component List resides. • The E-mails tab is where e-mail configurations are made. • The Form settings tab is where form settings are configured. • So let’s add some components… 1 4 2 3

Webform: Ex. 05 Create Recipe Submission Form – Add Recipe Title Textfield Component • To add a Recipe Title textfield component, do the following: • In the New Component Name field enter Recipe Title. • Check the Mandatory checkbox. • Click the Add button. 1 2 3

Webform: Ex. 05 Create Recipe Submission Form – Configure Recipe Title Textfield Component • In the Recipe Title configuration panel, do the following: • In the Description field Please enter your recipe’s title. • In the Maxlength field enter 75. • Click the Save component button. 1 2 3

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: • In the New component name field enter Your First Name. • Check the Mandatory checkbox. • Click the Add button. 2 3 1

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: • In the Description field enter Please enter your first name. • In the Maxlength field enter 40. • Click the Save component button. 1 2 3

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: • In the Your First Name row, click the clone link. 1

Webform: Ex. 05 Create Recipe Submission Form – Configure Your Last Name Textfield Component • Once the clone’s configuration panel shows, do the following: • In the Label field, change the word First to Last. • In the Field Key field, change the word first to last. • In the Description field, change the word first to last. • Click the Save component button. 1 2 3 4

Webform: Ex. 05 Create Recipe Submission Form – Create an Email Component • Now let’s create a Your E-mail field: • In the New Component Name field, enter Your E-mail. • Check the Mandatory checkbox. • Click the Add button. 3 2 1

Webform: Ex. 05 Create Recipe Submission Form – Configure Your E-Mail Component • Once the configuration panel shows, do the following: • Check the User email as default checkbox. • In the Description field, enter Please enter your e-mail address. This information will be kept private. • Check the Private button. • Click the Save component button. 1 2 3 4

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: • In the New component name field enter Your Contact Information. • In the Type field choose Fieldset. • Click the Add button. 1 2 3

Webform: Ex. 05 Create Recipe Submission Form – Configure Fieldset Component • In the Your Contact Information configuration panel, do the following: • Check the Collapsible checkbox. • Click the Save component button. • 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. • Click the Save button. 1 2 3

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. 2 3 1 4

Webform: Ex. 05 Create Recipe Submission Form – Configure Course Option Component • In the Course configuration panel, do the following: • In the Description field enter Select the course that best applies to this recipe. • In the Options field, paste in the text from Section Ex. 05b. • Click the Save component button. 1 2 3

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. 2 4 3 1

Webform: Ex. 05 Create Recipe Submission Form – Configure Ingredients Text Area Component • In the Ingredients configuration panel, do the following: • In the Description field enter Please add all ingredients and measurements. • Click the Save component button. 1 2

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. 1 4 2 3

Webform: Ex. 05 Create Recipe Submission Form – Configure Directions Text Area Component • In the Directions configuration panel, do the following: • In the Description field enter Please add the directions to create this recipe. • Click the Save component button. 1 2

Webform: Ex. 05 Create Recipe Submission Form – Add Photo File Component • To add the Photo file component, do the following: • In the New component name field enter Photo. • In the Type field choose File. • Click the Add button. 3 1 2

Webform: Ex. 05 Create Recipe Submission Form – Configure Photo File Component • In the Photo configuration panel, do the following: • In the Description field enter If you have a photo of your recipe, you may upload it here. • 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. • Click the Save component button. 1 2 3

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: • Click the E-mails tab. • Select the Address option. • Enter your work e-mail address in the field to test the e-mail. Remember, this can always be changed at a later date. • Click the Add button. 1 2 3 4

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: • Click the Save e-mail settings button. 1

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. 1 2 3 4

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. 1 2 3 4 4

Drupal Training Series