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

Room Reservation Form

Make it easy for your guest to book a room with our free online hotel booking form. The form asks for general information about guests and accommodation details: guest name and contact information, check-in and check-out dates, number of guests, including children. A guest can choose the type of room and share other preferences in the comment field. There is also an option to book airport transfers and indicate arrival time and flight number. You can easily customize the form and embed it on your website or share a link.

Preview
Theme:
Use this template

Fields and controls

  • The form title has a bg-primary CSS class. Thus, the title background matches the primary color of the theme.
  • Fields are divided into sections and organized using a Grid container. The grid container has a bg-light CSS class that sets the background color to light gray.
  • 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.
  • The Pickup field is required.
  • The ArrivalTime and FlightNumber fields are shown/hidden dynamically depending on the PickUp field value.
  • The CheckOutDate field value should be greater than the CheckOutDate field value. The validation is added using a JavaScript function.
  • Change the message that will be displayed after the form is submitted in the form settings.

JavaScript

  • Element with a payment CSS class is hidden on the form load.
  • The transfer() function shows/hides the ArrivalTime and FlightNumber fields and makes them required dynamically depending on the PickUp field value. The function is called on the form load and when the PickUp field value changes.
  • Custom validation for the CheckOutDate and the CheckInDatefields is added using the fd.validators property.

Styling

  • h1, h4 elements' text size is responsive to screen width and is set with the min() CSS function.
  • h1 element's content is centered, and the text color is white.
  • The primary button font-weight is set to 500.