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.
How to make form embedded using Embed Script responsive?Asked by Viditour on February 12, 2017 at 10:37 AM
The following form works perfectly responsive on an iPhone:
We would like to embedd this form on a clean webpage. So I created a HTML file with the following embedd code:
I've placed this file on this site:
If you visit the site on an iPhone the form isn't as repsonsive as on the JotForm direct link. Is there a way to fix this?
Screenshot direct link on an iPhone:
Screenshot embedded link on an iPhone. As you can see the size is much smaller:
I added Mobile Responsive widget to your form so please check if it works for you.
If the issue persists, please try to embed your form by using the iFrame method, here is the code:
<iframe id="JotFormIFrame-70412291935353" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/70412291935353" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe>
Let us know how it works for you.
Thanks! Unfortunately the form still scales to small; it would be great if the appearance would be the exact same as on the direct link to jotform.
That is most probably affected by how the form is embedded. Since, as you said as well, direct form link is working fine.
I'm sorry, but did you try with clean script code:
I'm not sure if it was like that before?
I created a HTML document with only the clean script code; maybe you can check the source?
Can you try to add this <meta> tag together its the meta tag attributes to your HTML?
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
Please refer to the image below:
Below is a link to a web page where I tested the solution above.
Please view its source (CTRL+U).
Wow! Excellent! Works perfect!
Thank you very much for your super support; we seldom see such good support. We've upgraded to a paid account and will spread the word!
You're most welcome!
We are glad to know that it worked perfectly for you.
And thank you so much for those kind words and for upgrading.
If, in any case, you have other questions or concerns in the future with your account/forms, please feel free to contact us again anytime and we will be glad to help you.