To add a booking wizard to your site, go to Shortcodes → Add New → Appointment form.
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:
This is useful when you don’t want customers to choose fields, for example, you can hide an employee field:
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
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:
Once all the needed changes are applied, save them and the shortcode will be automatically generated.
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.
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:
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:
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:
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’).
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.
Step 3. Clients provide personal details (an email address, name, and phone number). Here might be payment gateways shown if you turned them on.
Note: Your booking wizard might look different depending on your settings.