FAQ > Shortcodes - Inserting Booking Calendar into Pages > How to add the Booking Calendar Form to your page

How to add the Booking Calendar Form to your page

WP Block Editor WP Classic Editor / Old WP versions Via Resources Page Elementor Shortcode Block WP Classic Block DIVI Builder

1. Using WordPress Block Editor (Gutenberg):
Watch the video below for a step-by-step guide on embedding the booking form via WordPress blocks:
Embed the booking form into the post or page and publish it using WordPress blocks with Booking Calendar.

This video illustrates embedding the booking form into posts or pages using WordPress blocks. The example is relevant to paid versions, but the procedure is the same in the Booking Calendar Free version.

2. For WordPress "Classic Editor" or Older Versions:
If you're using the Classic Editor plugin or an older WordPress version, then you can use popup dialog for inserting the Booking Calendar shortcode.
Watch the video below for a step-by-step guide on inserting the booking form via WordPress "Classic Editor":
Embed the booking form into the post or page using the Classic Editor plugin or an older version of WordPress.

Embed the booking form into the post or page using the Classic Editor plugin or an older version of WordPress.

3. Auto creation page with booking form:
Embed the booking form into the post or page and publish it using WordPress blocks with Booking Calendar.

In the paid versions of Booking Calendar you can configure and publish booking form automatically from the WP Booking Calendar > Resources page in very easy way.

4. Elementor, Divi Theme, and other Non-Standard WordPress Block Editors:
If your theme uses Elementor, Divi Theme, or another non-standard block editor, add a shortcode block to your page. Configure the shortcode manually. Check all Booking Calendar shortcodes and parameters, which you can configure on this page.
Watch the video below for a step-by-step guide on inserting the booking form in "Elementor".
Embed the Booking Calendar Form into the page using the Elementor.

Embed the Booking Calendar Form into the page using the Elementor.

5. Manual Shortcode Configuration:
Alternatively, manually configure shortcodes in your posts or pages, especially if you switched from "Visual editor" to "Code editor" (Ctrl+Shift+Alt+M). You can also add a shortcode block (as mentioned in the previous point). Find all Booking Calendar shortcodes and parameters in the FAQ page.

4.1) Check the Shortcode: Before you start, make sure you have the correct shortcode that you want to insert into your page. You can find a detailed description of the shortcode here.

4.2) Add the Shortcode Block: Go to the page where you want to insert the Booking Calendar form. Look for the shortcode block in your WordPress editor.

4.3) Insert the Shortcode: Once you've located the shortcode block, simply paste the shortcode you found in the FAQ page into the block.

4.4) Publish Your Page: After you've added the shortcode, click the "Publish" button to make your page live on your website.

And that's it! Your Booking Calendar form is now successfully inserted into your page.

Embed the Booking Calendar form into the page by manually configuring the Booking Calendar shortcode within a shortcode block.

Embed the Booking Calendar form into the page by manually configuring the Booking Calendar shortcode within a shortcode block.

6. Insert Booking form via WordPress Classic block:
Watch the video below for a step-by-step guide on inserting the booking form via "Classic Block" in WordPress.
Embed the Booking Calendar form into the page using WordPress Classic block.

Embed the Booking Calendar form into the page using WordPress Classic block.

7. Integrating Booking Calendar Shortcodes in DIVI Builder:
To add Booking Calendar shortcodes to your pages in DIVI Builder using the "Code" module, please follow these steps:

  1. Edit the page where you want to add the Booking Calendar shortcode in the DIVI Builder.
  2. Add a new section or row where you want the Booking Calendar to appear.
  3. Within the section or row, add a new module and select the "Code" module.
  4. In the Code module settings, paste the Booking Calendar shortcode.
  5. Customize the settings of the Code module as needed, such as adjusting the alignment or size.
  6. Save or update the page.

By following these steps, you'll be able to seamlessly integrate Booking Calendar shortcodes into your DIVI Builder pages using the "Code" module.
Integrating Booking Calendar Shortcodes in DIVI Builder

Embed the Booking Calendar form into the page using DIVI Builder.