-
jdjackson7Asked 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
-
MikeReplied 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?
Does it make any differences?
-
jdjackson7Replied 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.
-
BenReplied 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.
-
jdjackson7Replied 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.
-
MikeReplied 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.
-
jdjackson7Replied 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
-
mayur5478Replied 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
-
CharlieReplied 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.