Add a booking wizard to your site

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

image34

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

  • Tick form fields that must be displayed:

image47

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

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

image21

Now 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.

image45

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.

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).

image5

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 also see what you can do with the rest of the shortcodes.