Displaying the Booking Form

Want to display a booking form on your website so visitors can book appointments and services? Sugar Calendar Bookings makes it easy to add booking forms to any page or post using either the Block Editor or shortcodes.

This guide will show you how to display booking forms on your site using both methods.

---

Before you can display booking forms on your site, you’ll need to:

• Have Sugar Calendar Bookings installed and activated on your site
• Create at least one service that customers can book

If you haven’t set up services yet, check out our guide on creating and managing services.

Displaying Booking Forms with the Block Editor

The Block Editor method is the easiest way to add booking forms to your WordPress pages and posts. Here’s how to do it:

Adding the Booking Form Block

First, edit the page or post where you want to display the booking form. In the Block Editor, click the + button to add a new block. After that, search for “Booking Form” and click on it to add it to your page.

Configuring Block Settings

Once you’ve added the Booking Form block, you’ll see several customization options in the block settings sidebar.

Services

Use the Services field to specify which services should be available for booking. You can:

• Leave the field empty to show all available services
• Use the search functionality to find and select services

Service Summary Settings

These options control how service information is displayed:

• Show Service Image: Toggle this to show or hide service images
• Show Description: Toggle this to show or hide service descriptions

Time Slot Layout

This settings lets you choose how time slots are displayed:

• 2 Column: Shows time slots in a two-column layout
• 3 Column: Shows time slots in a three-column layout

Form Appearance

This option controls the visual appearance of your booking form:

• Light: Uses a light color scheme
• Dark: Uses a dark color scheme
• Auto: Automatically adapts to the user’s system styling

You can also toggle Hide Sugar Calendar Branding to remove Sugar Calendar branding from the form if desired.

Displaying Booking Forms with Shortcodes

If you’re using the Classic Editor or want to display booking forms in widgets, you can use the shortcode method.

Getting the Shortcode

The easiest way to get the shortcode for a specific service is through your services management area.

Start by navigating to Bookings » Services from the WordPress admin area.

Once there, hover over the service you’d like to display and select Share.

In the Share Service dialog, you’ll see the shortcode for that specific service. Click the Copy button to copy it to your clipboard.

Using the Shortcode

Once you have the shortcode, you can paste it into any page, post, or widget where you want the booking form to appear.

Basic Shortcode Format

The basic format for the Sugar Calendar booking form shortcode is:

[sugar_calendar_bookings_form]

To display a booking form for specific services, use the service_id parameter:

[sugar_calendar_bookings_form service_id="1,2"]

Replace “1,2” with the IDs of the services you want to include, separated by commas.

After adding either the shortcode or booking form block, make sure to save your changes and publish the post/page.

Users will be able to book an appointment for the service(s) you displayed on the booking form. Here’s a preview of the Booking Form in the frontend.

That’s it! You now know how to display booking forms on your website using both the Block Editor and shortcodes.

Next, would you like to manage appointments on your site? See our tutorial for details on managing appointment bookings.