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.
How to show a booking form to Single Page template
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.
Using the 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.
In the Select form settings, select the form we’ve prepared. Style it up if you want and save the changes.
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.
Once all the fields are filled in, click the Book Now button and see the form was successfully submitted:
Checking the field in the phpMyAdmin
Afterward, navigate to the phpMyAdmin and check whether the field got completed.
Checking and editing the Orders CPT
Also, navigate to WP Dashboard and check 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:
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.
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/widget.png")
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.
Now you know how to display the booking form on your Single Post page.