Booking Form Look & Feel

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

In the Appearance section of Bookly, you will see three 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.

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.

How to set up new modern Bookly booking forms (Search form, Services form and Staff form)

Select the form type that you want to set up and publish. Click Add new form.

To modify the elements, rename the field label and edit the texts, click on the desired area and update the existing template on the right side.

You can change the width of the service card, select the main color of the booking form and its slug.

Clicking on the service card allows you to customize its content:

• Header height – the area where the service image is displayed;
• Card content – select the properties you want to be viewable in a booking form;
• Order of content – use drag & drop to place available options the way you wish.

Also, it's possible to use your custom CSS to re-style the booking form as you need.

To set up a category or service-specific forms (applies to the Services form), choose Custom on the right, and select which categories and services you’d like to make viewable for your customers.

When you’re finished with setting up, click Save. Then click on the Back button.

A unique shortcode of the booking form (for example, [bookly-search-form my-form] or [bookly-services-form my-form-413]) you created will be viewable on its card. Click on the menu button to copy it, clone, or delete.

Go to the Pages or Posts and insert this shortcode to a page where you want to publish your booking form.

You can create multiple custom forms for specific services and staff members and place them on the relevant booking pages. All reservations created through these forms will be added to one Bookly Calendar.

Check this video tutorial to get the most out of Bookly (for versions before Bookly Pro 5.3).

Check this video about the Services 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