This article explains how to configure modern Bookly booking forms: Search, Tags, Services, Staff, Cancellation, and Checkout forms.
If you’re not sure which booking form to use, see Choose a booking form.
Modern booking forms include:
- Search form: customers choose a date first, then see available services and staff members.
- Tags form: customers filter services by tags or subcategories.
- Services form: customers browse services in a catalog view.
- Staff form: customers choose a staff member first.
- Cancellation form: customers cancel appointments from your website.
- Checkout form: customers pay for appointments, events, or tickets through a direct link.
Go to Bookly > Appearance, choose the modern form type you want to set up, and click Add new form.
To edit labels, texts, or other form elements, click the area you want to change and update its settings on the right.
When you click the Service or Staff select drop-down field, you can choose to display them and set a default value.
In Settings, you can edit the form title, copy its slug after saving, and choose the main color.
You can also use ready-made themes and styling presets for modern booking forms. Choose a theme, customize the colors if needed, and click Apply theme.
In the form settings, you can choose a theme, enable an adaptive card grid, make the form background transparent, change the filters and calendar position, adjust corner rounding and card shadows, or hide form borders.
After updating the style settings, click Save.
Initial view of the booking form
- Form: The booking form will appear on your webpage in its standard view.
- Button: The booking form will open in a modal window when the user clicks a button.
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 name 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.
If you need more control, you can still apply custom CSS to style the booking form.
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 controls which cards are loaded first in the form.
- Show cards with time slots only: shows only service, staff, and location combinations with available time slots for the selected day.
- Show all available cards: shows all cards. If no time slots are available, customers will see a “No time slots available” message.
The second option can be useful for packages, gift cards, or large setups where loading all cards improves performance.
To let customers add booked appointments to Google, Outlook, Apple, or Yahoo Calendar, enable Add to calendar on the final step of the booking process.
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.
To publish the form, add its shortcode to a WordPress page or post. Learn more: Publish Booking Form.
You can create multiple custom forms for specific services and staff members and place them on the relevant booking pages. All appointments created through these forms will appear in the same Bookly Calendar.
Tags form
After assigning tags to your services in Bookly > Services, you can create a Tags form based on those tags.
Tags can serve as categories or subcategories, allowing customers to filter services while navigating the booking form.
To create a Tags form:
1. In Bookly > Appearance, choose Tags form.
2. Click Add new form.
3. On the Tags tab, click Add subsection.
4. Select the tags you want to display in this step.
5. Add more subsections if you want to create additional filtering steps. To remove a tag from a step, click it in the subsection.
6. Click Save.
If customers select Tag A, Tag B, and Tag C in different steps, Bookly will show only services that have all three tags.
Main Settings
In Main Settings, you can configure:
- Section title: the text shown to customers on this step.
- Allow skip: lets customers skip the tag selection step.
- Skip button title: the text shown on the skip button.
- Width / Header height / Body height: the size of the tag cards. The tag title, description, and image are configured in Bookly > Services.
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?