You can customize and add the appointment booking form in a few ways:
- With a shortcode: Appointments > Shortcodes > Add new > Appointment form.
- Visually in the WordPress block editor/Elementor/Divi. There is a dedicated ‘Appointment form’ content element.
Using either method, you can:
- customize the form title.
- choose which fields to display and which to hide.
- customize booking form field labels.
- pre-select values for fields if you want to enable booking of individual services/locations/employees.
- select a preferable number of columns in the timepicker.
- show the start-only or start and end time of the appointment.
If you want to hide all the fields and enable booking for a specific service, location or employee, it’s necessary to pre-select values for them. This way you will enable customers to start a booking process from the availability calendar, without a need to apply search filters in the booking form.
If you don’t pre-select locations and employees, the first ones will be chosen automatically, which means for more tailored booking experiences, it’s recommended to select all the values.
For example, you might want to display the service field available only in a specific location – then you can choose the location but don’t even show the location field in the booking widget.
To customize the booking form in the block editor, simply drag the widget to the page, configure your preferences and save the page.
You can apply the same changes in the shortcode editing interface. Once you are done with your edits, 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.
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.
If you turn off the all the fields and pre-select the values for them, the booking process starts with the availability calendar:
