Webforms

Use the arrow keys or spacebar to go to the next slide.

Make this presentation full screen for best effect.

Webforms are exactly what you think they might be. They are forms that allows users to submit information on your site. The type of form and information is totally flexible and is something we will be going over throughout this documentation. Webforms require a higher level of access and permissions so it is expected that most users will not have this access. If you do require access to webforms, please submit a ticket to it-help@hms.harvard.edu.

What are Webforms

I wanted to point out that Drupal actually has some decent documentation and videos on your Drupal site. It can be a little difficult to navigate through, however I just wanted to point out that additional resource. To get started, in your Drupal admin menu go to Structure --> Webforms. This will bring you to a page that will list out all of the current webforms on your site. Do not be alarmed if you see some warning or error messages on this page. It is to be expected. To make edits to existing webforms, go to the webform you want to edit and click on build in the drop down(1). If you want to make a new webform, click on the "+Add webform" button(2).

Webform Interface

1

2

You will now see a pop up window display with a few different fields to fill out. All you need to fill out is the title field. The status should be left to open if you plan to go live with this webform. Once you are finished, you can click save which will then load the build page to the view.

Adding new webform

All you want to focus on here are adding elements. The other are features that do not apply to our use of webforms. Click on add elements. Once you do that, you will get a pop up window that lists a lot of different types of elements you can add. It is a large list, broken down into different sections, however each element has help text that explains everything you would need to know if the element is what you need. It might be easier to see them all collapsed to see each section.

Build webform

A common example of a form is a contact us form, so I will go through how to add some elements, as well as setting up the email handlers to get a functioning contact us form on your website. We will start by adding a few of the basic elements. A basic element in this situation is just going to be a few different text fields. When you click on text field the pop up below will display. We will do this for Name and Subject fields.

Building Contact Us Form

We will most likely want a message section and that is also a basic element but this time we will use text area. With editing basic elements for the most part they are the same in terms of form layout.

Building Contact Us Form

To just keep this form simple, we will add two more elements. One will be email and another for a phone number. Both of these would be found under the advance elements. This is where you will also find the majority of the elements you will be using outside of the basic elements. Click on add email or add telephone (depending on which one you want to add to the form) and fill in the title of that new field and press save. We can now preview our form and how it will look. You can drag and drop each element to determine the order of the fields

Building Contact Us Form

Sample form

We have a built out form, but we still have to set up the email handlers. This is where we will determine and configure what will happen when a form is submitted. To do this, we need to go to the Settings tab. Once you go to the Settings page, click on emails/handlers. Now you will see a button to Add email. What we are doing here, is have the submission results sent to an email (or several email addresses).

Email Handlers

The title can be what you want. I would try to make it specific just in case you want to have several different email handlers (most sites will usually have a confirmation email sent to the user, but we will go over that next step). The "To email" should be switched to "Custom to email address". This allows you to enter one or as many email addresses that you would like to send the results to.

Email Handlers

The last two notable sections to fill out are the "Send from" and "Message" ones. In the "Send from" section, you can customize the from email and name.  The defaults in the "Message" section are fine, however I just wanted to note that the information will be sent in the email. If you want to customize what is sent, you can do that in the settings for that section as well.

Email Handlers

Still within the Settings tabs in your webform, there is a link to click on to update the confirmation settings. This is where you can determine what action happens for the person who is submitting a form once they do submit it. You can select the confirmation type and update the confirmation title and message. You could even have it redirect to a certain confirmation page. Any customization for confirmation will be done from this section.

Confirmation Settings

Congratulations!
You have completed the

Webform Walkthrough

use the back button to go back to where you were