Tutorial: How to customize the look&feel of the booking process (4 / 4)
The reservation form can include any number of custom fields, you can also order them in any way you like and divide the form into multiple steps (see
Q142 for more info about this). In this tutorial we'll concentrate only on the design of the form and not its contents.
The settings which control the look of the booking form can be also found in
Settings / CSS style editor and they are a part of a scheme. These settigs are:
- Wide form (2 columns) - if you select this option, the booking form will have 2 columns. For each field you'll be able to set the width: narrow, meaning 2 narrow fields will fit into a single line; wide (double width); or narrow but occupying the entire line. You need to go to Settings / Reservation form layout to set this setting for each form field
- Position of the field item name - labels can be placed above, to the left, or inside the fields. If not using a responsive scheme, there are two possibilities to put the labels inside the fields, a simple one using the placeholder attribute, and an advanced one where the label always stays visible, if there's any content in a field, the label moves to the top of the field (but stays inside it) and is written using a small font.
- Allow customers to switch resource on the reservation form - you can decide whether the customer can freely change the resource on the booking form, in which case the selector is a dropdown field. Otherwise it's a static text
- Show help under form items instead of using pop-up baloons - if this is selected, the field description (if present) will be printed under each field, otherwise there's a pop-up baloon next to field label which shows it
- Calendar preview - default parameters - Each calendar preview, whether embedded as a widget or part of a template, can be fully customized (see Q173). Still, it's possible that for convenience you will always want to use some parameters from Q173 to customize all your calendar previews. In such case this is a convenient way to add such default settings.