Webforms - Building Forms

Building a form step by step

Let's build a basic Christmas Dinner booking form step by step.

Your organization has a yearly Christmas dinner, and wants a form so employees can book a seat.

People should be able to provide:

• their name
• their email address
• their dietary preference (single choice, multiple options)
• their drinks preference (multiple choice)
• a generic remark

(You will be adding more and more functionality to this form as you progress through the course)

Step by step

Create the form

Create a new form named "Christmas Dinner Reservation 2024" at Administration > Structure > Webforms.

Add an element for the user's name.

You can add elements via the Add element button:

→ Add an appropriate element for the user's name.

You'll need to decide whether you want one single element for the name, or separate elements for first and last name.

You'll also need to decide which type of element to select, based on the type of information that will be stored (text, number, date, ...).

Add an element for the user's email address

The most appropriate element choices for capturing email addresses are "Text field" and "Email".

They both look like simple text elements. What's difference? What advantage does the "Email" element have over a basic "Text field" element?

→ Add an "Email" element

Add an element for the user's dietary preference

Users should be able to select one option from a list of options.

Three element types look useful:

• "Select" (provides a select list / dropdown element)
• "Radio buttons" (provides a list of round radio buttons)
• "Checkboxes" (provides a list of square checkboxes)

The first two are form elements that let you select exactly one option.
The last form element lets you select multiple options.

The requirements specify that users should choose one option, so you can use a "Select" or "Radio buttons" element. The choice is yours.

→ Add the element and provide the following choices:

• vegan
• vegetarian
• pescatarian
• everything's good

→Which element type did you choose, and why?
Does one have advantages over the other?

Add an element for the user's drinks preference

Users should be able to select one or more options from a list of options.

The most appropriate element that lets users select multiple options is "Checkboxes".

→ Add the element and provide the following choices:

• water
• fruit juice
• white wine
• red wine

Add an element for general remarks.

You'll need an element that lets users add multiple rows of text.

There are several element types you could potentially use:

• "Text area" (accepts only plain text)
• "Basic HTML" (rich text; accepts some HTML)
• "Advanced HTML" (rich text, accepts more HTML)

For our scenario we only want to let users enter simple plain text, so the basic "Text area" element is what we need.

→ Add the element.

Check the result

If everything went well, your form should look similar to this:
 

Special-purpose elements

As you may have noticed, several special-purpose elements are available, such as:

• link
• email
• telephone
• address

It's often easier and quicker to use these elements instead of using basic text and number elements. They are more complex and need more configuration, but they also often offer additional display options and validation logic that simpler elements don't have.

The "Email" element, for instance, will check if the given value has a valid email format, and can display the address as a link. Neither of these things is possible (without writing custom code) if you use the simple "Text field" element.

This approach is identical to the choice you have when adding a text field or email field to a Content Type using the Field UI. In both cases you need to consider the type of data you want to capture, and whether or not one field type has certain advantages over the other field type.