Classic form (Step-by-step booking form)

You can customize just about anything in the way the front-end booking form looks.

In the Appearance section of Bookly, you will see several templates of the booking form designs that you can adjust to suit your brand and business needs:

• Search form: Allows clients to choose a preferred date first, followed by available services and staff members;
• Services form: Organizes services with categories, presenting them conveniently in a catalog view for your customers;
• Staff form: Lets clients choose a preferred employee first, followed by associated services;
• Default booking form: Classic step-by-step scheduling process; 
• Cancellation form: A dedicated form for clients to cancel appointments, with an optional reason.

This article provides instructions on how to configure a classic Bookly booking form. To learn more about customizing modern booking forms, please visit this page.

How to set up classic Bookly booking form

Choose Step by step form.

Customize colors – use the color picker to seamlessly integrate the booking form with your site's design and branding.

Navigate through each tab to modify your booking form based on your preferences.

You can enable or disable different fields to make it best suitable for your needs.

Add personalized texts to various booking steps, displaying content based on your scenario. Use a range of placeholders (or codes) to present information with booking details according to your specific requirements.

Customize content that will be displayed in the booking form

Select the tab corresponding to the step in your booking form that you want to customize. Click on the underlined text. A pop-up window will appear, allowing you to enter and edit the text.

Use codes to add dynamic content to your booking form. For instance, if you wish to include the employee’s name, add {staff_name} in your text, and the code will be replaced with the actual staff name.

In the pop-up Edit window, start typing "{" or the code title to see the list of available codes. Enter your text using the relevant codes from the list. After entering the text and codes, click Apply in the pop-up window. Click Save at the bottom of the page to save your customization.

This example illustrates how booking details can be displayed on the Details step of the booking form using codes.

You have booked {service_name} by {staff_name} at {service_time} on {service_date}. Price for the service is {service_price}.
Please provide your details in the form below to proceed with booking.

The if block in your content template serves for handling conditional cases. When included, Bookly will assess the condition and generate the content accordingly. For instance, if you want to display a line with booked extras only when they are present, the following configuration ensures that the line appears only when extras are included in the booking.

You selected to book {service_name} by {staff_name} at {service_time} on {service_date}.
{#if extras} Additional items: {extras} {/if}
The total price of your booking is {total_price}.
Please provide your details in the form below to proceed with booking.

You'll find that certain codes are applicable across all booking steps, while others are specific to particular Bookly add-ons. Extra codes linked to specific add-ons will appear in the drop-down list of the editing screen only if the corresponding Bookly add-on is activated.

If you use add-ons that allow booking of multiple appointments in a single session, it's possible to iterate over those appointments to display distinct information for each item.

To achieve this, use the each block:

{#each appointments as appointment}

    YOUR CONTENT

{/each}

Within this block, "YOUR CONTENT" may include any text and codes and will be repeated for each appointment in the list. Special codes for displaying information about the current appointment start with 'appointment.', e.g., {appointment.service_name} or {appointment.appointment_date}.

If you prefer to display items in a single line with a delimiter to separate them, you can use the following structure:

{#each appointments as appointment delimited by ", "}YOUR CONTENT{/each}

Remember to apply and then save the changes.

This example illustrates how multiple booking details can be listed sequentially on the Details step of the booking form.

You have booked
{#each appointments as appointment}
{appointment.service_name} by {appointment.staff_name} at {appointment.appointment_time} on {appointment.appointment_date}
{/each}
The total price of your booking is {total_price}.
Please provide your details in the form below to proceed with booking.

The details of each booked service will be presented on individual lines.

This example illustrates how multiple booking details, including extra items, can be listed sequentially on the Details step of the booking form. To incorporate codes for extra items, use them inside the structure {#each appointment.extras as extra delimited by ", "}YOUR CONTENT{/each}.

You have booked

{#each appointments as appointment}
{appointment.service_name} by {appointment.staff_name} at {appointment.appointment_time} on {appointment.appointment_date} with extra item(s) {#each appointment.extras as extra delimited by ", "}{extra.title}{/each}
{/each}

The total price of your booking is {total_price}.
Please provide your details in the form below to proceed with booking.

If you want to show information about booked extras only when they exist, incorporate the if structure within the each structure.

This example illustrates how booking details can be displayed when a customer books 2 services with 1 extra item purchased for 1 service.

You have booked

{#each appointments as appointment}
{appointment.service_name} by {appointment.staff_name} at {appointment.appointment_time} on {appointment.appointment_date}{#if appointment.extras} with extra item(s) {#each appointment.extras as extra delimited by ", "} {extra.title}{/each}{/if}
{/each}

The total price of your booking is {total_price}.
Please provide your details in the form below to proceed with booking.

More drastic changes, such as removing unnecessary booking steps and/or fields, can be made when adding the form to the site.

Browse common questions

How can I change the color or the font size of a warning message?

How to hide Category / Service / Employee fields in the booking form?

How can I change text color in Bookly booking form?

How do I remove the payment step from the booking form?

Next button doesn't work in the booking form

  DEMOVIDEO TUTORIALSMAIN BOOKLY SETTINGSFAQADD-ONS