How to make form embedded using Embed Script responsive?

  • Profile Image
    Viditour
    Asked on February 12, 2017 at 10:37 AM

    Hi,

    The following form works perfectly responsive on an iPhone:
    https://form.jotformeu.com/70412291935353

    We would like to embedd this form on a clean webpage. So I created a HTML file with the following embedd code:

    <script type="text/javascript" src="https://form.jotformeu.com/jsform/70412291935353"></script>

    I've placed this file on this site:
    https://www.fotografieles.nl/formulieren/test.html

    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:

  • Profile Image
    Nik_C
    Answered on February 12, 2017 at 11:53 AM

    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.

    Thank you!

  • Profile Image
    Viditour
    Answered on February 12, 2017 at 12:19 PM

    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.

    The Iframe causes problems with the height so I hope it can be fixed using the javascript.

  • Profile Image
    Nik_C
    Answered on February 12, 2017 at 12:53 PM

    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: 

    <script type="text/javascript" src="https://form.jotformeu.com/jsform/70412291935353"></script>

    I'm not sure if it was like that before?

  • Profile Image
    Viditour
    Answered on February 12, 2017 at 12:57 PM

    I created a HTML document with only the clean script code; maybe you can check the source?

    https://www.fotografieles.nl/formulieren/test.html

     

  • Profile Image
    Mike_G
    Answered on February 12, 2017 at 02:58 PM

    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:

    References: 

    http://www.w3schools.com/tags/att_meta_name.asp

    http://www.w3schools.com/tags/tag_meta.asp

    Thank you.

  • Profile Image
    Mike_G
    Answered on February 12, 2017 at 03:02 PM

    Below is a link to a web page where I tested the solution above.

    Test Page

    Please view its source (CTRL+U).

    Thank you.

  • Profile Image
    Viditour
    Answered on February 12, 2017 at 03:23 PM

    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!

  • Profile Image
    Mike_G
    Answered on February 12, 2017 at 04:39 PM

    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.

    Cheers!