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

Deprecated for Update 9.8 or newer

If you want to make several steps for reservation process, so then you need to customize your booking form at Booking > Settings > Fields page.
Exmaple #1
Your customization have to look like this (Please 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(){
                    jQuery('.bk_calendar_step' ).css({'display':'none'});
                    jQuery('.bk_form_step' ).css({'display':'block'});
}
function bk_form_step_click(){
                    jQuery('.bk_calendar_step' ).css({'display':'block'});
                    jQuery('.bk_form_step' ).css({'display':'none'});
}

</script>

Exmaple #2
This example of the booking form customization show the form fields and calendar in the "1st step" and at the second step show "confirmation" info about entering data by visitor. Please note, using this form template, you need to insert the booking shortcode into the separate pages only, if you insert the several booking forms into one page, then its possible some issues. Also in this customization possible issues of not showing "1st step", if visitor enter some wrong data (for example into email), or skip some required fields and press the "Send" button, but the warnings about this fields are showing in the first step. And its means that visitor need to click on "Back to 1st step" button.

<div class="bk_calendar_step"> 
     [calendar] 
     <p class="wpbc_first_name">First Name (required):<br />[text* name]<span class="wpbc_label" style="display:none;">First Name</span></p> 
     <p class="wpbc_last_name">Last Name (required):<br />[text* secondname]<span class="wpbc_label" style="display:none;">Last Name</span></p> 
     <p class="wpbc_email">Email (required):<br />[email* email]<span class="wpbc_label" style="display:none;">Email</span></p> 
     <p class="wpbc_phone">Phone:<br />[text phone]<span class="wpbc_label" style="display:none;">Phone</span></p> 
     <p><span class="wpbc_adults">Adults:  [select visitors class:span1 "1" "2" "3" "4"]<span class="wpbc_label" style="display:none;">Adults</span></span> <span  class="wpbc_children">Children: [select children class:span1 "0" "1" "2" "3"]<span class="wpbc_label" style="display:none;">Children</span></span></p> 
     <p class="wpbc_details">Details:<br /> [textarea details]<span class="wpbc_label" style="display:none;">Details</span></p> 
     <hr />
     <a href="javascript:void(0)" onclick="javascript:bk_calendar_step_click();" class="btn">Continue to step 2</a> 
</div> 

<div class="bk_form_step" style="display:none;clear:both;"> 
     <p>[captcha]</p> 
     <p><strong>Booking data:</strong></p>
     <p><strong>[cost_hint]</strong> - cost of the booking </p>
     <p><strong>[selected_timedates_hint]</strong> - dates for booking</p>
     <div class="wpbc_booking_data_container"></div>
     <hr/> 
     <p>[checkbox* term_and_condition use_label_element "I Accept term and conditions"] </p> 
    <div style="text-align:right;"><a href="javascript:void(0)" onclick="javascript:bk_form_step_click();" class="btn" style="margin:2px 15px 0;float:left;">Back to step 1</a> [submit class:btn "Send"]</div> 
</div> 

<script type="text/javascript"> 
     function bk_calendar_step_click(){ 
          var booking_data = '';
          booking_data +=  jQuery(".wpbc_first_name .wpbc_label").html() +': <span class="fieldvalue"><strong>' + jQuery(".wpbc_first_name input").val() + '</strong></span><br/> ';
          booking_data +=  jQuery(".wpbc_last_name .wpbc_label").html() + ': <span class="fieldvalue"><strong>' + jQuery(".wpbc_last_name input").val() + '</strong></span><br/> ';
          booking_data +=  jQuery(".wpbc_email .wpbc_label").html() + ': <span class="fieldvalue"><strong>' + jQuery(".wpbc_email input").val() + '</strong></span><br/> ';
          booking_data +=  jQuery(".wpbc_phone .wpbc_label").html() + ': <span class="fieldvalue"><strong>' + jQuery(".wpbc_phone input").val() + '</strong></span><br/> ';
          booking_data +=  jQuery(".wpbc_adults .wpbc_label").html() + ': <span class="fieldvalue"><strong>' + jQuery(".wpbc_adults select option:selected").text() + '</strong></span><br/> ';
          booking_data +=  jQuery(".wpbc_children .wpbc_label").html() + ': <span class="fieldvalue"><strong>' + jQuery(".wpbc_children select option:selected").text() + '</strong></span><br/> ';
          booking_data +=  jQuery(".wpbc_details .wpbc_label").html() + ': <span class="fieldvalue"><strong>' + jQuery(".wpbc_details textarea").val() + '</strong></span><br/> ';
          jQuery(".wpbc_booking_data_container" ).html( booking_data );
          jQuery(".bk_calendar_step" ).css({"display":"none"}); 
          jQuery(".bk_form_step" ).css({"display":"block"}); 
          makeScroll('.bk_form_step');
     } 
     function bk_form_step_click(){ 
          jQuery(".bk_calendar_step" ).css({"display":"block"}); 
          jQuery(".bk_form_step" ).css({"display":"none"}); 
     } 
</script> 

Exmaple #3
This example of booking form have 5 steps procedure with showing summary info about entering booking form fields and selected date(s) at final step. Also this configuration check about any errors, and show step with specific error, before submitting the booking.

<div class="wpbc_steps wpbc_step_1"> 
     <h2>Step 1/5</h2>
     [calendar] 
     <hr/> 
     <a href="javascript:void(0)" onclick="javascript:wpbc_to_step(2);" class="btn">Continue to step 2</a> 
</div> 
<div class="wpbc_steps wpbc_step_2" style="display:none;clear:both;"> 
     <h2>Step 2/5</h2>
     <p>First Name (required):<br />[text* name] </p> 
     <p>Last Name (required):<br />[text* secondname] </p> 
     <hr/> 
     <a href="javascript:void(0)" onclick="javascript:wpbc_to_step(1);" class="btn">Back to step 1</a> 
     <a href="javascript:void(0)" onclick="javascript:wpbc_to_step(3);" class="btn">Continue to step 3</a> 
</div>
<div class="wpbc_steps wpbc_step_3" style="display:none;clear:both;"> 
     <h2>Step 3/5</h2>
     <p>Email (required):<br />[email* email] </p> 
     <p>Phone:<br />[text phone] </p> 
     <hr/> 
     <a href="javascript:void(0)" onclick="javascript:wpbc_to_step(2);" class="btn">Back to step 2</a> 
     <a href="javascript:void(0)" onclick="javascript:wpbc_to_step(4);" class="btn">Continue to step 4</a> 
</div>
<div class="wpbc_steps wpbc_step_4" style="display:none;clear:both;"> 
     <h2>Step 4/5</h2>
     <p>Adults:  [select visitors class:span1 "1" "2" "3" "4"] Children: [select children class:span1 "0" "1" "2" "3"]</p> 
     <p>Details:<br /> [textarea details] </p> 
     <hr/> 
     <a href="javascript:void(0)" onclick="javascript:wpbc_to_step(3);" class="btn">Back to step 3</a> 
     <a href="javascript:void(0)" onclick="javascript:wpbc_to_step(5);" class="btn">Continue to step 5</a> 
</div>
<div class="wpbc_steps wpbc_step_5" style="display:none;clear:both;"> 
     <h2>Step 5/5</h2>
     <h3>Summary</h3>
     <div class="wpbc_summary">
		<strong>Dates</strong>:<span class="fieldvalue dates"></span><br/> 
		<strong>First Name</strong>:<span class="fieldvalue name"></span><br/> 
		<strong>Last Name</strong>:<span class="fieldvalue secondname"></span><br/> 
		<strong>Email</strong>:<span class="fieldvalue email"></span><br/> 
		<strong>Phone</strong>:<span class="fieldvalue phone"></span><br/> 
		<strong>Adults</strong>:<span class="fieldvalue visitors"></span><br/> 
		<strong>Children</strong>:<span class="fieldvalue children"></span><br/> 
		<strong>Details</strong>:<br /><span class="fieldvalue details"></span> 
     </div>
	 <hr/> 
     <p>[checkbox* term_and_condition use_label_element "I Accept term and conditions"] </p> 
     <p>[captcha]</p> 
     <hr/> 
     <a href="javascript:void(0)" onclick="javascript:wpbc_to_step(4);" class="btn">Back to step 4</a> 
     [submit class:btn "Send"]
</div> 

<script type="text/javascript"> 
	 // Show next/prior steps
     function wpbc_to_step( step_num ){ 
          jQuery(".wpbc_steps" ).hide(); 
          jQuery(".wpbc_step_" + step_num ).show(); 
		  wpbc_show_summary( step_num );
     } 	
	 // Show Summary
	 function wpbc_show_summary( step_num ){ 
	    if ( step_num == 5 ) {
		
			var bk_type = jQuery( "input[name^='bk_type']" ).val();
			jQuery('.fieldvalue.dates').html( wpbc_get_selected_dates() );
			jQuery('.fieldvalue.name').html( jQuery( "input[name='name"+bk_type+"']" ).val() );
			jQuery('.fieldvalue.secondname').html( jQuery( "input[name='secondname"+bk_type+"']" ).val() );
			jQuery('.fieldvalue.email').html( jQuery( "input[name='email"+bk_type+"']" ).val() );
			jQuery('.fieldvalue.phone').html( jQuery( "input[name='phone"+bk_type+"']" ).val() );
			jQuery('.fieldvalue.visitors').html( jQuery( "select[name='visitors"+bk_type+"']" ).val() );
			jQuery('.fieldvalue.children').html( jQuery( "select[name='children"+bk_type+"']" ).val() );
			jQuery('.fieldvalue.details').html( jQuery( "textarea[name='details"+bk_type+"']" ).val() );
		}
	 }	 
	 // Get selected dates
	 function wpbc_get_selected_dates() {
		
		var bk_type = jQuery( "input[name^='bk_type']" ).val();
		var inst = jQuery.datepick._getInst(document.getElementById('calendar_booking'+bk_type));
		var d_check_in = inst.dates[0];
		var d_check_out = inst.dates[ (inst.dates.length - 1) ];
		var show_check_in = jQuery.datepick.formatDate('mm/dd/yy'
						 , d_check_in
						 , jQuery.datepick._getFormatConfig(inst) 
					   );
		var show_check_out = jQuery.datepick.formatDate('mm/dd/yy'
						 , d_check_out
						 , jQuery.datepick._getFormatConfig(inst) 
					   );
		if ( show_check_in != show_check_out )	 
			return show_check_in + ' - ' + show_check_out;
		else
			return show_check_in;
	 }
    jQuery(document).ready(function(){
        jQuery(".wpbc_steps" ).hide();
        jQuery(".wpbc_step_1" ).show(); 
    });
	jQuery( ".booking_form_div input[type='button']" ).on( "click", function() {
		//Catch  Submit event
		jQuery('.wpdev-help-message.alert' ).each(function(){

			if ( jQuery(this).css('display') != 'none') {
			
				jQuery('.wpbc_steps').hide();
				jQuery(this).parents('.wpbc_steps').show();
			}
		});

	});
</script>