Modern booking forms

In the Appearance section of Bookly, you'll find a variety of booking form templates that can be customized to align with your brand and business requirements.

  • Search Form: This form allows customers to first select their preferred date, then view available services and staff members for that day.
  • Services Form: Organize your services into categories for a user-friendly catalog view, making it easier for customers to browse.
  • Staff Form: Customers can first choose their preferred staff member and then view the services associated with them.
  • Default Booking Form: The classic step-by-step scheduling process. Learn more here.
  • Cancellation Form: Here, clients can cancel appointments and optionally provide a reason.

bookly-pro-appearance-09.png

This article provides instructions on how to configure modern Bookly booking forms, including the Search form, Services form, and Staff form.

Choose the form type you want to set up and publish, then click Add new form.

bookly-pro-appearance-10.png

To make changes to elements, such as renaming field labels and editing text, click on the desired area and update the template on the right side.

bookly-pro-appearance-11.png

When you click the Service or Staff select drop-down field, you can choose to display them and set a default value.

bookly-pro-appearance-18.png

You can customize the form title, its slug (after saving the new form), and select the main color in the Settings.

bookly-pro-appearance-19.png

By clicking on a service card, you can tailor its appearance and content in the following ways:

  • Adjust the width of the service card by moving the pointer on the range control;
  • Modify the header height, which is the area where the service image is displayed;
  • Select the properties you want to be visible in the booking form as part of the card content;
  • Arrange the order of content according to your preferences using drag & drop.

bookly-pro-appearance-15.png

Additionally, you have the option to apply custom CSS to style the booking form as needed.

To configure category or service-specific forms (applies to the Services form), select Custom on the right and choose the categories and services you want visible to your customers.

bookly-pro-appearance-13.png

To hide the Categories or Services steps, access the form settings and choose the relevant options.

bookly-pro-appearance-20.png

Cards display mode setting allows you to switch between timeslot search modes for your booking form, affecting which cards are initially loaded and displayed in the form.

We use the term "card" to refer to records displayed in modern forms. These cards contain information about the selected service, staff, and optionally the location. Users can click on a card to select a time slot and provide booking information.

  • Show cards with time slots only – if you select this mode, the form will display cards only for staff, service, and (optional) location combinations that definitely have available time slots on the selected day in the calendar. This mode is recommended if you want your clients to quickly find an available time slot. Please note that this setting will not block days on the calendar that do not have available time slots.
  • Show all available cards – in this mode, the form will display all cards. If there are no available time slots for the selected day for the staff, service, and (optional) location, the end user will see a "No time slots available" message. This mode is recommended if you want to display only packages and/or gift cards in your form, as these cards do not require the search for timeslots. Also, this mode can improve the performance of modern forms, especially if you have a large number of services and staff members.

Your customers can easily add their newly scheduled appointments to their preferred calendars, Google, Outlook, Apple, or Yahoo, all within the booking form without any need to leave the booking page.

To activate this feature, go to the final step in the booking process, and enable the Add to calendar option.

Appearance section in Bookly

Once you've finished configuring, click Save, and then click the Back button.

A unique shortcode for the booking form, such as [bookly-search-form my-form] or [bookly-services-form my-form-413], will be displayed on its respective card. Click the menu button to copy, clone, or delete it.

bookly-pro-appearance-12.png

Go to the Pages or Posts and insert this shortcode into the page where you wish 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 consolidated into a single Bookly Calendar.

Please note that currently we offer the Search, the Staff 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.

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

Was this article helpful?
0 out of 0 found this helpful

Articles in this section

See more