How to Set Appointment Booking Forms (Legacy)
Follow these steps and handy tips to create and configure the appointment booking form to be placed on any page of your website.
JetAppointment Setup in WordPress
First things first, you’ve got to set up the JetAppointment functionality. The entire process is described in this step-by-step tutorial. After getting through all the required steps, you’ll end up having two default Forms: Static Page Booking Form and Single Service Booking Form.

Static Page Booking Form is meant to be added to any static page, whereas the Single Service Booking Form can be added to a service’s single page. The difference between these two forms is that there is no service select field on the single service page.
Now, let’s take a closer look at each Form. For starters, let’s navigate to the WordPress form storage — JetEngine. Go to JetEngine > Forms.
You’ll see all the forms you have created both manually and automatically. So far, we need these two:

Static Page Booking Form
Click to edit the form, and the first thing you will be shown is its Fields Settings.

Where:
- page_id is a Hidden field containing Current Post ID of the page that this Form is going to be posted on;
- service_id is a Select field pulling the information about the services from the Services post type;
- provider_id is an Appointment provider field storing the provider-related details and associating the services with their providers. It is possible to add a Custom template to this field and, thus, customize its front-end display.
- appointment_date is an Appointment date field interlinking the available providers and services for a particular date;
- user_email is a Text field allowing a user to leave their email when booking a service;
- Book Now is a Submit Button that submits the form to the back end once it’s been clicked.
The creation and setup of the Custom item template are described here.
These fields are the required minimum to ensure that the Form will work smoothly both on the front and back end. However, you can extend the Form by adding as many new fields as necessary. For instance, you can add First/Last Name, Phone Number, Comment, etc.
To add a new field, press the “Add Field” button, and then hit the edit icon next to the word “Fullwidth”. To set up the Phone Number field, for example, enter the following settings and press the “Apply Changes” button:

In the Fields Settings section, there’s also a possibility to break down your form into logical steps. To add a page break, press the “Add Page Break” button, and the new field will appear.

You can add as many page breaks to match the number of steps.
Lastly, the Form includes Messages Settings. Here you can see a row of fields, each containing a service message that is shown to users after they interact with your Form.
Keep in mind that you can rewrite the texts if needed.
Single Service Booking Form
Unlike Static Page Booking Form, which can be placed on any webpage, Single Service Booking Form is meant for being published on the Services Single page. If you don’t have any, make sure to create it with JetThemeCore or Elementor Pro.
Click to edit the form in JetEngine > Forms, and the first thing you will be shown is its Fields Settings.

Where:
- service_id is a Select field pulling the information about the services from the Services post type;
- user_email is a Text field allowing a user to leave their email when booking a service;
- provider_id is an Appointment provider field storing the provider-related details and associating the services with their providers. It is possible to add a Custom template to this field and, thus, customize its front-end display.
- appointment_date is an Appointment date field interlinking the available providers and services for a particular date;
- Book Now is a Submit Button that submits the form to the back end once it’s been clicked.
The creation and setup of the Custom item template are described here.
Just like with the previous Form, the Single Page Booking Form can be extended with some additional fields. The setup is similar to the one outlined in the Static Page Booking Form section of this tutorial.
The difference between these two forms is that the Single Service Booking Form contains no Service selector. The Form pulls the service ID from the Service’s single page, that’s why it is enough to pick the Provider and date/time to schedule an appointment.
Single Provider Booking Form
Except for the previously described forms, you can create a separate booking form that allows scheduling an appointment from the Provider’s Single.
Let’s check out how it works.
Create a new form
Go to JetEngine > Forms and click the “Add New” button. You’ll see a form creation window:

Name your form and focus on Fields Settings.
Set up the fields
The first field, post_id, needs to be renamed according to the Post Type name that is associated with Providers.

Don’t forget to click “Apply Changes” to save the settings.
Next, we’re going to be adding the Services field. To add a new field, press the “Add Field” button, and then hit the edit icon next to the word “Fullwidth”. Afterward, enter the following settings:

Make sure to click the “Apply Changes” button every time you have set up the new field.
When it comes to setting Date, you’ve got to be really focused. Make sure to double-check the settings before publishing/updating your Single Provider Booking Form.

Click the “Apply Changes” button and proceed to the last three fields— heading, user_name, user_email, and user_phone. These are all Text fields, and you configure them super easily.
Configure Notifications Settings
By default, the Form’s Post-submit Actions include the Send Email option. Here you can choose who you want to Mail to and Reply to, type in Subject, From Name, and From Email Address. Besides that, you can automatically add the data that the user inserts into the form to the Content text using macros. The list of available macros is displayed to the left from the text field.

%service_title% – with this macro you can display the name of the appointment service;
%provider_title% – allows to show the name of the provider;
%service_link% – display the link of the appointment service;
%provider_link% – link of the appointment provider;
%appointment_start% – this macro displays the date and time the appointment started;
%appointment_end% – displays the date and time the appointment ends. Also, there’s an opportunity to set the date format.

Press the edit icon and choose the “Insert appointment” option from the Type dropdown list. Next, configure this Notification Type in the following way:

As a result, you’ll get the following email.

Hit the “Apply Changes” and then “Publish” buttons.
Insert the Form in the Provider page
We’re almost done! It’s time to add a Single Provider Booking Form to the existing Single page. Reminder: if you don’t have any, you can create it in Theme Builder.
Go to JetPlugins > Theme Builder. Then find the Single tab in Theme Parts. In the newly-opened tab, find the Single page you would like to apply the Form to and click the “Edit with Elementor” button. Find the Form widget and drop it to the page.
In the Select form field of the Content tab, pick the previously created “Provider Form”. Choose between “Column” and”Row” in the Fields layout field. And in the Submit type field, pick either “AJAX” or “Reload”. AJAX allows users to fill in each step/section of the Form without refreshing the webpage. As to Reload, users will have to refresh the page each time they add new booking details.

After that, proceed to styling the Form according to your needs. In the Style tab, you’ll find a bunch of options to customize every tiny detail of your booking form.
Once you’re done with the Style settings, click the “Update” button and go check out the way your Single Provider Booking Form looks on the front end.
Manual Input in Booking Forms
If you have only one provider and one service for the entire site, or one provider for all services and vice versa, you could use Manual Input.
In such a way, you don’t need service_id and provider_id fields. You could replace them with a service/provider ID in the appointment_date field.
For instance, you have only one provider for all services, so you don’t need the provider_id field. Instead of that, go to the Single Service Booking Form and click to edit the appointment_date field.

In the Get Provider ID From field, select “Manual Input.” Type the ID of the Provider in the Set Provider ID (for Manual Input option) field.

Do the same in the Insert appointment notification type. In the Provider ID field, select “Manual Input.” And then type the ID of the Provider in the newly appeared field.
After setting the form, hit the “Update” button, place the form on the Service Single Page and look at it on the front end.
This is it! Hope this tutorial helped you get to grips with all sorts of appointment booking forms and taught you how to set them up properly.