Working With a Webform

Webforms are used to create input forms that allow visitors to submit information.  Only managers can create webforms.  They consist of four main parts:

• Form components—these are the basic form elements that create the form itself (text fields, radio buttons, etc.).

• Conditionals—used to hide or show form components based on the value of other form components.

• Emails—determine who gets form submissions and what the content of those emails look like.

• Form settings—add a submission confirmation message and other settings.

Things to remember

• Although there is an encrypted field to collect WIN numbers, it is important to remember that all other fields in webforms are not secure. You should never ask for information such as a person's Social Security number, credit card numbers or even birth dates.

  For example, collecting birth dates is problematic on two fronts: first it collects personal identification information that could lead to identity theft and security breach issues. Secondly, if this was for something like a music audition, you don't want to have any claims from rejected applicants asserting that the decision to admit was actually influenced by age, which could lead to a discrimination claim.

• The simpler and shorter the form, the better. Simple forms include fields for name, email address, phone, subject and message; and phone is usually optional. Only request information that will actually be used, and only require information that is essential.

• The output from the form may be sent as an email message to one or more addresses—there is no Cc: or Bcc:. Ideal for this purpose is an office email address to which multiple staff members have access, and which is checked at least once each business day. Alternately, the messages may go to two or three individual staff email addresses, with one person assigned primary responsibility, and the others available to cover.

How to create a “Contact Us” webform

Webforms start out very similar to the Basic page content type. This form will include components for name, email, category, subject and message. "Contact Us" is the bottom link in the section menu and is required on nearly all sections.

1. Click on Add content in the administration menu and select Webform.

2. Enter a Title—the title for a "Contact Us" form should be Contact Us.

3. Choose the Section to which this webform belongs, if you have more than one.

4. Add a Custom URL—“Contact Us” webforms should have contact entered into this field.

5. Add text to the Text above the form field if you have particular instructions for your form.

6. Add text to the Text below the form field. Additional contact information should be listed here. It should minimally include a mailing address and main office phone number, formatted exactly as shown in the example below. Other information can include physical location and campus mail stop, secondary phone numbers for major divisions within the office or department, and general office hours. Although a physical location is optional, it should be included to assist visitors in finding you, since most of the University’s mailing addresses are not useful for this purpose.

   
   Office of Marketing and Strategic Communications
   Western Michigan University
   1903 W Michigan Ave
   Kalamazoo MI 49008-5433 USA
   Phone (269) 387-8400
   
   Location
   300E Walwood Hall, Mail Stop 5433
   
   

7. Attach media to the Attachments field if necessary.

8. Press the Save button at the bottom of the page.

Now that you have created the basic page part, we can now add the form elements themselves.

Adding webform fields

1. Click on the Webform button.

2. Under the Label table header, click in the field where it says “New component name” and enter Your name in the field.

3. Leave the Type as Textfield.

4. Check the required box to make this field mandatory.

5. Click Add. On the next page you will be given a series of options to change many variables that you can experiment with, but for most components you will not need to modify any of these settings.

6. Scroll to the bottom of this page and click Save component. This will return you to the Form components view where you will see your component has been added. 

7. Add a field to collect an email address in the form by repeating step 2, except enter Your email in the field.

8. Change the Type to Email.

9. Check the required box to make this field mandatory.

10. Click Add. Again, leave everything on the next page alone.

11. Scroll to the bottom of this page and click Save component.

12. Add a Required component with a Label of  Category  and a Type of Select options and click Save. Now, there are a few things to note:

    • The Select options Type creates radio buttons, checkboxes and select lists—the default is radio buttons.

    • Check the Multiple checkbox to turn the options from radio buttons to checkboxes.

    • Check the Listbox checkbox to turn the options into a drop-down list.

    • Never have both Multiple and Listbox checked, the result is unacceptable for mobile devices.

13. In the Options field enter the following:

    faculty|Faculty
    staff|Staff
    student|Student
    other|Other

    Note that this uses the pipe "|" character which is created by pressing Shift + \.

14. Check the Listbox checkbox, scroll down and click Save component.

15. Add a component with Label Other and Type Textfield to the form.  A conditional will be used to expose this field when someone selects Other from the Category select list.

16. Next, add a Required component with Label  Subject and Type Textfield to our form. Leave everything on the next page the same; scroll to the bottom of the page and click the Save component button.

17. Finally, add a Required component with Label  Message and Type Textarea to our form. Leave everything on the next page the same; scroll to the bottom of the page and click the Save component button.

Setting our conditional element

1. Click on Conditionals

2. Click the plus sign (+) to begin creating the conditional.

3. Determine what should happen when a specific condition is met:

   If Category is other
   then Other is shown

4. Click Save conditions.

Adding emails

1. Click on Emails.

   In the Address field enter the email recipient and click Add.  This will take you to the Edit email settings page.

2. For the Email subject, select the Component radio button and select Subject from the dropdown list.  This will use the submitted Subject value as the subject for the email being sent.

3. For the Email from address, select the Component radio button and select Your email from the dropdown list.

4. For the Email from name, select the Component radio button and select Your name from the dropdown list.

5. For the Email template section, replace the default text with the following:

   Submitted values are:
   [submission:values]
   
   This message was generated from the [current-page:title] at [current-page:url].

   Be sure to experiment with this as you see fit.

6. Click Save email setting.

Modifying form settings

For basic webforms it is recommended that you do not change anything on this page, however there are several things to note:

• Confirmation message—this is the message that is shown to users upon a successful submission.

• Redirection location—this is where the user goes after a successful submission.

• Total submission limit—this limits the total allowed submissions.

• Per user submission—limits the number of submissions per user.

• Status of this form—closes the form and prevents any further submissions.

• Progress bar—displays a progress bar for multi-page forms.

• Advanced settings—contains a few more options, including the ability to rename the "Submit" button text.