Help Center


Booking Form Look & Feel

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

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

bookly-pro-appearance-01.png

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.

bookly-pro-appearance-02.png

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.

bookly-pro-appearance-04.png

How to 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.

bookly-appearance-04.png

bookly-appearance-04-ex.png

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.

bookly-appearance-05.png

bookly-appearance-05-ex.png

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.

bookly-appearance-06.png

bookly-appearance-06-ex.png

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.

bookly-appearance-07.png

bookly-appearance-07-ex.png

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.

bookly-appearance-08.png

bookly-appearance-08-ex.png

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

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

 

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?

 

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

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk