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 – this form allows clients to select a preferred date first, and then see which services and staff members are available on that day;
• Services form – this form allows you to organize services using categories, displaying them conveniently for your customers – in a catalog view;
• Staff form – this form allows clients to select a preferred employee first, and then see which services are associated with them;
• Default booking form – classic step-by-step scheduling process.
• Cancellation form – a form where clients can cancel their appointment and optionally specify a reason.

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

How to set up classic Bookly booking form

Choose Step by step form.

Use the color picker to make the booking form fit right into your site and branding.

Navigate through each tab to modify your booking form as you prefer.

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

You can add personalized texts to various booking steps in Bookly and display custom content depending on your scenario. Choose from a whole range of placeholders (codes) to present information with booking details according to your specific needs.

Customize content that will be displayed in the booking form

Select the tab that reflects the step of your booking form. Click on the underlined text. A pop-up window will appear where you’ll be able to enter and edit the text. When you’re done click Apply. Then click Save at the bottom of the page.

You can use codes that will add dynamic content to your booking form. For example, if you want to include the employee’s name on some step, simply add {staff_name} in your text and this code will be replaced with the name of your staff.

To do this, in the pop-up Edit window, start typing "{" or the code title to see the list of all available codes. Enter your text using the codes from the list. When you’re done click Apply. Then click Save at the bottom of the page.

This example demonstrates 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 can be used for conditional cases. If it is included in your content template, Bookly will check the condition and generate the content accordingly. For example, some bookings include extra items, others don’t. The following configuration will display the line with booked extras only in case if there are any.

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 will notice that some codes are common for all booking steps and some are only available for specific Bookly add-ons. These extra codes will be available in the drop-down list of the editing screen only if the corresponding Bookly add-on is installed and activated.

If you use add-ons that allow your clients to book multiple appointments in one session, you can iterate over those appointments to display separate information for each item.

To do so use the each block:

{#each appointments as appointment}

    YOUR CONTENT

{/each}

YOUR CONTENT may include any text and codes and will be repeated for each appointment in the list. Within the each block there are special codes for displaying information about the current appointment. These codes start with 'appointment.', e.g. {appointment.service_name} or {appointment.date}.

 If you want to display items in one line and you need a delimiter to separate the items from each other, then you can use the following structure:

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

Do not forget to apply and then save the changes.

This example demonstrates how multiple bookings details can be listed in order 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 displayed on a separate line.

This example demonstrates how multiple bookings details with extra items can be listed in order on the Details step of the booking form. Codes available for extra items should be used inside of {#each appointment.extras as extra delimited by ", "}YOUR CONTENT{/each} structure.

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 wish to display info about booked extras only in case if there are any, use if structure inside the each structure.

This example demonstrates how bookings 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, like removal of unnecessary booking steps and/or fields, can be done 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