My Form Is Being Cut Off

  • cuveecoffee
    Asked on August 19, 2018 at 11:17 PM

    Hello,


    My form is being cut off at the bottom. I tried changing the height and using an iframe code and it is not working.


    https://cuveecoffee.myshopify.com/pages/contact

    Page URL: https://cuveecoffee.myshopify.com/pages/contact
  • roneet
    Replied on August 20, 2018 at 4:04 AM

    Could you please re-embed your iFrame code in your Shopify website and check.

    Refer to these guides:

    https://www.jotform.com/help/217-Adding-a-form-to-Shopify-Store-Frontpage

    https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    Let us know if re-embedding worked.

    Thanks

  • cuveecoffee
    Replied on August 20, 2018 at 5:15 AM

    Hello,


    I tried but it still does not work.

  • BJoanna
    Replied on August 20, 2018 at 8:29 AM

    This issue is related to the height of the element of your webpage to which you added the form to. 

    The height is currently set to 0. You can change the height to 700px to resolve this issue or you can increase the bottom padding to 68.25%.

    1534767975height Screenshot 10

    Another way to try to resolve the issue is to change the scrolling to 'yes' inside of the iframe embed code.

    <iframe id="JotFormIFrame-82307763318156" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/82307763318156" frameborder="0" style="width: 1px;

          min-width: 100%;

          height:750px;

          border:none;" scrolling="yes"></iframe>

  • cuveecoffee
    Replied on August 20, 2018 at 10:29 AM

    How do I change the height of that class? I don't see that class anywhere in the iFrame code.

  • roneet
    Replied on August 20, 2018 at 11:31 AM

    The VideoWrapper class is not present in the JotForm iFrame code. It is present in the Shopify website class.

    You can refer to this guide to change the CSS code of your Shopify website:

    https://www.envision.io/blogs/ecommerce-pulse/28829889-how-to-edit-the-css-of-your-shopify-theme

    https://www.templatemonster.com/help/shopify-how-to-edit-htmlcss-files.html

    Please refer to this screenshot for the CSS page where VideoWrapper is present.

    My Form Is Being Cut Off Image 10

    Let us know if it worked.

    Thanks.


  • roneet
    Replied on August 20, 2018 at 11:33 AM

    Also, you can adjust the padding-bottom percentage according to your requirement.

    .VideoWrapper {

        position: relative;
        padding-bottom: 98.25%;
        height: 0;
        overflow: hidden;
        max-width: 100%;

    }

  • cuveecoffee
    Replied on August 25, 2018 at 1:01 AM

    So I was able to remove the VideoWrapper class and it's better now. But it still cuts off when my form expands based upon the user's inquiry selection. For example, if you select "Events" it brings more options but it cuts it off again. How do I make the height automatically adjust? This is a big pain in the butt :(

  • BJoanna
    Replied on August 25, 2018 at 2:21 AM

    Please change the scrolling to "yes" inside of the iFrame code. If that does not resolve the issue, you can increase the height of the iFrame code to 1150px. 

    <iframe id="JotFormIFrame-82307763318156" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/82307763318156" frameborder="0" style="width: 1px;

          min-width: 100%;

          height:1150px;

          border:none;" scrolling="yes"></iframe>