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 into a Grid container with fd-blur-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 must 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, then 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.
  • on-change() event is added for Wizard container. The function adds a bg-primary class to all completed steps to paint them in the primary color of the theme.

Styling

  • Elements with wizard-icon CSS class are hidden.
  • A background image is defined for fd-form class.
  • A background for a grid container with fd-blur-background CSS class is blurred.