Event Registration Form
The online event registration form will increase the reach of your events by making it easy for guests to register online. Collect the names and contact information of all participants. The guest list will be stored in your account; you can view or export it at any time. Also, to make sure no one gets lost, a Google map is embedded in the form with the address of the event.
Preview
Theme:
Fields and controls
- All form elements are placed into Grid containers with fd-blur-background CSS class. Change the container styling in the CSS editor.
- The Email field accepts only valid email addresses. Change the pattern in the field properties.
- The Phone is a masked input field that accepts only 11-digit numbers. Change the mask in the field properties.
- A DataTable control with a list of friends is placed into a Grid container with fd-friends-list CSS class. Based on the value of the Friends field, the DataTable becomes visible or hidden with a JavaScript function.
- A Google map is embedded on the form using HTML control. Find the instructions on how to generate an iframe here.
JavaScript
- The friendsList() function shows/hides a container with fd-friends-list CSS class depending on the Friends field value. The function is called on from load and when the Friends field changes.
Styling
- A background image is defined for the parent container with fd-form class.
- A background for grid containers with fd-blur-background CSS class is blurred.
- h1, h4, h6, and field titles are yellow.
- iframe width is 100% to fit the container width; the height is set to 300px.