Tip:
Highlight text to annotate it
X
Hi, I'm Emily from Tech Services in the University of Michigan Division of Student Affairs. Today
I am going to show you how to create a webform in Awesome Tools, the Drupal 7 template for
DSA units at U of M. We're going to use the Student Affairs website as our example today,
but the process will be the same on any website running Awesome Tools. So, starting on
the homepage, the first thing we'll need to do is ensure that we are connected to the
site using https. This will give us a secure connection to the website and access to our
site permissions. Here's how to tell if you're using https. Look up at the address bar
at the top of your browser. The beginning of your web address will usually read http://.
Some browsers, like Chrome, may not include http at all. Unless your address bar reads
https://, you'll need to add that to your address. After you add https and reload the
page--which you can do by pressing enter or clicking the reload icon on your browser--you
will be directed to the University of Michigan login page where you will login with your
unique name and your Kerboros password. Once you're in, you should see an additional toolbar
or two at the top of the page. This is an easy way to determine if you're logged in
or not. The gray bar is your shortcuts bar. If you don't see it, toggle the triangle
in the upper right corner of your window and it will appear. Once we have our shortcuts
bar visible, let's click on the Add Content shortcut. This will take us to the Add Content
page, where we will select the type of content we would like to add. If you don’t see
an option for ‘Add webform’, you’ll need to contact Tech Services so that we can
add webforms to your site. Once your site has webforms enabled, you can go ahead and
click ‘Add webform’. Now, the first page we’re going to see looks a lot like the
form you see when creating an article. We’ll add a title. And a description of our form.
This can be instructions or an overview of the purpose of the form. Once published, this
description will show up on top of the form. Down at the bottom, you’ll see a few optional
settings, such as URL path settings – this is where you can give your form a special
URL. You can edit the authoring information, although this is rarely necessary. And then,
finally, you will want to ensure that the form is published. And go ahead and remove
it from the front page. It won’t show up in your feed, so we can de-select that. Then
click save. Next we’ll be taken to the webform components page, which is where you’ll
actually build your form. To familiarize you to the Drupal webform system, I am going
to add each type of component in order to illustrate the function of each. So let’s
start with a textfield. This will show up as a short empty text box. And let’s make
it mandatory. That means that the user will not be able to submit the form without inputting
something in that text box. After clicking add, you will be taken to the edit component
field. Most of the time, the default settings will suit you just fine. But I’ll walk you
through most of them anyway. Now, here you will see the Label, this is the name that
will be visible to the user of the form. The field key is what the Drupal system calls
this component. Each of these must be unique, so you may encounter an error here if you
already have a component with the same field key. If that happens, just edit the field
key to something unique. As with many other component types, you can assign it a default
value. And you can provide additional instructions within the description field. We’ve already
selected mandatory, so you can see that is checked. You can specify the maximum length
of the input, the width of the field itself, and you can add additional labels if necessary
and change where the field label displays. Click save component and we’ll move on to the
next one. You might be tempted to collect email addresses
in the textfield, but there is a specific component type for that. Appropriately named
email, so let’s select that. One setting I almost always recommend enabling
is the ‘User email as default’ setting. This will automatically collect the email
address of any user who is logged into the U-M system. Not only does this save the user
some time, but also ensures that the email address is correct.
For users who aren’t logged in, the field will be blank.
Again, many of the same settings. And let’s click save and add another.
Now let’s create a text area… this is similar to a textfield only it provides a
bigger area that allows for longer responses. Next, let’s take a look at date. Here you
can adjust the timezone, as well as edit the time frame in which dates can be selected.
Pop-up calendar is selected by default and you can use a textfield for the year if you
like. We also have an option for collecting times.
A lot of the options here are similar to date. You can select your timezone and your time
format. Now let’s move on to a fieldset. A fieldset
is a grouping of fields inside of a bounding box. Once we publish this form, you’ll see
what it looks like. For now, let’s create a fieldset for our
contact info. We can drag it up to first and then drag the fields we want to display inside
of it underneath it. The thing to remember here is that you’ll
need to click save once you move a component’s position, or your changes will be lost when
you navigate away from this page, so make sure you do that.
Next let’s look at ‘Select Options’. This is the choice you’ll want to make if
you want users to select a choice from checkboxes, radio buttons, or a drop-down list.
This is probably one of the more complicated components, but once you get the hang of it,
it’s no sweat. So, we’ll add the label and a short description.
Then we’ll need to add our options. Now, these must be done in key-value pairs, which
means for every option you want to include in your list, you’ll need to give it a key.
This is what Drupal uses to keep track of the options users select.
Keys can be anything as long as they are unique. I usually make up a short code and
add a number to the end. You’ll also need to make sure you follow
the instructions when inputting these. The appropriate syntax is key, vertical bar, your
readable option. You can select multiple if you’d like users
to be able to select more than one. You can use a pre-built list. You can also select
listbox if you’d like the options to appear in a drop-down list.
Next let’s test out the file option. This will allow users to upload a file to the system
that you can then download with their submission. You may want to add a directory to easily
identify the contents when you go back to look at submissions.
Next, you’ll need to select the file types that you want to allow users to submit. If
you’re collecting resumes, like I am here, you’ll want to select all of the file types
that someone may use to submit their resume. So, here we’ll do doc, docx, and pdf. We’ll
stick with the default file size, but you can change that if you are collecting something
much larger, like image files or powerpoint presentations.
Now, our form is getting pretty long, so let’s add a page break.
Here we’ll try markup, which is really just a fancy name for text. Selecting markup
will provide you with an editor where you can write text, links, images, etc and format
them just like you would in an article. Finally, we’ll add a grid. Similar to select
options, a grid let’s you ask several questions in one field, as long as they have the same
answers. And this is done is a similar manner, with key-value pairs. So, for example, I’ll
add good, great, and awesome as the answers. And a few questions to which those answers
would be relevant. And there we have all of our field components.
Next, let’s determine our settings for this form.
In the upper right hand corner, you will see a small gray gear. If you click on the
gear, you will see a few options. Form components is the page we’re on.
Emails is the page where we can set up email notifications for submission.
Here you’ll just add the email address you’d like notifications to go to. It can
be an individuals address or a group address. You can edit the subject of the email, the
from address, and the from name if you like. And the default email template includes everything
the form collects. If you don’t want to receive an email with all of that information,
you can go in and alter the template if you like.
Finally, let’s edit our form settings. This is where you’ll put a confirmation
message that users will see after they’ve submitted your form.
You can also, if you like, redirect users to another page after submission.
You can limit the number of times a user can submit the form and select the status.
Finally, you can select who can view and submit the form. By default, forms are available
to anonymous and authenticated users. Anonymous users are not logged in, so they could be
anyone who lands on the site. Authenticated users are logged-in users, so this would mean
anyone with a U-M credential that is logged in. So, you’ll need to think about your
audience when making this selection. Click
save and our form is ready to go. So, let’s go back up to our shortcuts bar and click
‘find content’. Since our form is the last thing we did, it should be right on top. And
here we are. Up here you can see our title and our description. I also already submitted
a response, so the system is alerting me to that here. Chances are you won’t see this
green box when you design your first form. Here is our fieldset with our textfield and email
components. Here is our text area. Next we have our date and time pickers. Here is our select options component. And our file
upload. Now let’s go to the next page. Here is our description and our markup. And then,
here we have our grid. Once I click submit, I’m taken to our confirmation page. And
I can either go back to the form or navigate away using the main navigation. So, now that
we have our form live and accepting submissions, let’s view the data we’ve collected. On
the ‘find content’ page, you’ll see a tab at the top called ‘webforms’. This
is a shortcut to all of the forms that have been created on your site and the data they’ve
collected. Here is our form, let’s check out the submissions.
This will allow us to flip through them one by one. So, here’s my test submission, which
is also timestamped so you can see when it was submitted.
The system defaults to a delimitd text format, but chances are you are going to want to download
as an excel file. You can make some adjusts to the data you download if you like. Once
you have it how you want it, click download and an excel file will be downloaded to your
downloads folder. Finally, you can also view submissions in analysis and table formats. So
you’ll see that there are a lot of options in creating a webform and many different settings.
I encourage you to play around and see what works best. If you find that you still need
assistance with adding webforms to your site, please don't hesitate to contact us at techservices@umich.edu.
We'll be happy to help. Next up in our video tutorial series for Awesome Tools is
how to add images and videos to your website.... stay tuned.