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.

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.

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.

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

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

By clicking on the calendar area, you can select the mode for displaying available dates in the calendar.

• Display dates according to schedule: The calendar will show all staff working days, even if there are no available time slots left on that day.
• Disable dates without available timeslots: Bookly will grey out all busy days. Note that in this mode, the form loading time depends on the number of appointments, staff members, services, and locations.

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;
• Enabling the Show badge option will display the staff member's initials at the top of the service card;
• 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.

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

To configure category, staff or service-specific forms (applies to the Services form and Staff form), click on the category, service or staff card when you edit the appearance of your form, select Custom on the right and choose the values you want to display to your customers.

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

To hide specific services in the form, select them in the Hidden services dropdown menu.

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.

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.

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.

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