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.
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.
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.
Once all the fields are filled in, click the Book Now button and see the form was successfully submitted:
4 Step — Checking the field in the phpMyAdmin
Afterward, navigate to the phpMyAdmin and check whether the field got completed.
5 Step — Checking 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.
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:
Congrats! Now you know how to display the booking form on your Single Post page.