Classic form (Step-by-step booking form)

This article explains how to customize the classic step-by-step booking form.

If you’re not sure which booking form to use, see Booking form types / Choose a booking form.

How to customize the classic booking form

You can customize the layout, colors, labels, fields, and step texts of your booking form. To edit the form:

1. Go to Bookly > Appearance.

2. Choose Step by step form.

3. Adjust the form settings in the available tabs.

4. Click Save.

Customize colors

Use the color picker to adjust the main colors of the classic booking form so it matches your website design.

After updating the colors, click Save.

Edit texts and add booking details

You can edit the text shown on each booking step.

Click the underlined text to open the editing window. Enter your text and add codes such as {service_name}, {staff_name}, or {total_price} to show booking details dynamically.

Start typing `{` to see the available codes. Click Apply, then Save.

Example:

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.

For the full list of available codes, see All Placeholders.

Advanced: conditional and repeated content

Use conditional blocks to show text only when specific booking information exists.

Example:

{#if extras} Additional items: {extras}{/if}

If you use add-ons that allow several appointments in one booking session, use repeated blocks to show details for each appointment.

Example:

{#each appointments as appointment}
Service: {appointment.service_name}
Staff member: {appointment.staff_name}
Date and time: {appointment.appointment_date} at {appointment.appointment_time}
{/each}

Hide steps or fields

To hide booking steps or fields, adjust the shortcode settings when you add the form to a page.

Learn more: Publish Booking Form

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