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:

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.

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.

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.

Also, there are special Appointment Macros. Let’s have a closer look at them:

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

It would be totally fine to leave it like that, but we want the plugin to go the extra mile and Insert Appointment as soon as the “Submit Now” button is pushed.

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.

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.