What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I make each page in a form automatically advance to the next one when a radio button is clicked?

    Asked by gcivf on February 06, 2014 at 09:57 PM

    I want to have a 30 question survery multiple choice...  is it possible to have the questions appear one at a time and when its answered the next one pops up?  do not wnt one long page with teh questions scrolled down

     

    thanks

     

    Steven

    multiple choice next auto-advance without Next button
  • Profile Image
    JotForm Support

    Answered by abajan on February 07, 2014 at 04:41 AM

    Hi Steven,

    I was going to recommend inserting a page break after each question to avoid having one long page but it looks like you've already figured that out. As to having subsequent questions automatically appear, that's not feasible. For instance, in the case of a textbox, how would we create a condition to hide that question and show the next if we don't know the number of characters users will enter? And what about checkbox fields? How would we configure a similar condition for those when we don't know how many boxes will be checked? That's why it has to be left to the user to decide when they have completed the question and click "Next".

    If you need any clarification on any of this, please let us know.


    Thanks

  • Profile Image

    Answered by gcivf on February 07, 2014 at 08:28 PM

    thank you but thats not quite right--- if i use the page they have to click the next page each time.  I am using only radio buttons and want it to go to next question when the button is clicked.  I saw a help ticket from others saying to use hide and show.    but what i tried was when q 1 is filled in hide q #1 and show q #2 etc.  the problem is when I do this the forms complete but with no data!   if I eliminate the hide condition all the data is recorded but the form grows by 1 question every time one is answered

  • Profile Image

    Answered by Cesar on February 07, 2014 at 11:59 PM

    Unfortunately this is not possible with the standard JotForm tools.

    You might be able to have this work by utilizing the source code of your form and having an onclick event added to your radio buttons to call on the next page function using Javascript. Unless one of my colleagues has an alternative idea on how you would go about achieving this. In any case, if Icome up with this information, I will be sure to update it through this thread. Thank you.

     

    Related Articles:

    How-to-get-your-Form-Source-Code

  • Profile Image

    Answered by gcivf on February 08, 2014 at 12:37 AM

    in this support ticket from someone else it was said it was possible using this method--- when i try to duplicate the questions come one at a time but no data gets saved due tot he hide.  trying to do it wothout page breaks

    http://www.jotform.com/answers/287151-show-one-question-at-a-time-

  • Profile Image
    JotForm Support

    Answered by abajan on February 08, 2014 at 10:25 AM

    Hi again Steven,

    To my knowledge, it's not possible to do this in the form builder because once a field is hidden via a rule set in the conditions wizard, any values it contains will be removed. However, if the form's source is embedded in a web page and this script inserted anywhere after the form code (preferably just before the closing body tag of the web page), the selections will be retained.

    Would such a workaround be feasible in your case?

  • Profile Image
    JotForm Support

    Answered by abajan on February 08, 2014 at 11:13 AM

    Here's a demo utilizing the workaround. Notice how the form is embedded in a web page (https://shots.jotform.com/wayne/form_40383976819974.html) and not at its own URL (http://www.jotformpro.com/form/40383976819974). Also take note of the script at the bottom, just before the closing body tag of the page.

    The script used here is slightly different than the one I gave in my last reply because the ID of the first "Next" button is different than that in your form. The ID of your form's first "Next" button is form-pagebreak-next_60 while the first "Next" button in the demo has an ID of form-pagebreak-next_9.

    If you would like to use the workaround and need help, please let us know.


    Thanks

  • Profile Image

    Answered by gcivf on February 08, 2014 at 02:37 PM

    Abajan--

     

    YES THIS IS EXACTLY whet we are trying to do ....we want to keep the first next button which comes after name and email but from that point on everything is radio buttons so it should progess on its own.  however its not working on this page.  wordpress blog ...i pasted the js for the form followed by the js script you gave one after the other in the html entry section of the page

     

    http://www.goldcoastivf.com/js-test/

  • Profile Image

    Answered by gcivf on February 08, 2014 at 02:47 PM

    and this is using the jot forn named js test

  • Profile Image

    Answered by gcivf on February 08, 2014 at 03:10 PM

    and also my submit button shows up from the start under every question buts your example it only appears at the end (which is mre correct)

  • Profile Image

    Answered by gcivf on February 08, 2014 at 03:57 PM

    i also tried using a plug in that ensures inline javascript can be used but still not working

  • Profile Image

    Answered by gcivf on February 08, 2014 at 04:07 PM

    that page was a redo version of the jotform with all the page breaks except the first one removed--- I looked at your JS and see they other page breaks look like they should remain so I made another version that keeps them but it is also not workin

     

    http://www.goldcoastivf.com/js-test2/

  • Profile Image
    JotForm Support

    Answered by jonathan on February 08, 2014 at 08:05 PM

    Hi,

    I checked your website http://www.goldcoastivf.com/js-test2/ but I think you are not using source code embed of the form on this website?

     

    The form is also not able to advance when I test the Next button. Which could  be due to script conflict that are happening

     

    In our colleague Abajan's demo form, the javascript code used was this http://pastie.org/8713356. Please take note of the comments he added on each code function -- it will give you hint how the code work on the source code of the form.

    Hope this help. Please inform us if you need further assistance.

    Thanks.

  • Profile Image

    Answered by gcivf on February 08, 2014 at 08:49 PM

    i was using the embed code not the source code --- is this not allowed because without autoadvance this embed was working---why is this wrong?

    also I have made an updated page with source code also ---the next button is working but not the autoadvance

    here is the page

    http://www.goldcoastivf.com/sattest3/

  • Profile Image
    JotForm Support

    Answered by abajan on February 09, 2014 at 05:46 AM

    Steven,

    The default short code won't work because its fields won't be able to "see the script", so to speak. However, the full source code isn't working either due to a number of factors:

    1. The script in your web page has been rendered ineffective due to the omission of the requisite slashes before each of its comments

    2. The "Required" validation should be removed from all of the radio groups, leaving just the First Name, E-mail and Body Mass Index fields as required. (CSS could always be used to place a red asterisk after each radio group label)

    3. Since the script is meant to take care of the show/hide behavior, there's no need for any of the conditions which were created in the form builder. They can be and probably should be deleted, in case they conflict with the WordPress scripts

    To allow users to see what they have chosen before the form auto-advances to the next question, I have tweaked the script. Please use this one instead. The demo has been updated to show the effect of the change. (You can adjust the delay as desired by changing 0.7 to a higher or lower value. For example, increasing it to 1 would cause the delay o increase to a full second.)

    I realize there are styling issues with the embedded form that need correcting (the strange looking page break buttons, the labels for the radio buttons appearing below them and so on). It's being caused by conflicts between the WordPress CSS and that of the form but for now just make the above changes and let us know how the embedded form works. We can deal with the styling in another thread.


    Thanks

  • Profile Image

    Answered by gcivf on February 09, 2014 at 09:43 AM

    Abajan--  your new demo is absolutely perfect and your demo works great on your site but when i paste it it is still not working

    I did the following you asked for

    1) removed all required validations except name email and bmi

    2) removed all the conditions for show

    3) copied new script with //

     the form appears but is still not autoadvancing.  please advise.

     

    also is it correct to just paste the script into html section of a wordpress page ?  does it require a plugin to enable inline script?  I tried those but not working either--- the reason I ask is if I past the cose into dreamweaver and do it locally it works perfect but in trying to get it on a wordpress page its failing

  • Profile Image
    JotForm Support

    Answered by abajan on February 09, 2014 at 12:32 PM

    Hi Steven,

    WordPress is auto-inserting pesky paragraph tags where it definitely ought not to do so: All throughout the form code and the script! Those extra tags will definitely render the script useless. There are various ways to circumvent this annoying WordPress behavior. Googling "prevent WordPress from adding p tags" will return several links. One of the recommendations is to use the Raw HTML plugin. Please give it a try and let us know if it helps. (Incidentally, you may have noticed that I edited the script at the demo again. Don't worry, the script I provided works just as well. It's just that the updated one at the demo is more concise.)

    We'll get this working eventually.


    Cheers

  • Profile Image

    Answered by gcivf on February 09, 2014 at 01:34 PM

    abajan--

     

    getting closer.  I used the raw for the form.  if i paste the autoadvance script also using the raw following the page script the  autoadvance doesnt  work but my theme has a function to allow me to add a script to the footer.  if i do that it is all working except when i reach the end of the form it is hanging "on please wait" after hitting submit

    http://www.goldcoastivf.com/jstest6/

    in this new page version is just pasted the js script embed code etternal reference so it wont autoadvance but it does submit

    http://www.goldcoastivf.com/your-fertility-audit/

  • Profile Image
    JotForm Support

    Answered by abajan on February 09, 2014 at 10:21 PM

    Hi Steven,

    The "Please wait..." issue isn't connected with the script. Tests I ran on a clone seem to indicate that it's something to do with the BMI plugin but I'm not certain. Anyway, after making some adjustments to the clone, I was able to resolve the problem.

    Clone this form (see this guide) and embed its full source in place of the form code currently at http://www.goldcoastivf.com/jstest6/. It does not appear that the Raw HTML plugin is working because I'm still seeing lots of paragraph and break tags throughout the form code. After inserting the plugin, did you wrap the code in the [raw] ... [/raw] tags? (That will solve most of the styling issues, as can be seen in this copy of your page that has my clone embedded. Also, if you test the form that's there, it will submit successfully.)


    Thanks

  • Profile Image

    Answered by gcivf on February 09, 2014 at 10:43 PM

    Abajan--

    yes for sure I was wrapping in [raw] [/raw]

    i followed the steps you suggest and it appears it is now working!  i have embedded it in this new page

    http://www.goldcoastivf.com/jstest6-2/

    unfortunately as you saw ther is a strange formatting issue where the buttons are narrow and more importantly the bullet choice option is showing below the bullet.  What do I do to fix this?  when I do a full embed of the form not the source code that does not happen but then the auto-advance does not work. it also for a strange formatting reason is making to form scroll up each time a question is answered and it advances.  i think you said this was a css issue with the theme?

    i made a copy on a blanl page for the theme but it does the same http://www.goldcoastivf.com/jstest8/

     

    once again great work and thank you. I have told many people of your fantastic support

     

    SP

  • Profile Image
    JotForm Support

    Answered by jonathan on February 10, 2014 at 04:30 AM

    Hi Steven,

    Our colleague Abajan will get back to you as soon as he is back online.

    For the meantime, I check your website and the form here http://www.goldcoastivf.com/jstest6-2/  and I could see the styling issues happening on the embedded form. 

    From initial observation, I think this has to do with the way you have embedded the form's code.
    You probably have not done it correctly. I would suggest you start fresh and redo the embedding carefully again.

    You can use the demo site of Abajan here https://shots.jotform.com/wayne/form_40396931750963.html as guidance on how it was correctly done.

    Hope this help. Please continue updating us if still not able to make everything work as inteneded.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by abajan on February 10, 2014 at 06:07 AM

    Thanks for your glowing comments about our team, Steven.

    Since the functionality you requested is now working, it's time to move to another thread to discuss the styling issues. Please see the rest of my reply here.


    Cheers

  • Profile Image

    Answered by gcivf on February 10, 2014 at 08:51 AM

    Abajan--

     

    BAD NEWS it is NOT working!  I never went all the way to the end.  It is stuck on the please wait after hitting submit.  I started fresh. made a clean page.  I ensured raw HTML is activated and I wrapped in [raw] [/raw].  I still have the bad formatting.  The advance auto works but form will not submit . please advise

     

    here is latest page

    http://www.goldcoastivf.com/your-fertility-audit/

    since the BMI field caused other problems i am going to test with it deleted

    SP

  • Profile Image

    Answered by EliezerN on February 10, 2014 at 09:34 AM

    @Steven

    Your message has been forwarded to my colleague abajan. Once he is available will get back to you to further assistance on what could have gone wrong.

    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on February 11, 2014 at 12:51 PM

    Steven,

    It appears that the BMI (Body Mass Index) widget is causing the form to hang on "Please wait...". Once I commented out its code from this copy of your page, I was able to submit the form. As to why this issue didn't affect the first copy of your form, that's a bit of a mystery to me. If we can't find out why that widget is causing the problem, it will have to be deleted.