How to add more fields to the form depending on user selection?

  • Profile Image
    Asked on December 31, 2013 at 09:00 AM

    Hi guys.


    I'm looking at building a form which has a button to add a new row of fields. The form is for a multiple participants entry to an event.

    As you can see from my quick mock-up attached, I want to add the fields 'Name, Age, Q1, Q2, Q3 & Teacher/coach' when the user clicks the '+ Add Participants' link. I can do this in JQuery and assign each new field an incremented numerical value but I am not to sure whether the form will send this data. 

    If you could let me know if you have pre-built tools to achieve this or if not, will my JQuery work?

    Here is my JQuery:

    var regex = /^(.*)(\d)+$/i; var cloneIndex = $(".clonedInput").length;$("button.clone").live("click", function(){ $(this).parents(".clonedInput").clone() .appendTo("body") .attr("id", "clonedInput" + cloneIndex) .find("*").each(function() { var id = || ""; var match = id.match(regex) || []; if (match.length == 3) { = match[1] + (cloneIndex); } }); cloneIndex++; 



    This is not ideal so if the tools are there in Form Builder I would much rather use them...maybe a clever 'Show/Hide' trick I can use.

    Thanks for your time,


  • Profile Image
    Answered on December 31, 2013 at 09:05 AM

    Quick update:

    Another possible solution would be a field which asks specifically how many participants there will be and displaying that number of rows...if that's easier.


  • Profile Image
    Answered on December 31, 2013 at 01:03 PM

    You can accoomplish what you need by applying show/hide conditional logics. Please take a look a this form:

    In the second page is the option "How many" that asks for the quantity of children a person has, depending on the number selected it will display that quantity of questions to enter the information of that number of children.

    Now I applied this method to create the conditions How to Hide or Show Multiple Fields at Once Based On a Single Conditional Entry

    With the difference that I used the field Number instead of Radio buttons. Now, you can clone my form to see how the conditions were setup and take them as a reference to create your form. Here is how to clone the form: How to clone an existing form from a URL

    I hope this helpp. Please inform us if you still need assistance with this.


  • Profile Image
    Answered on December 31, 2013 at 01:30 PM

    I think  our widget Dynamic Fields  can sort your issue out

    Please give that a try and let us know if further help is needed