Home
Online Demo
Features
FAQ
Tech Support
Ideas
Buy now

Premium WordPress Plugin

  • Booking Calendar Pro, Premium, Hotel Edition

    Get the complete solution for adding online booking to your site. Support for multiple bookings in a day and the ability to add multiple resources. The ability to customize your booking form fields and emails. Support Online payments. The full functionality of Booking Calendar Standard and much more... Check all features for each version here.

    Start $119
  • New Booking Calendar Pro versions

    The new premium versions come soon in May 2012. Please visit us later.
    (Check info about possibility to request the free update here)

  • Booking Calendar Standard

    Add a simple booking solution to your site, that allows your visitors to make single or multiple day bookings for a single resource. It's great for simple reservation services, rental service or any other service, where you need to make a booking on a specific date.

    Get it for free.

How to to customize booking form for having several steps of reservation process ? [all paid versions only]

If you want to make several steps for reservation process, so then you need to customize your booking form at Booking > Settings > Fields page.
Your customization have to looklike this (Plese take your attention to the bold code, which is make all this trick)

<div class="bk_calendar_step">
[calendar]
<a href="javascript:bk_calendar_step_click();">Continue to step 2</a>
</div>

<div class="bk_form_step" style="display:none;">
        <div style="text-align:left">
       <a href="javascript:bk_form_step_click();">Back to step 1</a>
        <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>Details:<br /> [textarea details] </p> 

        <p>[submit "Send"]</p>
        </div>
</div>

<script type="text/javascript">
function bk_calendar_step_click(){
                    jWPDev('.bk_calendar_step' ).css({'display':'none'});
                    jWPDev('.bk_form_step' ).css({'display':'block'});
}
function bk_form_step_click(){
                    jWPDev('.bk_calendar_step' ).css({'display':'block'});
                    jWPDev('.bk_form_step' ).css({'display':'none'});
}

</script>
qps: 19 / 0.185