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 and a convenient Booking Availability Calendar 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. In the end, you’ll get through the Booking Availability Calendar widget usage.

So, let’s start!

How to show a booking form to Single Page template

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
NOTE!
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 and editing 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.

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
NOTE!
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
NOTE!
Changes would be visible in the database as well.

Booking Availability Calendar usage

This widget adds a calendar to the Single page and gives the user an opportunity to choose the check-in/out dates there. Besides that, it also shows the dates that are already booked. When the user chooses the dates in the calendar, they will be automatically placed to the Check-In and Check-Out fields of the booking form.

NOTE. Be aware that Booking Availability Calendar will only work on the Custom Single Page you create for apartments. It can’t be used on other pages or posts.

1 Step — Place the widget to the page

Go to the widget menu and find the Booking Availability Calendar widget. Drag and drop it to the place you want it to be.

Booking Availability Calendar widget

2 Step — Customize the calendar

This widget is very simple to use. In fact, it has only two options. The Allow to select dates option is switched on by default. This option allows the widget to place dates selected by the user to the Check-In/Out field of the form. If you turn on the Scroll to the form toggle, the page will be automatically scrolled down to the booking form once the user picks the dates.

Booking Availability Calendar settings

Turn on both of the toggles and that’s all. Now just go to the Style tab and customize the calendar to achieve the appearance you want. Here’s how the Booking Availability Calendar looks like on the frontend:

Booking Availability Calenrar front-end look

NOTE. For the Booking Availability Calendar to work correctly, you have to set Layout to “Single Field” in the Check-in/check-out dates form field.

Check-in/Check-out form field

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