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

  • jdjackson7
    Asked on March 2, 2015 at 2: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

  • Mike
    Replied on March 2, 2015 at 3: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?

  • jdjackson7
    Replied on March 2, 2015 at 3: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.  

  • Ben
    Replied on March 2, 2015 at 4: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" onDISABLEDload="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.

  • jdjackson7
    Replied on March 2, 2015 at 5:39 PM

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

  • Mike
    Replied on March 2, 2015 at 5: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.

  • jdjackson7
    Replied on March 2, 2015 at 7: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

     

     

  • mayur5478
    Replied on March 2, 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

  • Charlie
    Replied on March 2, 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.