How to Add the Step-by-step Booking Form to Your Website
Our developers worked harder to make Amelia better, to make it work faster, and to make your front-end booking pages stronger!
In order to add this booking form to your website, you will need to add Amelia’s shortcode to one (or more) of your website’s pages. You can add Amelia’s shortcode using different page builders: Gutenberg, Elementor, Classic editor, and Divi Page Builder.
If you use another page builder or cannot find the shortcode button you can use the next shortcodes:
- [ameliastepbooking] if you want to show the basic Step-by-step Booking wizard,
- [ameliastepbooking category=1] if you want to show only the services from a category with ID 1,
- [ameliastepbooking service=1] if you want to show the booking form for the service with ID 1.
- [ameliastepbooking employee=1] if you want to show the booking form for the employee with ID 1,
- [ameliastepbooking location=1] if you want to show the booking form for the location with ID 1,
Or any other combination that you need. Also, if you have Packages (Pro or developer license) you can choose whether you will show just services, just packages, or both.
- [ameliastepbooking show=services] if you have Packages enabled, but you only want to show services in the form,
- [ameliastepbooking show=packages] if you have Packages enabled, and you only want to show packages, without services in the form.
Just put the shortcode on the page and “Publish” it. You will find all the shortcodes available for Amelia on the Amelia Shortcodes page.
If you’re still using the Classic editor, you will be able to use Amelia’s icon to select and insert the Step-By-Step booking form through the editor.
After you click on it, the Amelia booking widget will open. Select “Step Booking” from the drop-down, click “OK”, and publish your page. This will show you the basic booking form with all the options for choosing the services, locations, and employees (if you have more than one). However, if you want to show a booking form for one specific employee, location, or service, or you want to show the services from one specific category, click on the “Preselect Booking Parameters”. Four new options will appear so you can show a different booking form. These options allow you to set, for example, a different booking form for each employee. If you have the “Packages” feature in Amelia (available only in Pro or Developer license plans), there is also an option to choose whether you will show only services or only packages in the form, or both.
Step-by-step Booking View on Front-end
This email is clickable, so when clicked, it will open a new email window so a customer can reach out to you directly.
The numbers in brackets next to Category names represent the number of services that are created (and set to be visible on the front-end) in that specific category.
You’ll also notice that once you click on the drop-down again, you’ll only be able to select the services within that category. In order to see all categories again, you’ll need to click on the ” X ” icon on the far right of the drop-down. The same behavior can be seen with employees and locations below, so if you want to change the employee and/or the location of the service you selected, you can clear the Employee or the Location selection by clicking on ” X “.
Also, in the side menu, you’ll see that the “Service Selection” step has been populated with the name of the service, employee, and location.
All available dropdowns in the form function as filters, so if (for example) you select an Employee first, Locations and available Services will be filtered per that employee.
If the customer skips the offered packages
Once the date is selected, the available time slots will appear below.
If the service is free, this screen will not appear.
PayPal changes the button to a yellow “PayPal Checkout” button, indicating the customer will open a PayPal checkout window once they click on it:
Stripe payment integration is embedded in Amelia’s booking form, so when this is selected, your customers will see that the payment is protected by Stripe.
Mollie, RazorPay, and WooCommerce will lead the customers away from Amelia’s booking form, so they will see a notice that says “You will be redirected to the payment checkout.”:
They’ll also be able to add the appointment to their Google, Outlook, Yahoo, or Apple Calendars by clicking on one of the options in the top left.
At the bottom, they can directly access the “Customer Panel” (if you configured it) or click on “Finish” to close the form. By clicking on the “Finish” button, the default action is for the booking page to refresh, but you can also configure a custom page that can be added to the “Redirect URL After Booking” section in Amelia’s General Settings.
If the customer selects one of the offered packages
The “Your Information” section is displayed straight away only if you set the “Minimum bookings required” and the “Maximum bookings required” to “0”. If the “Maximum bookings required” is set to anything but “0”, the customers will have the option to book appointments, and if the “Minimum bookings required” is set to anything but “0”, the customers will have to book the number of appointments defined in “Minimum bookings required”.
The dates and times of all booked appointments are visible in the preview on the left-hand side menu as soon as they are selected and the next screen shows the overview of the package that’s being booked.