Back to contents

JetAppointment: How to Set Appointment Booking Forms

Follow these steps and handy tips to create and configure the appointment booking form to be placed on any page of your website.

You already know that JetAppointment is a powerful addition to the JetEngine plugin. Using these two together, one can easily create a fully workable appointment booking form that can be published on any front-end page of the website. In this tutorial, we’ll be covering the Forms-related issues.

All right, let’s get started!

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.

Finish screen

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.

NOTE. These forms are not the only options that go with the JetAppointment plugin. You can also create a separate booking form and place it on the Provider’s single page—we’ll cover this issue later.

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:

appointment forms

Static Page Booking Form

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

Static Page Booking Form

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.

NOTE. All the above-mentioned fields are required. We strongly recommend not to remove any of them for the Form to operate properly.

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.

NOTE. If you have created additional database columns on Step 2 of JetAppointment setup, you must create the corresponding fields in the forms. Otherwise, they won’t work properly.

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:

phone number field

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.

page break

You can add as many page breaks to match the number of steps. As a result, you might create something similar to this:

filling a booking form

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.

By default, the fields look like this; but keep in mind that you can rewrite the texts if needed.

messages settings

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.

single service booking form

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.

NOTE. All the above-mentioned fields are required. We strongly recommend not to remove any of them for the Form to operate properly.

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.

1 Step — Create a new form

Go to JetEngine > Forms and click the “Add New” button. You’ll see a form creation window:

new form

Name your form and focus on Fields Settings.

2 Step — Set up the fields

The first field, post_id, needs to be renamed according to the Post Type name that is associated with Providers.

providers id field

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:

services field

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 doublecheck the settings before publishing/updating your Single Provider Booking Form.

date field

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.

3 Step — Configure Notifications Settings

By default, the Form’s Post-submit Actions include the Send Email option. Here you can choose who do you want to Mail to and Reply to, type in Subject, From Name, and From Email Adress. 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.

send email settings

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:

Hit the “Apply Changes” and then “Publish” buttons.

4 Step — 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.

form widget settings

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.

book an appointment front end1

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.