Add a booking wizard to your site

To add a booking wizard to your site, go to Shortcodes → Add New → Appointment form.

shortcodes menu

This visual shortcode generator allows you to customize the look of your appointment booking form:

  • Tick form fields that must be displayed and optionally add the form title:

booking form title

This is useful when you don’t want customers to choose fields, for example, you can hide an employee field:

image4

As you see, all for fields except for the service are optional.

  • Rename default field labels
  • Set default values
  • Optionally add CSS or custom HTML
image41

You can also customize the form timepicker layout: the number of columns and whether to show the start and end time of the appointment or just the start time:

timepicker

Once all the needed changes are applied, save them and the shortcode will be automatically generated.

form shortcodeNow you can paste this shortcode to any page using the default Shortcode block for the block editor or any other shortcode-specific widget by third-party builders like Elementor.

booking page shortcode

Note: changes you set in the shortcode general apply globally to all forms; if you use the booking form on different pages and want to make different changes to individual forms, you need to customize chosen shortcodes only using the needed shortcode parameters from the Help menu:

image43

The shortcode will run the one-page booking wizard for your clients, where they’ll be offered to complete several steps to submit a booking.

Since Appointment Booking plugin 1.3.0, you can add the booking widget and other plugin-generated content using the block editor, Elementor or Divi visual builders. For example, let’s take a look at the Elementor widgets generated by the Appointment Booking plugin:

Elementor widgets Elementor

Each of these widgets comes with its own set of settings. For example, in the Appointment form widget below, you can show, hide or rename the needed booking wizard fields:

editing booking widget

All the other builders, the block editor and Divi, will offer you to choose the same widgets via their interfaces.

Let’s take a class booking example from our Edme appointment booking WP theme to see the process your clients will need to go through.

Step 1. Choose a service category, service, location, and an employee (or optionally go with ‘any’).

image6

Step 2. Select the date and time and choose a free slot from available ones. Note: since plugin version 1.4.0, clients can add several services to cart during one submission process and choose the number of people they are booking an appointment for.

image7

Step 3. Clients provide personal details (an email address, name, and phone number). Here might be payment gateways shown if you turned them on.

image5

Note: Your booking wizard might look different depending on your settings.