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

Meeting Room Reservation Form

Use this template to organize the conference room reservation process. Gather all the necessary information: room, time slot, number of participants, meeting agenda, and contact information of the person for whom the room is reserved. The step-by-step form filling is done using the Wizard Container.

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.
  • Fields are organized using a Wizard container.
  • The StartTime and the EndTime fields are required. The EndTime field value should be greater than the StartTime field value. The validation is added using a JavaScript function.
  • 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.
  • Change the message that will be displayed after the form is submitted in the form settings.
  • The form timeout is set to 20 seconds, after which the form can be submitted again. You can change it in the form settings.

JavaScript

  • Custom validation for the EndTime and the StartTime fields is added using the fd.validators() property.
  • update:startIndex() event is added for Wizard container. The function adds a bg-primary class to all completed steps. Thus, the background of the completed steps matches the primary color of the theme.

Styling

  • Elements with a wizard-icon CSS class are hidden.
  • 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.