{"id":18313,"date":"2020-02-14T13:53:56","date_gmt":"2020-02-14T13:53:56","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=18313"},"modified":"2025-08-13T08:02:20","modified_gmt":"2025-08-13T08:02:20","slug":"how-to-display-the-booking-form-on-the-single-post-page","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-display-the-booking-form-on-the-single-post-page\/","title":{"rendered":"How to Display the Booking Form on the Single Post Page"},"content":{"rendered":"\n

Users can add their JetFormBuilder<\/em> or JetEngine<\/em> forms to single pages built in Elementor and Block Editor (Gutenberg) using the Form<\/strong> and JetForm<\/strong> widgets\/blocks, respectively.<\/p>\n\n\n\n

Create the Single Page<\/strong><\/h2>\n\n\n\n
\n

Navigate to the Crocoblock > Theme Templates <\/em><\/strong>tab. Press the \u201c+ <\/em><\/strong>Add New<\/strong>\u201d button to create a single page. <\/p>\n\n\n\n

Fill in the fields in the Create a template<\/strong> pop-up window: select the \u201cSingle\u201d option from the Template Type<\/strong> drop-down menu, the builder from the Template Content Type<\/strong> drop-down menu, and fill in the Template Name <\/strong>field.<\/p>\n\n\n\n

Click the \u201cCreate Template<\/strong>\u201d button. Set the page template visibility conditions to make it appear on the specific CPT pages.<\/p>\n\n\n\n

For a full setup, please refer to the How to Create a Custom Single Page for CPT-Based Booking<\/a> tutorial.<\/p>\n<\/div><\/div>\n\n\n\n

Add the Booking Availability Calendar Widget\/Block<\/strong><\/h2>\n\n\n\n
\n

This block\/widget is only available for the custom single pages built in Elementor or Block Editor and works with the JetEngine<\/em> or JetFormBuilder<\/em> booking forms.<\/p>\n\n\n\n

If added to the single page, this block\/widget displays a calendar and allows users to choose the check-in\/out dates. Additionally, it shows the dates that are already booked. When the user selects dates on the calendar, they will be automatically placed in the Check-In<\/strong> and Check-Out<\/strong> fields of the booking form.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

The Booking Availability Calendar widget for Elementor and the Booking Availability Calendar block for Block Editor (Gutenberg) are associated with the Check-in\/Check-out dates block for Block Editor (Gutenberg); therefore, the Check-in\/Check-out dates block transfers the date value and format to the Booking Availability Calendar widget for Elementor.<\/p><\/div><\/div>\n\n\n\n

Adding the Booking Availability Calendar block to the Single page in Block Editor<\/strong><\/h3>\n\n\n\n

Open the created Single page in Block Editor. Find the Booking Availability Calendar <\/strong>block and drag and drop it to the page.<\/p>\n\n\n\n

\"booking<\/a><\/div>\n\n\n\n

Enable the \u201cAllow to select dates<\/strong>\u201d toggle to set selected dates into check-in\/out fields.<\/p>\n\n\n\n

Adding the Booking Availability Calendar widget to the Single page in Elementor<\/strong><\/h3>\n\n\n\n

Find the Booking Availability Calendar<\/strong> widget, drag and drop it on the page.<\/p>\n\n\n\n

Toggle the necessary settings:<\/p>\n\n\n\n