William and Mary Libraries logo
Students studying together at tables in Read and Relax
Example form elements

Example form elements

Drupal's Webform provides a number of different elements to let you build everything from simple contact forms, to complex multi-page forms, and forms with conditional fields that only show based upon the value of another field.
The elements available to you are all shown below in their default configuration so you can see what's available and some of the unique options you have. Drupal's Webform groups the elements in different categories, not all of which are very intuitive, so this page groups the elements in boxes labeled with the Webform category where you'll find the element. Those categories are:

Pro-tips

  1. Use the "Filter by element name" search box when you add an element - it will save you from scrolling through the list
  2. For long forms, start out by adding pages for each part of your form. You can then add your elements to each page. This will create a multi-page form for the user, which can be a lot easier to step through versus a really long, single page form.
  3. Start with a template, or duplicate an existing form, to make creating the form easier.

Important!

You must create a page to add your webform to once you have finished building it, otherwise it will not show up on the Libraries Forms page. Super not intuitive, but at least easy to do once you know where to go:
  1. On your form, click the tab at top for "References"
  2. Click the "Create webform" button
  3. Choose which category of the Libraries website this form belongs to. Everything else can be left as is.
  4. Click "Save"

Basic elements

You will probably most often use the "Text field" in this section. Certain types of information like email, telephone, urls, and dates have specific element types just for them which you should use instead of a plain text field. These special elements will do an additional validation check to make sure what the user enters is in the right format.

Use Textarea for collecting longer statements or paragraphs that don't fit neatly in one line.

Advanced elements

More specific types of form elements. Using fields like email, telephone, and URL adds an additional validation check to make sure whatever is entered looks like an email/phone/url.
Scale - your question goes here.
Sign above

Composite elements

Composite elements are predefined groups of fields for common things like address and contact information. These can save you time because you can add just one composite element versus multiple individual fields. Each composite includes all of the fields shown here, but you can choose to hide specific ones (especially on the Contact composite - you can hide company and country, for example).
Address
Contact
Make your own group of fields. This is only useful when you want users to be able to add additional instances of a thing that has multiple fields - like course reserve books that each have a title/author/call#/etc. In most cases to create a group of fields, you should use a fieldset container and put your fields inside that.
Field 1 Field2 Field3 Weight
Add Remove
more items

Markup elements

Use these to insert text into your form or messages styled like an alert box. The Message fields lets you select the type of alert which will change the background color.
Basic HTML - any type of text can go here, and you have basic formatting options as well, including headings and lists.

Options elements

Various ways to present sets of options or rank things. The fields that have "Other" in the name will automatically add a field for a user to specify what value they want to enter.
Note that the webform builder has predefined sets of options for common things like Yes/No, days/months, state names, and rating scales (importance, satisfaction, etc). Use these to save time! 
Checkboxes
Checkboxes other
Radios
Radios other
Select other
Table sort - your question goes here Weight
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday

Date/time elements

Different ways to enter dates and times. These use the browser's native date and time pickers, so their appearance will vary based upon what browser you're using. 
NOTE: Don't check the box to use a date picker. These fields include a date picker by default.

File upload

Allow users to upload files. By default, this is limited to one file, but you can allow users to upload a defined number of files. (Avoid setting this to unlimited if possible!). The file types you can upload are listed by file extension below, but you can further limit this by deleting any of the extensions you want (like limit it to gif/jpg/jpeg/png when you know your users will only be uploading images).

NOTE: You should always check the box for "Sanitize file names". This will prevent issues with users uploading files with special characters that the internet doesn't like!
One file only.
25 MB limit.
Allowed types: gif, jpg, jpeg, png, txt, rtf, pdf, odf, doc, docx, xls, xlsx, zip.
25 MB limit per form.

Containers

In addition to using pages to divide up long forms, you can also use containers.
  • Details - create groups of fields that can be open and closed. In most cases, a fieldset is preferred, especially if you have required fields in the group. This lets users see what information they need to enter rather than having to click to see.
  • Fieldset - groups related fields together
  • Section - break up sections of a form by adding a section heading
Details
Fieldset

Section