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:
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.