Drupal Forms

So, lately, I have been working on a new page/site for Digital Initiatives that will eventually become the start page/site for a variety of digital sites under our department. Currently, as you may remember, this is our start page: http://digitalcollections.lib.iastate.edu/. I cannot reveal the new start page, because we are still in the process of creating it. However, I thought I’d focus on one component of the page/site that we have not previously used before: forms.

Now, before Drupal, forms were a pain in keister to create. But now, with a great support staff on hand, forms are super easy to build. Let me show you how.

Forms are a part of Drupal that needs to be “turned on,” in order to work. In our set-up they are turned off to avoid confusion. Also, keep in mind, that once it is turned on, it is available on all pages you create within your site. When it does get turn it on, the magic begins.

I created a Test page to show you how to create a form and how forms work.

It’s very similar to a non-form Drupal edit page, except for the tab just to the right of Edit says Webform.

Let’s click on that.

There are five different sections under the Webform. The first one, form component, is where you add the important parts of the form being created, such as a person’s name, email, address, connection, and comments.

Let’s create a super simple form, which includes person’s name, email, an additional textfield for funnsies, and a comment box.

First, we’ll click inside the “New component name” box, and type Name. The type is Textfield, so we’ll leave that. Now, click on the “Add” button.

Note: this is only a partial screenshot of the page that comes up. Scroll down the age to look over the other boxes you can use to manipulate this info, including making this box a required value. A required value is a value that is needed to proceed. A red star will show up next to the label. Also, on these required fields, I place in parenthesis (required). [I have recently learned that some colorblind users cannot make the distinction between red and black, so adding this helps.] Other fields that are worth looking at: Display. Here you can set the width of the component, add a placeholder in the box (like: myname@abc.com). Also check out the label display. Under this, you can change the label to be displayed above, inline, below the box; description can be displayed above the field; disable the field completely, or make it private, so only users with access can view the results. These preferences can be found on most of the component pages. For now, nothing else is needed, so scroll all the way down and click “Save component” at the bottom.

Let’s add Email now. Label it, “Email,” and change the type to “E-mail,” then tick the “Required” box. Click “Add.”

Oops. I made a mistake. I forgot to label email “Email (required)”. No sweat. Just click on “Edit” beside the Email label, and on the next page, change the title in the label name. Scroll down and click “Save component”.

In the next window, make sure short form is checked for email format, and that “Required” is ticked. You might want to tick “Unique,” under “Validations.” Scroll down to click on “Save component.”

Now, let’s add another textfield.

Here, I’m going to get goofy to show you different things you can do with the form. In this window, check to make sure “Required” is ticked.

I made the Display width 75; I added a Placeholder (to be shown inside field until user starts typing); I Prefixed the textbook with craziness, and Postfixed it with more craziness. Finally, I placed the Label Display to None.

Let’s add the comment box now. Name it “More comments (required)”; choose textarea; make it “Required”; in the next window: make Validation “Required”; and make sure Resizable is ticked under Display; scroll down and click “Save component”.

Here’s what the final super simple form looks like:

Notice that there is no red star anywhere near the “I’m glad” text field. This is something to be aware of, if you decided to hide the label. If any one of those red star areas is left blank, the user will not be able to move forward. OK? OK!

But WAIT! We’re not done yet.

Back under Webform, you can see there is a few more section to the right of Form components: Conditionals, Form validation, E-mails, Form settings. The ones to be most concerned with are E-mails, and Form settings.

Under E-Mails, add the address where you want the comments from the form to be sent to, then click “Add”. In the next page:

Make sure all the email addresses are correct. Custom email/names should be used where you what the emails to go/or what you want the emails to be from called, when the Default email/name is incorrect; E-mail from name should be that address as well. Also check to make sure E-mail header is the right page from where the email are originating. OK. Scroll to bottom, click “Save e-mail setting.”

Let’s move over to Form setting. This page is a doozy, with many options to choose from; my advice: choose wisely, little grasshopper.

First one, most important: I recommend you place a confirmation message in the first box; you have the option of using Full HTML, Filtered HTML, and Plain text. Also, you can add a re-direct page for the confirmation page. Keep the Total submissions at unlimited; make sure Status of this form is ticked for Open. (Closing prohibits further submissions by other users.)

2nd half of page:

These are all self-explanatory. Notice on the bottom under Next submission order. This number should be 1 if you have just created the form; otherwise the number will be whatever number is currently submitted for the form.

One last note: To the right of the Webform tab is a Results tab. This tab shows the results from the form on the page.

Of course, there isn’t much on here right now, but this page will list every form submitted by users, default setting is recently to oldest. Under Operations, will be additional links: View Edit Delete. You can either click on the number under #, or View under Operations corresponding to the number to see the actual submitted form.

Drupal makes it so easy to create and maintain forms. I hope they are as helpful to you as they are for us.