Car Rental Form

A car rental online form helps individuals or businesses rent a vehicle from a car rental company. The form collects essential information about the lessee and the rental transaction, formalizes the rental agreement, and outlines its terms and conditions. This example demonstrates a car rental form fully created and designed in Survey Creator by SurveyJS, which now includes an integrated Theme Editor.

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

A form header usually consists of a form title, short description, and a logo of your company. However, all these elements are optional. In this demo, the form header contains only a description and a logo. To specify a description text, open the Designer tab and enter your text in the Description editor within the General category. To add and configure a logo for your form in Survey Creator, use editors in the Logo in Survey Header category.

These editors are mapped to the following survey JSON properties:

• description
• logo
• logoWidth
• logoHeight
• logoFit

To position a description and logo within a form header, use Theme Editor integrated in Survey Creator. Open the Themes tab, expand the Header category in Property Grid, and use the Description position and Logo position editors to align these elements as required. Ensure that the View switch is set to "Advanced".

You can also use other editors within the Header category to configure the form header in greater detail. 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).

SurveyJS Form Library ships with flexible data validation capabilities. In this demo, data validation ensures a car pick-up date is neither earlier than today nor later than a drop-off date.

To implement this validation logic using Survey Creator, select the needed question on the design surface, expand the Validation category, and add a validator of the Expression type. This validator throws an error when a specified validation expression evaluates to false. Type in the validation expression or build it using an integrated condition editor and enter the error message to display when your expression returns false.

In code, you can use the validators array to specify the same settings. Refer to the survey.json file for a code example. For more information on data validation capabilities, view the Built-In Client-Side Validators help topic:

Built-In Client-Side Validators

If you want to let respondents submit free-form drawings as part of your survey, add a drawing field to it. You can use the Signature question type as a drawing field. This question type supports background images, which is useful if you want to display a reference or template for a respondent's drawing. For instance, a drawing field in this demo displays a car in different views (front, back, top, left, and right) for respondents to mark any dents or scratches a rented car may have.

To add a Signature question to your form using Survey Creator, simply drag this question from the Toolbox onto the design surface. For information on how to add a Signature question programmatically, refer to the Signature demo.

Signature Demo

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

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