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;
  • Default booking form – classic step-by-step scheduling process.
  • Cancellation form – a form where clients can cancel their appointment and optionally specify a reason.

bookly-pro-appearance-09.png

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.

Appearance section in Bookly PRO

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.

Appearance section in Bookly

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.

Appearance section in Bookly

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.

Customize template for booking form

Bookly booking form

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.

Customize template for booking form

Bookly booking form

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.

Customize template for booking form

Bookly booking form

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.

Customize template for booking form

Bookly booking form

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.

Appearance section in Bookly – customize texts

Bookly booking form – Details step

More drastic changes, like removal of unnecessary booking steps and/or fields, can be done when adding the form to the site.

Important

If you change or translate the titles of buttons (for example, Next button), then in order to apply changes in the Bookly mobile version, you will need to log into your WP dashboard from your mobile phone (or open developer tool and turn on responsive design mode in mobile view), go to Bookly > Appearance and at each step input the needed text in the box. Make sure you save all the changes.

How to set up Bookly Search and Services forms

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

Appearance section in Bookly PRO – Search 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.

Appearance section in Bookly PRO – Search form

You can change the width of the service card, select the main color of the booking form and its slug. 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.

bookly-pro-appearance-13.png

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.

Appearance section in Bookly PRO – Search form

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.

Please note that currently we offer the Search and the Services forms in beta. The new forms are not compatible with all Bookly add-ons yet, but we keep working on full integration.

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 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

 

DEMO | VIDEO TUTORIALS | MAIN BOOKLY SETTINGS | FAQ | ADD-ONS

 

Was this article helpful?
1 out of 2 found this helpful

Articles in this section