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

Room Reservation Form

Make it easy for your guests to book a room with our free online hotel reservation 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 title of the form has bg-primary CSS class which sets the background color to the primary color of the theme.
  • All fields are divided into sections and organized using a Grid container. The grid container has 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

  • The toggleArrivalInfo() 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

  • Styles for h1 and h4 elements are defined in the CSS-editor.
  • The primary button's font-weight is set to 500 via the Style property.