What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Make i-Frame Responsive

    Asked by epicfilters on April 10, 2016 at 05:53 PM

    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!

    Page URL:
    http://www.epicfilters.com/get-started

  • Profile Image
    JotForm Support

    Answered by BDAVID on April 10, 2016 at 06:01 PM

    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.

  • Profile Image

    Answered by epicfilters on April 10, 2016 at 06:21 PM

    Thanks! 

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

  • Profile Image

    Answered by epicfilters on April 10, 2016 at 06:37 PM

    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!

  • Profile Image
    JotForm Support

    Answered by Kiran on April 10, 2016 at 07:23 PM

    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. 

  • Profile Image

    Answered by epicfilters on April 10, 2016 at 07:43 PM

    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 :-(

     

     

  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 10, 2016 at 09:16 PM

    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!

  • Profile Image

    Answered by epicfilters on April 10, 2016 at 09:45 PM
    So you want me to implement this code?
    ...
  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 10, 2016 at 09:47 PM

    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!

  • Profile Image

    Answered by epicfilters on April 11, 2016 at 10:12 PM

    Hi, 

     

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

  • Profile Image

    Answered by epicfilters on April 11, 2016 at 10:45 PM
    Hi,
    It is still not working :-( Any other options?
    ...
  • Profile Image
    JotForm Support

    Answered by Kiran on April 12, 2016 at 12:14 AM

    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. 

  • Profile Image

    Answered by epicfilters on April 17, 2016 at 09:52 PM

    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.

     

  • Profile Image
    JotForm Support

    Answered by jonathan on April 17, 2016 at 11:11 PM

    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" onload="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.