Make i-Frame Responsive

Hi, 

I have a website. http://www.epicfilters.com/get-started 

I have having a ton of trouble with it showing up correctly for mobile. I read some of your earlier responses where you guys mentioned the user needs to change the CSS. However, I am still having trouble. 

Please let me know!

First of all, your form's iFrame height needs to be increased:

 

Please look for the height property of you iFrame code and increase it so your forms display all, try with 1250px.

On regards of the mobile responsive issue, try adding the mobile responsive widget in your form: https://widgets.jotform.com/widget/mobile_responsive

https://www.jotform.com/help/252-How-to-Add-a-Widget-to-your-Form

Let us know if you need more help.

Thanks! 

Do I need to redeploy the iframe after I add the responsive widget? 

Still no luck on mobile. What is funny is within Page Cloud mobile it looks perfect, but then when you try an actual mobile phone it does not work!

If you are changing the height in the iframe embed code, it is required to re-embed the form on your web page. Could you try embedding the form again using complete iframe embed code that can adjust the height automatically? Please refer to the guide below that can help you in getting the iframe embed code for your JotForm.

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

If you need any further assistance, please let us know. We will be happy to help. 

Hi, 

 

We did. We are still having issues with the mobile. It does not look like the mobile widget is working ... Can you please help, I am loosing customers :-(

 

 

Hello epicfilters,

I did check your webpage and did not find any issue with that. The embedded form is already mobile responsive. Please check the screenshots below:

 

I believe, reducing the width of your form will help you further. Please inject the following custom css code in form and see if that helps you:

@media (max-width: 480px) {.form-textarea,.form-textbox,.form-dropdown, .form-html

{width: 100% !important;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

.form-label-left, .form-label-right{width: auto;}.form-buttons-wrapper{margin-left:0 !important;}

.form-input {width: 100%;}.form-all{width: 75%;}

.form-sub-label-container {width: 100%;display:block;}

}

The following guide should help you how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Hope this helps.

Do get back to us if the issue persists.

Thank you!

So you want me to implement this code?
...

Hello epicfilters,

Yes, please inject the above custom css code and see if that gives you a better look.

Do get back to us if you have any trouble.

Thank you!

Hi, 

 

Still having issues as it is still not fixed. Any other ideas? 

Hi,
It is still not working :-( Any other options?
...

As we check the JotForm using direct link on a mobile phone, the form is displaying without any issue. 

However, when the web page is checked on the mobile I notice that the object on your web page embedding the form iframe code is slightly larger which might be causing the issue. 

Please try reducing the object width to 10px lesser than the existing on your webpage builder and see if that helps. It looks like you are using PageCloud page builder to build the webpage. If you are not sure how to change the width of this object, you may also take support from the web page builder.

If you need any further assistance, please let us know. We will be happy to help. 

Hi, 

 

I believe have done this and it is still not working. Could you please check if done correctly, and possibly propose an alternative solution if one does exist.

 

The latest solution provided by our colleague Kiran is something that can be applied only on your website page.

 

You will need to use your website page editor to modify this part of the code on the page

 

<div class="object iframe" style="width: 887px; height: 1054px; position: absolute; left: 49px; top: 73px; background-color: rgba(0, 0, 0, 0);" data-alt-style="width: 430px; height: 1662px; position: absolute; left: 7px; top: 200px; background-color: rgba(0, 0, 0, 0);"><iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/60999404528164" frameborder="0" style="width: 100%; height: 100%; border: none;" scrolling="no" marginheight="0" marginwidth="0" data-muted="false">

    </iframe></div>

</div>

 

Let us know if you are not able to do this.