Back to contents

JetBooking: How to Display the Booking Form on the Single Post Page

From this tutorial, you will find out how to display an already created booking form on your website.

After you’ve created your booking form with the help of JetEngine and JetBooking plugins, you’ll need to display it on your website. This tutorial will show you how to add your form easily on the Single Post Page using the Booking Form widget. Also, you’ll see how to edit the post in the Orders CPT.
So, let’s start!

1 Step — Editing the Single post type in Elementor

Once you are done with the booking form settings, proceed to the Single post page (created before) and edit it with Elementor.

Single post page

2 Step — Using a Booking Form widget

The next step, is to drag-n-drop a Booking Form widget from the panel and drop it to the best suiting place.

Booking form widget

In the Select form settings, select the form we’ve prepared. Style it up if you want and save the changes.

3 Step — Booking form in action

Let’s have a look at how the form works on the frontend and check the changes that appear in the database. After that, fill in the fields.

Filling in the form
In the Check-in and Check-out fields, the client can select a period for which he wants to book the residence.
Check-in and check-out

Once all the fields are filled in, click the Book Now button and see the form was successfully submitted:

Form submitted

4 Step — Checking the field in the phpMyAdmin

Afterward, navigate to the phpMyAdmin and check whether the field got completed.

Checking the field in the phpMyAdmin

5 Step — Checking the Orders CPT

Also, navigate to WP Dashboard and check the Orders CPT:

Checking the Orders CPT

If you see these pending orders, that means that you as an administrator received the new ones.

6 Step — Editing the post in the Orders CPT

Let’s edit the post in the Orders CPT. Here you see a section, containing all the data submitted by your client. Basically, it’s also the information, which is stored in your database:

Editing the post in the Orders CPT
If any changes are needed (for instance, changing customer’s email or check-in/check-out dates) just click the Edit option to apply the required alterations.
Booking Data
Changes would be visible in the database as well.

Congrats! Now you know how to display the booking form on your Single Post page.