FreeSince v1.0.0

Adding the booking form to your site

The booking form is what your customers actually use. Adding it is one shortcode on one page — it works in every editor and adapts to whatever width you give it.

Put it on a page

  1. Create a page
    Call it something obvious, like “Book an appointment”.
  2. Add the shortcode
    [schedopia_booking]
  3. Publish
    and visit the page. That is the whole setup.
Where to find it

The shortcode is also shown, ready to copy, under Settings → Shortcode.

Which editors it works in

Editor How
Block editor (Gutenberg) Add a Shortcode block and paste it in.
Elementor Use the Shortcode widget.
Classic editor Type it straight into the content.
Other page builders Any widget that renders shortcodes will work.
One form per page

Only one booking form can appear on a page. If you add the shortcode twice, only the first renders — the two copies would otherwise fight over the same state and neither would work properly.

What the customer sees

Three steps, with a progress indicator across the top.

1 · Service

The booking form's service step, showing category filter chips and service cards with duration, staff count and price
Choosing a service.

Services are shown as cards with their duration, price and how many staff offer them. If you use categories, filter chips appear across the top. Picking a service reveals the staff choice, and any add-ons attached to it.

2 · Time

The booking form's time step, showing a date strip and available times grouped into morning, afternoon and evening
Choosing a date and time.

A date strip runs across the top, and the available times for the chosen day are grouped into morning, afternoon and evening. Only slots that genuinely fit the whole appointment appear. A running summary of the booking and its total stays visible alongside.

3 · Information

The booking form's information step with name, email, phone and notes fields
Entering contact details and confirming.

Name, email and phone, plus a notes field. On submit the booking is created, the customer sees a confirmation with their reference number, and their confirmation email goes out.

On phones

The form is mobile-first and sizes itself to its container rather than the browser window — so it looks right in a narrow column, a sidebar or a full-width page without any configuration.

The booking form rendered at mobile width
The same form at phone width.

Nothing to book

If no service is bookable yet, the form shows a friendly message instead of an empty shell. That usually means you have no active services, or none of them has a staff member assigned — see what to check.

Next