1. Using WordPress Block Editor (Gutenberg):
Watch the video below for a step-by-step guide on embedding the booking form via WordPress blocks:
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":
3. Auto creation page with booking form:
In the Booking Calendar Free version, you can configure and publish booking form, availability calendar or timeline automatically from the WP Booking Calendar > Publish page into existing or new page.
In the paid versions of Booking Calendar you can configure and publish booking form for each specific booking resources from the WP Booking Calendar > Resources page.
4. Elementor:
Full Elementor Support! Design and customize your booking forms directly inside the Elementor editor—with real-time form previews and a built-in skin selector. No more shortcode guesswork—just drag, configure, and save!
Change theme (calendar skin) in Elementor.
5. Divi Theme, and other Non-Standard WordPress Block Editors:
If your theme uses Divi Theme, or another non-standard block editor, add a shortcode block to your page (you can do this with Elementor, as well). 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".
6. 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.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.
7. 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.
8. 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:
- Edit the page where you want to add the Booking Calendar shortcode in the DIVI Builder.
- Add a new section or row where you want the Booking Calendar to appear.
- Within the section or row, add a new module and select the "Code" module.
- In the Code module settings, paste the Booking Calendar shortcode.
- Customize the settings of the Code module as needed, such as adjusting the alignment or size.
- 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.
