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