Hotel Booking Form

Edit in →
Survey Creator

A hotel booking form allows guests to make a reservation at a hotel. Hotel booking forms typically include fields for information related to the guest's stay: name, contact details, identification documents, reservation details, payment information, etc. This demo shows a ready-to-use hotel booking form, which was created and designed using SurveyJS Survey Creator with integrated Theme Editor. The following sections highlight key aspects of the form implementation.

Enable Panelless View

Form fields can be framed by panels or displayed without them. This demo uses the panelless view. To enable it in Theme Editor, switch the General > Question appearance editor to "Without Panels". This editor is mapped to the isPanelless property in the theme JSON configuration (see the theme.js file).

Specify panelless question appearance in SurveyJS Theme Editor

Add a Background Image

The hotel booking form in this demo has a distinct background image. With Theme Editor by SurveyJS, you can add background images to your forms with ease. Open the Themes tab in Survey Creator and expand the Background category. Editors under the Background image title enable you to add a background image and configure its every aspect.

Configure a background image in SurveyJS Theme Editor

These editors are mapped to the following theme JSON schema properties, which you can find in the theme.js file:

  • backgroundImage: string
    An image to display as form background. This property accepts a hyperlink or a data URL.

  • backgroundImageFit: "auto" | "contain" | "cover"
    A string value that specifies how to resize the background image to fit it into its container. Refer to the description of the background-size CSS property values on MDN for detailed information on the possible values.

  • backgroundImageAttachment: "fixed" | "scroll"
    A string value that specifies whether the background image is fixed in its position (as in this demo) or scrolled along with the survey.

  • backgroundOpacity: number
    A value from 0 to 1 that specifies how transparent the background image should be: 0 makes the image completely transparent, and 1 makes it opaque. In Theme Editor, the opacity values are mapped to a scale from 0% to 100%.

Configure the Form Header

The header of your form typically contains a form title, short description, and a logo of your company. To specify title and description texts, open the Designer tab and enter them in the Title and Description editors in the General category. To configure a logo, use editors in the Logo in Survey Header category.

Specify title, description, and logo settings in SurveyJS Survey Creator

These editors are mapped to the following survey JSON properties:

To configure the appearance of the form header, open the Themes tab and use editors in the Header category. Ensure that the View switch is set to "Advanced". All editors in the Header category, except font editors and View, are mapped to corresponding header object properties in the theme JSON schema (see the theme.js file).

Configure form header in SurveyJS Theme Editor

Use Placeholders for Form Field Titles

If you want to design more compact and neat-looking forms, you can hide form field titles and display title texts as input field placeholders. To implement this layout in your form, open the Designer tab, select a question on the design surface, and specify the following settings:

  1. In the General category, enter the form field title in the Input area placeholder editor.
  2. In the Layout category, change Title location to "Hidden".
Use placeholders for form field titles in SurveyJS Survey Creator

In the survey JSON schema, these editors are mapped to a question's titleLocation and placeholder properties.

Your cookie settings

We use cookies on our site to make your browsing experience more convenient and personal. In some cases, they are essential to making the site work properly. By clicking "Accept All", you consent to the use of all cookies in accordance with our Terms of Use & Privacy Statement. However, you may visit "Cookie settings" to provide a controlled consent.

Your renewal subscription expires soon.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Your renewal subscription has expired.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.