How to create multi-step auto-advance radio buttons form?

  • Profile Image
    Miguel Oliveira 
    Asked on December 21, 2018 at 04:15 AM

    Hi!
    I need to create a multi-step auto-advance radio buttons form (that goes to next step when user clicks the answer (without reloading the page!)). Something like this: https://audimagnet.com/comparador/
    I work for a company as freelancer and I use their Unbounce account and I?d like to integrate your forms via html.
    Do you have this feature?
    Thanks!
    Best regards,
    Miguel

  • Profile Image
    Victoria_K
    Answered on December 21, 2018 at 06:28 AM

    The auto-advance radio buttons form can be implemented with Page Break elements and Auto-Next setting:

    Here is related help article: How-to-Create-Multi-Page-Forms

    And a test form for you: https://form.jotform.com/83543228352961 

    Please check embedding options here: Which-Form-Embed-Code-Should-I-Use

    We will gladly assist if you need any further help. 

  • Profile Image
    Miguel Oliveira 
    Answered on December 21, 2018 at 12:17 PM

    Victoria, you're awesome! :D Thank you. I've been looking for this for a long time. Excellent reply - I'm touched. I'll start free just to test and upgrade soon. Have a great holiday!

    Cheers,

    Miguel

  • Profile Image
    Victoria_K
    Answered on December 22, 2018 at 10:35 AM

    Glad to know that you were able to find a solution. On forms with Card layout there's no Page Break element, but cards will auto-next automatically for radio fields, no additional settings needed.

    If you get further questions, please let us know.

  • Profile Image
    Victoria_K
    Answered on December 22, 2018 at 12:40 PM

    Would you mind to try embedding the form using iframe code? 

    Here is how: Getting-the-Form-iFrame-Code

    Please let us know how it goes.

  • Profile Image
    Victoria_K
    Answered on December 22, 2018 at 02:36 PM

    Thank you for updating us. 

    I can suggest the following: 

    To add nojump parameter to embedding code. In case that you have embedded your form with iFrame code remove onload="window.parent.scrollTo(0,0)"  in the iframe code and add ?nojump at the end of the form URL. 

    Example:

       <iframe

          id="JotFormIFrame"

          allowtransparency="true"

          src="https://form.jotform.com/83547674843369?nojump"

          frameborder="0"

          style="width:100%;

          height:539px;

          border:none;"

          scrolling="no">

        </iframe>

  • Profile Image
    BJoanna
    Answered on December 24, 2018 at 09:20 AM

    Considering that your last question is not related to the subject of this thread, I moved it to a separate thread and we will provide you an answer there shortly. 

    https://www.jotform.com/answers/1681871