In this exercise we attach the webform created in Exercise 11.1 to a webform page, so that it’s accessible by the public and can have other attributes available to content types (for example, we could place it on a custom URL, attach to a site navigation menu, add metadata and use moderation workflow).

1. Create a new Webform content page by clicking on Content in the Admin menu then hover over Add content then click on Webform.
2. Add a Title and some text in the Body field, with guidelines about the form.

3. In the Webform field, select the webform created in the previous exercise (you may have named your form 'Simple Feedback Form' as in the screenshot below).

4. Explore the Webform Settings field, but do not modify anything there.

5. Attach the Webform to the main navigation.

6. Set the Save as dropdown to 'Published'.

7. Click the Save button to complete.
8. Note that 'Feedback' is now a menu item on the Primary navigation menu. Click on the link. The page containing your form should look similar to the screenshot below.

Webform components can be used to collect different types of data. Different elements can be added to a Form using similar steps to the way a Text field was added in Exercise 11.1.

To see all the elements available when creating or editing a form, click on Structure on the Admin menu then hover over Webforms then click on Forms.

Click on the Build button to the right hand side of a selected form, as shown in the screenshot below.

Click on the +Add element button to the top left of the screen.

You will see a long list of available components. Scroll down to see them all. The screenshots below show some examples from Basic elements, Advanced elements, File upload elements and Options elements.

Webform options

The Settings tab contains some useful advanced options.

1. To access these options, click on the Settings menu.

2. Click on the various 'second level' menu items (General, Form, Submissions, Confirmation, Emails/Handlers, CSS/JS, Access) to view the options available.

In the sceenshot below, the form is configured to direct a site visitor to a Confirmation Page (3). The Confirmation title and Confirmation message (4) can be customised as shown in the screenshot.

Some of the more important and commonly used options are outlined in the table below.

In this exercise you will create an Event registration form.

1. Add a new Webform (see previous Steps 1 to 3 of Exercise 11.1 how to create a webform). Set the title to be Event registration.

2. Click the + Add element button.

3. Search for the Element type of Entity select by typing in the search field as shown in the screenshot below. Click the Add element button next to Entity select.
4. Configure the options on the right hand side to match the screenshot below.
5. Add a another element using the + Add element button, choose a Text field element and label it “Full name”, making it a required field. You may add the description “Please enter your full name” in the Element description/help/more field set. You can also add a Required message. This text will be displayed to a user if they submit the form without completing the Full name field.
6. Add an Email element following the steps above, labelled “Email address” and make it a required field.

7. Add a Textarea element labelled “Comment” and make it optional. At this stage your "Event registration" Webform page should look similar to the screenshot below.
8. Click on the + Add page button at the top left of the page.

9. Add a title to the page on the right hand side. For example, you can name the page 'Name and Email address'.

10. Click on the Save button at the bottom of the Add Wizard page element area.
11. Add another page using following steps 8 to 10. Name the page 'Comments'.

12. Using the small cross icons to the left of the Pages and Elements, drag-and-drop to position the 'Name and Email address' and 'Comments'.

13. Indent the form elements as shown in the screenshot below and then click on Save.
14. Optional - Add an email handler so that webform responses are automatically emailed to a specified email.

In the Email handler pop up window, set the custom email address and click on Save. You can separate multiple email addresses with a comma.

Test your form

Hint: The Test tab allows you to easily test your form with auto-filled dummy data and without the need to assign your Webform to a Webform page.