Embedded Card Form is not responsive

  • Profile Image
    pmprogetto
    Asked on January 14, 2019 at 06:30 AM

    I have a problem with responsive template.

    I bought the silver plane with HIPAA Compliance.

    When i integrate the cose into my website, the template are not resposive.

    If i use the direct link insted the template is responsive.

    Why?

    Thank you for help us.



    This is a re-post of a comment on Deprecated: How to Make the Form Responsive Using the Form Designer Tool

  • Profile Image
    BJoanna
    Answered on January 14, 2019 at 09:46 AM

    Which embed code did you use? Please provide us your website URL, so that we can test your form. 

  • Profile Image
    pmprogetto
    Answered on January 14, 2019 at 11:24 AM

    IFrame or JS

    https://progettomarketing.ch/lpj.php

  • Profile Image
    BJoanna
    Answered on January 14, 2019 at 11:44 AM

    The webpage you provided is not mobile responsive. Your page does not have head or any other HTML structure beside JotForm embed code. 

    You first need to make your HTML page vaild. 

    https://www.w3schools.com/html/html_basic.asp 

    https://www.w3schools.com/html/html_intro.asp 

    After that make it responsive and then embed the form. 

    https://www.w3schools.com/Css/css_rwd_viewport.asp 

  • Profile Image
    pmprogetto
    Answered on January 14, 2019 at 12:04 PM

    I did all this step.

    But unfortunately nothing change.

    Some help?

  • Profile Image
    BJoanna
    Answered on January 14, 2019 at 12:20 PM

    I tested your webpage again on my Samsung Galaxy A5 and the form is responsive.

    1547486284responsive.PNG

    Were you able to resolve the issue? If not please tell us which device are you using? 

  • Profile Image
    pmprogetto
    Answered on January 14, 2019 at 12:44 PM

    Ok thank you now all working good.
    Just last question...in desktop version, the height of iFrame is not 100%

    If i change it width 100% don't work.

    There other css property that i forgot?

  • Profile Image
    BJoanna
    Answered on January 14, 2019 at 12:58 PM

    Please try to increase the height of the iFrame embed code. 

    You can try to remove the script part of the code and use only iFrame part of the code.

        <iframe

          id="JotFormIFrame-90113666511349"

          onload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          allowfullscreen="true"

          allow="geolocation; microphone; camera"

          src="https://form.jotformeu.com/pmprogetto/progetto-marketing"

          frameborder="0"

          style="width: 1px;

          min-width: 100%;

          height:539px;

          border:none;"

          scrolling="no"

        >

        </iframe>

  • Profile Image
    pmprogetto
    Answered on January 15, 2019 at 10:00 AM

    The problem is that in desktop version, the height must be 100% but is setting 539px.

    Now i change the height width 100% but nothing change.

    Lokk the example image:

    1547564356esempio_form.PNG

    Before to publish, i use the preview and all it's work.

    Thanks for help us.

  • Profile Image
    BJoanna
    Answered on January 15, 2019 at 11:19 AM

    It seems that you deleted your form. You should set the form height in pixels - px.