Embedded Card Form is not responsive

  • pmprogetto
    Asked on January 14, 2019 at 6: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.

  • BJoanna
    Replied on January 14, 2019 at 9:46 AM

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

  • pmprogetto
    Replied on January 14, 2019 at 11:24 AM

    IFrame or JS

    https://progettomarketing.ch/lpj.php

  • BJoanna
    Replied 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 

  • pmprogetto
    Replied on January 14, 2019 at 12:04 PM

    I did all this step.

    But unfortunately nothing change.

    Some help?

  • BJoanna
    Replied on January 14, 2019 at 12:20 PM

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

    1547486284responsive Screenshot 10

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

  • pmprogetto
    Replied 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?

  • BJoanna
    Replied 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"

          onDISABLEDload="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>

  • pmprogetto
    Replied 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 Screenshot 10

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

    Thanks for help us.

  • BJoanna
    Replied on January 15, 2019 at 11:19 AM

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