Multiple user details for single booking

Hi,

This can be implemented by adding a custom JavaScript in your theme.

Code example: https://github.com/ivanhala/webba-dynamic-fields/blob/master/dynamic-fields.js

Form: https://github.com/ivanhala/webba-dynamic-fields/blob/master/form.txt

If you have any questions, please let me know.

Thank you very much. Let me see if I can get this going..

Is there perhaps a working demo of a similar setup?

I have just set up it here for you: https://test.webba-booking.com/sample-page/

Also, I updated the custom code from examples for your case with the name and surname.

Javascript code:

function  wbk_on_form_rendered( service ){   
   jQuery('#wbk-book-quantity').change( function(){    
      var i = 2;
      jQuery('#wbk_dynamic_fields').html('');
     	for( i = 2; i <= parseInt( jQuery(this).val() ); i++ ){
          var template = '<label class="wbk-input-label" for="customname_'+ i +'">Name '+ i +'</label><span class="wpcf7-form-control-wrap customname_'+ i +'"><input type="text"  aria-required="true" name="customname_'+ i +'" value="" size="40" class="wpcf7-form-control wpcf7-text wbk-text" aria-invalid="false"></span><label class="wbk-input-label" for="surname_'+ i +'">Surname '+ i +'</label><span class="wpcf7-form-control-wrap surname_'+ i +'"><input type="text" aria-required="true" name="surname_'+ i +'" value="" size="40" class="wpcf7-form-control wpcf7-text wbk-text" id="surname_'+ i +'" aria-invalid="false"></span>';
          jQuery('#wbk_dynamic_fields').append( template );
        }		     
  }); 
}

Form:

<p><label for="wbk-name">Name 1</label>[text* wbk-name class:wbk-text id:wbk-name]</p>
<p><label for="surname_1">Surname 1</label>[text* surname_1 class:wbk-text id:surname_1]</p>
<p><label for="wbk-email">Your Email (required)</label>[text* wbk-email class:wbk-text id:wbk-email]</p>
<p><label for="wbk-phone">Your phone (required)</label>[text* wbk-phone class:wbk-text id:wbk-phone]</p>
<div id="wbk_dynamic_fields"></div>

If you have any questions, feel free to ask.

• This reply was modified 4 years, 2 months ago by WebbaPlugins.

Thank you so very much! This is awesome, and I’m sure it will get me sorted.

Glad I could help:)

Hi
Maybe a stupid question – but where do I have to store the js-script file?

• This reply was modified 4 years, 2 months ago by newn00b.

@newn00b, you can add the js-script using Simple Custom CSS and JS