Advanced Setup | How to open booking form in popup modal window

For ability to open the booking form in a popup window, please follow these steps.

Important note for newer versions

In newer versions of Booking Calendar, the plugin uses native popup windows internally, for example on admin pages and booking editing screens. Because of this, do not place the modal wrapper directly inside the Booking Form configuration if the same form is also used by the plugin’s built-in popups.

Instead, keep the booking form configuration normal, and place the popup/modal wrapper on the front-end page where you want to show the popup button.

1. Add the popup code to your page

Create a new page, or edit an existing page, and add a Custom HTML block with code similar to this:

<script src="https://your-site.com/wp-content/plugins/booking/vendors/_custom/dropdown_modal/_out/dropdown_modal.js"></script>
<a href="javascript:void(0)"
   onclick="jQuery('.bookingFormModal').wpbc_my_modal({keyboard:false, backdrop:true, show:true}); return false;"
   class="wp-element-button">Booking</a>
<div class="wpdevelop">
  <div class="modal wpbc_popup_modal bookingFormModal" tabindex="-1" role="dialog" style="display:none; z-index:9999999;">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
          <strong class="modal-title">Booking Form</strong>
        </div>

        <div class="modal-body">
          [booking resource_id=1]
        </div>

      </div>
    </div>
  </div>
</div>
<style>
  .wpdevelop .modal {
    overflow-y: auto;
  }
</style>

Replace your-site.com with your real website domain.

If you use a paid version of Booking Calendar, also replace /booking/ with your actual Booking Calendar plugin folder name, for example:

/wp-content/plugins/booking.bs.10.0/vendors/_custom/dropdown_modal/_out/dropdown_modal.js

The modal JavaScript file is now located here:

/wp-content/plugins/booking/vendors/_custom/dropdown_modal/_out/dropdown_modal.js

The old path:

/wp-content/plugins/booking/assets/libs/ui/_out/dropdown_modal.js

is no longer the correct location in the newer versions.

2. Keep the Booking Form configuration normal

Open:

Booking Calendar > Settings > Booking Form

Configure only the booking form fields there, for example:

[calendar]
<div class="standard-form">
     <p>First Name (required):<br />[text* name]</p>
     <p>Last Name (required):<br />[text* secondname]</p>
     <p>Email (required):<br />[email* email]</p>
     <p>Phone:<br />[text phone]</p>
     <p>Adults:<br />[select visitors "1" "2" "3" "4"]</p>
     <p>Children:<br />[select children "0" "1" "2" "3"]</p>
     <p>Details:<br />[textarea details]</p>
     <p>[checkbox* term_and_condition use_label_element "I Accept term and conditions"]</p>
     <p>[captcha]</p>
     <p>[submit class:btn "Send"]</p>
</div>

Do not wrap this form configuration in modal HTML inside the Booking Form settings, for example do not add this there:

<div class="modal ...">

3. Result

The page will show a “Booking” button. When the visitor clicks it, the booking form shortcode opens inside the popup modal window.

This setup avoids conflicts with the newer native popup windows used by Booking Calendar internally.