Back to contents

JetBooking: How to Create a Booking Form

This tutorial will show you how to create a booking form with the help of JetEngine and JetBooking plugins.

Create a booking form for your website using JetEngine and JetBooking plugins. It’s really a great feature that allows you to create a form and customize it according to your needs. For example, you’ll be able to add different fields and set notifications that the customer will receive after submitting the form. So, let’s start!

1 Step — Creating a booking form

It’s time to proceed with creating a booking form. Navigate to the JetEngine > Forms and add a new one. The tutorial dedicated to booking form functionality can be found here.

NOTE!
Furtherly, it is obligatory to add a booking form to the Single page!
JetEngine forms block

2 Step — Fields Settings overview

As for our particular case, we’ve created a form called Form for Room. Let’s overview it closer. For our tutorial, we created such fields as Number of People, which could be selected by the visitor, First Name and Last Name, e-mail.

Form for Room
NOTE!
With the JetBooking plugin a brand-new field type, called Check-in/ check-out dates is available! It allows selecting the period a visitor wants to book from the booking form front-end.
Fields settings

3 Step — The Hidden field in the booking form

The booking form creates a hidden field called post_id by default. Please, don’t delete it, while we need it further!

Hidden field

4 Step — Notifications Settings overview

Let’s move to set up your booking form’s Notifications Settings block. Add a new one and choose the Insert Post type, which means that the information from the submitted form will be added to the CPT we’ll specify.
Do you remember that we created the second CPT called “Orders”? It should be selected in Post Type’s settings.
Below, you can see the Fields Map, which stands for pulling the meta fields, created with the CPT we want the information to be added to. As for Orders CPT, we haven’t created any meta fields, that’s why we’ve got only post_id.
Save the changes and proceed with the adding of a new notification.

Insert post notification type

5 Step — Setting the Booking notification type

In the newly added notification, you need to choose a Booking type. Then, in the Apartment ID field, you need to select your post_ID. It’s information from the hidden field, we added in Step 3.
Next, there’s a field called “Check-in/Check-out date”. Here you need to select the corresponding field from the Fields settings.
And finally, in the DB columns map block you see names of the columns created before.

Notifications settings
NOTE!
Please note, that “inserted_post_id” should be set in the field, in which ID of the corresponding order will be stored in your booking table.

6 Step — Adjusting the Send Email notification type

Alright, the last part of the booking form we need to set up is the Send Email notification. It allows sending an email to your clients after they have successfully booked the housing. Please feel free to follow this tutorial where you can learn more about the notification settings.

Send email notification type

Fantastic! We’ve built a booking form and now we need to display it on the website!
Follow the next tutorial to find out how to do it.