How to prevent vertical "jumping" on embeded form?

I added the ?nojump to the (jotform)URL and it works, but is there any inject CSS we can add so we can prevent the vertical jump in an embedded feature?

How did you embedded your form? Please provide us URL of your embedded form so that we can inspect and test your form. 

If you have embedded your form with script code you can add ?nojump at the and of form URL of your script code.

Example:

<script type="text/javascript" src="//www.jotform.com/jsform/1234567890?nojump"></script>

In case that you have embedded your form with iFrame code remove onDISABLEDload="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/1234567890?nojump"

      frameborder="0"

      style="width:100%;

      height:539px;

      border:none;"

      scrolling="no">

    </iframe>

Hope this will help. Let us know if you need further assistance. 

I dont have a url to the form script to add ?nojump to.

in the source code I have:

<script src="https://cdn.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>

<script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.13940" type="text/javascript"></script>

<script src="https://cdn.jotfor.ms/js/paypal.js?v=3.3.13940" type="text/javascript"></script>

 

<script src="https://cdn.jotfor.ms/js/vendor/math-processor.js?v=3.3.13940" type="text/javascript"></script>

 

 

 

<form class="jotform-form" action="https://submit.jotformpro.com/submit/61743312517956/" method="post" name="form_61743312517956" id="61743312517956" accept-charset="utf-8">

  <input type="hidden" name="formID" value="61743312517956" />

  <div class="form-all">

Did you embedded your form with full source code? Can you please try to re-embed your form with iFrame code and add ?nojump at the end of the form URL. 

Inside of this guide you can find how to get iFrame code of your form: 

https://www.jotform.com/help/148-Getting-the-form-iFrame-code 

Also please provide us URL of your website. 

If you are using standalone form just add ?nojump at the end of the form URL. I have tested your form http://www.jotformpro.com/form/61743312517956 and I saw that form jumps when collapse fields are closed and opened. I think this is related to CSS code that you added to your form. 

Other possible workaround would be to embed your form inside of some other blank form with iFrame Embed widget. 

Here is my demo form: https://form.jotform.com/61746332225957 

I cannot use the iframe method because I need to add some lines of script to the source before embedding.

I see your duplicate of the form is not jumping when form collapse are clicked, what css did you remove for this fix?

First I have cloned your original form to my account. Then I got the link of my cloned form and added ?nojump at the of the form URL. This is the link I got:

https://www.jotform.com/form/61745707085966?nojump 

Then I created new blank form and added iFrame Embed widget to my new blank form. I have then added link of my cloned form inside of iFrame Embed widget and I have set height and width of that widget.

Link of the form i provided you https://form.jotform.com/61746332225957  is the link of my new form with iFrame embed widget.

Feel free to clone it.

I did not remove any CSS code form your original form. 

but the iframe feature is not an option as I need to add script to the source.

So you are using the customized source code of your form, and you wish to prevent the form from jumping. Yes, this is easily achievable, even with the source code embed method.

What adding the ?nojump URL parameter to the regular link of the form does, is interpreted in the following JavaScript file:

https://cdn.jotfor.ms/static/jotform.forms.js?3.3.13940

If you take a look there, you can see that all the ?nojump parameter did was it set the value of JotForm.noJump to true. So to create the same effect in your customized source code, please simply add this small bit of JavaScript inside one of your existing scripts on the form, preferably near the bottom:

JotForm.noJump = true;

If you are not sure where to add this line of code, you can search for the last script on your form, which will look something like this:

<script type="text/javascript">
document.getElementById("si" + "mple" + "_spc").value = "12345678901234-12345678901234";
</script>

Simply edit it to include the new line of the code, so it would look something like this:

<script type="text/javascript">
document.getElementById("si" + "mple" + "_spc").value = "12345678901234-12345678901234";
JotForm.noJump = true;
</script>

Please let us know how it goes.

no, unfortunately that didn't work. It is still jumping when collapse is clicked

 

 

  <script type="text/javascript">

    document.getElementById("si" + "mple" + "_spc").value = "61743312517956-61743312517956";JotForm.noJump = true;

 

  </script>

Is it possible for you to add ?nojump parameter to the web page URL where the form is being embedded.

Here is the form that I cloned your JotForm and grabbed the source code to embed on an HTML page.

https://shots.jotform.com/kiran/shared/868131/868131.html

The form in the URL is jumping normally. However, when you add ?nojump to the URL it doesn't.

https://shots.jotform.com/kiran/shared/868131/868131.html?nojump

If that doesn't help, let us know. I'm also looking for other solution. Once I found any information that helps, I'll let you know here.

 

Thanks!

No I don't have access to add ?nojump to the url.

I just tried inserting JotForm.noJump = true; to other script in the source like below...

 

    });

    JotForm.clearFieldOnHide = "disable";

    JotForm.onSubmissionError = "jumpToFirstError";

      JotForm.noJump = "true";

  });

 

</script>

 

 

that doesn't work.

We'll try to find some other solution for you, since I ended the same like my colleagues, adding ?nojump to the URL of the form will prevent jumps:

We'll try to find some other solution for you.

Thank you.

thank you for your help so far....

Is there a fix or workaround for this yet please?

We are still currently checking your form and finding the solution. I will get back to you once I found a workaround regarding this issue.

Can you try to add this jQuery script in you code to fix the jumping issue?

<script>

$(document).ready(function() {   

  JotForm.noJump = true;

});

</script>

You can add it at the bottom of your html code. After including jQuery file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

 

works like a charm.

excellent work, thank you :)

On behalf of the team, you are welcome, TeckStyle.

Feel free to let us know if you have other questions.

Thanks.