Exercise 11.3 - Create an event registration form

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.

   

   Adding Entity select
4. Configure the options on the right hand side to match the screenshot below.

   

   Image of Entity select config
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.

   

   Image of Full name field config
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.

   

   Event registration form fields
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.

    

    Add Page field config
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.

Adding email handler

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.

Showing the Test tab