WP Rentals Help WP Rentals Help

  • Client Support
  • Video Tutorials
  • WpRentals
  • WpEstate
  • API
Home / Shortcodes / How to add the WpRentals Booking Form to a page with Elementor or WpBakery

How to add the WpRentals Booking Form to a page with Elementor or WpBakery

7927 views

You can easily add the booking form for any property on any page using a shortcode or dedicated page builder widgets.

The form will display the same fields and settings as on the property page, and it respects the global options you’ve configured in WpRentals → Theme Options -> Booking Configuration

This includes:

  • Guest number field

  • Date format

  • Daily or hourly booking mode

  • Option to show the contact form instead of the booking form

How to add the Booking Form shortcode for a listing in Elementor

Edit Page with Elementor

  • Go to the page where you want to add the categories grid (like your homepage).

  • Click “Edit with Elementor.”

Add the Widget

  • In the Elementor sidebar, search for “WpRentals Categories List”.

  • Find the widget and drag it into the section where you want the grid to appear.

  • Add the listing ID (property ID) to show the correct Availability Calendar Dates

  • Get the Listing ID from Wp-admin – > Listings -> ID column (copy the ID that corresponds to your listing)

Other options in the WpRentals Booking Form in Elementor

  • Hide Favorites & Contact Section
  • Hide Social Section (Share via Social)

How to Style the Widget

Container Padding

  • The calendar container typically has internal spacing to ensure the calendar does not touch the widget’s edges.

  • This padding provides a clean and organized appearance.

Box Shadow

  • The calendar may include subtle box shadows to give a sense of depth and separation from the background.

  • This visual effect helps the calendar stand out on the page.

Colors

  • You can control the container background  color

How to use the widget with the WP Bakery plugin

🔸 Important:
Use WPBakery for pages built with WPBakery Page Builder, and Elementor for pages built with Elementor. Do not mix the two builders on the same page.

How to Use the Categories List in WPBakery

  • Edit the Page with WPBakery

    • Go to Pages → Edit the page where you want to add the list.

    • Click “Edit with WPBakery Page Builder.”

  • Add the “Categories List” Element

    • Click the “+” Add Element button.

    • In the popup, search for “Booking Form for a single property”.

    • Click to insert it into the page.

Select and add the property ID for which the booking form applies. Get the ID from the Listings list

Shortcodes

Related Articles

  • How to create a custom contact form with the WpRentals Contact form builder for Elementor
  • How to Manage the WP Rentals Map with Listings Widget
  • How to use the WP Rentals Grids widget for Elementor
  • How to work with the WPRentals Tabs widget

HELP CATEGORIES

  • 61. General
  • 102. Installation & Basic Setup
  • 93. Installation FAQ
  • 404. How Booking Works
  • 145. User dashboard pages
  • 20Advanced Search Options
  • 3Blog Post
  • 9Custom Page Templates
  • 18Elementor Compatibility
  • 13Email Notifications
  • 19FAQ
  • 10Menu Options
  • 27Multi-Languages - 3rd party
  • 9Owner
  • 25Property / Listing
  • 21Shortcodes
  • 11Submit Form
  • 4Supported Maps
  • 93Technical how to
  • 5Third Party plugins
  • 3Translation
  • 13Widgets
  • 2WooCommerce Payments
  • 13WP Rentals Payment
  • 77WP Rentals Theme Options

Join Us On

Powered by WP Estate - All Rights Reserved
  • Client Support
  • Video Tutorials
  • WpRentals
  • WpEstate
  • API