logo
Documents & Forms
Microsoft 365 & SharePoint Tools
Classic SharePoint Tools

Event Registration Form

Are you planning a party? Forget about old-fashioned paper invitations. Invite everyone with the online event registration form. Collect the names and contact information of all your guests and their friends. The guest list will be stored in your account and can be easily viewed or exported. Also, to make sure no one gets lost, a Google map is embedded in the form with the address of the event.

Preview
Theme:
Use this template

Fields and controls

  • All form elements are placed in a Grid container that has a content-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 text and a DataTable controls are placed in a Grid container that has a friends CSS class. Based on the Friends field value, the container is dynamically shown/hidden using 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 container that has a friends CSS class depending on the Friends field value. The function is called on from load and when the Friends field value changes.

Styling

  • The form width on sharing pages is set to 80% of screen width.
  • The background image is defined in a rule for a fd-form class.
  • The background for a grid container with a content-background CSS class is blurred; the background color is transparent; the border-radius is 15px.
  • h1, h4, h6, p elements' text and field titles color is white.
  • iframe width is 100% to fit the container width; the height is set to 300px.