Form pops to top of page when required field is left blank

  • Profile Image
    jdjackson7
    Asked on March 02, 2015 at 02:48 PM

    Our form has 3 fields - all required.  When a user presses Submit when a required field is empty, the form jumps to the top of the page. The user has to scroll back down to find the form. He then sees the This field is required. message.

    How can we stop the form from jumping to the top of the page? 

    Thanks

  • Profile Image
    Mike
    Answered on March 02, 2015 at 03:32 PM

    Thank you for contacting us.

    There are two forms on your web page, could you please try to embed at least one of them with an iFrame embedding method?

    Getting the Form iFrame Code

    Does it make any differences?

  • Profile Image
    jdjackson7
    Answered on March 02, 2015 at 03:53 PM

    We replaced the main form in the body with iframe. Both forms in the body and the on on the right side bar still jump up.  

  • Profile Image
    Ben
    Answered on March 02, 2015 at 04:45 PM

    Please do try changing this:

    <iframe id="JotFormIFrame" frameborder="0" scrolling="no" style="width:100%; height:370px; border:none;" src="https://secure.jotform.us/form/50483588238162" allowtransparency="true" onload="window.parent.scrollTo(0,0)"></iframe>

    to

    <iframe id="JotFormIFrame" frameborder="0" scrolling="yes" style="width:100%; height:400px; border:none;" src="https://secure.jotform.us/form/50483588238162" allowtransparency="true"></iframe>

    and the second one from:

    <script src="https://secure.jotformpro.com/jsform/50587472085967" type="text/javascript">

    to

    <iframe id="50587472085967" frameborder="0" scrolling="no" style="width: 100%; border: medium none; height: 134px;" name="50587472085967" allowtransparency="true" src="https://secure.jotformpro.com/form/50587472085967"></iframe>

    Do let us know how it goes once you do.

  • Profile Image
    jdjackson7
    Answered on March 02, 2015 at 05:39 PM

    Made your changes and have the same issues.  Plus, because the second form expands with hidden fields, you cannot assign a height. 

  • Profile Image
    Mike
    Answered on March 02, 2015 at 05:49 PM

    We have a 'nojump' option, so please add it to the form URLs to see if that helps.

    <iframe id="JotFormIFrame" frameborder="0" scrolling="yes" style="width:100%; height:400px; border:none;" src="https://secure.jotform.us/form/50483588238162?nojump" allowtransparency="true"></iframe>

    <iframe id="50587472085967" frameborder="0" scrolling="no" style="width: 100%; border: medium none; height: 134px;" name="50587472085967" allowtransparency="true" src="https://secure.jotformpro.com/form/50587472085967?nojump"></iframe>

    You can also adjust the iFrame's height values in pixels to fix the height issue.

    Thank you.

  • Profile Image
    jdjackson7
    Answered on March 02, 2015 at 07:04 PM


    I'm sorry but that still does not take care of the jumping problem.  Please check it ou here...

    https://www.spellboundrx.com/2015/Contact-Us/index6.html

     

     

  • Profile Image
    mayur5478
    Answered on March 02, 2015 at 10:34 PM

    The problem might be that normal operation might not get suppressed on click of submit button.To fix it , return false on click of submit button. This would suppress the normal operation . Hope that helps.

    Thanks ,

    Mayur

  • Profile Image
    Charlie
    Answered on March 02, 2015 at 10:55 PM

    Hi,

    You could also try adding this code to your <head></head> part of your page where the forms are embedded.

    <script type="text/javascript">

      $.noConflict();

    </script>

     You can learn more about it here: http://api.jquery.com/jquery.noconflict/.

    Do let us know if this works.

    Thank you.