Iframe embed code cuts off part of a form on mobile when form contains image logo

  • Profile Image
    nickgillis
    Asked on February 16, 2018 at 03:09 PM

    I see several people have told you that the next button does not work on mobile.  It is still not working Feb. 2018.  How can this be fixed. It works fine on desktop.  Sometimes even flickers when opening on mobile but then dissapears.

  • Profile Image
    EltonCris
    Answered on February 16, 2018 at 04:14 PM

    I could not reproduce the problem in your form. The next button advances to the next page.

    Desktop:

    Mobile:

    Are you still experiencing this problem? I've tried different browsers, there's no problem.

    If you have embedded your form, let us know the website URL so we can check it here.

  • Profile Image
    nickgillis
    Answered on February 20, 2018 at 12:46 PM

    So I found out what appears to be causing the problem, with no help from the jotform team. This is not to be rude but I think they are having trouble understanding the issue.  There is a resize function at the end of the HTML code for the iframe. When it attempts to resize it either covers up or eliminates the next button alltogether.  If you do not know CSS or cannot add CSS to your website (eg. using godaddy's new gocentral website builder). you have no other options it won't work and the jot form team doesn't show much else as far as a resolution. You might as well link to an external page (not happy). This is saddening with all the other functionality they offer.

  • Profile Image
    Victoria_K
    Answered on February 20, 2018 at 01:32 PM

    We do apologize for the inconvenience caused. 

    I was able to replicate the issue: when embedded through iframe, the next button is cut off the form on mobile. 

    This thread will be escalated to our back-end team for fixing. 

     

    Thank you for reporting! We will keep you with updates.

  • Profile Image
    nickgillis
    Answered on February 20, 2018 at 01:33 PM

    My faith is growing. Thank you

  • Profile Image
    EltonCris
    Answered on February 20, 2018 at 02:06 PM

    Inject this CSS code to your form, this should fix it on mobile.

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    @media screen and (max-width:480px){

      .form-all{padding-bottom:160px;}

    }

    Please let us know how it goes. Thanks

  • Profile Image
    nickgillis
    Answered on February 20, 2018 at 02:07 PM

    Apologies for jumping so quickly. That might have worked. I added the CSS to the actual form. Not the website. 

  • Profile Image
    Victoria_K
    Answered on February 20, 2018 at 02:19 PM

    Please fix the embedding code manually. I will provide you the correct code for your situation. 

    You need to replace scrolling to "yes" and the mobile view will be correct.

    1519154346The Easiest Online Form Builde


  • Profile Image
    EltonCris
    Answered on February 20, 2018 at 02:20 PM

    You have to inject it in your form, not on Go Daddy. Please refer to the guide.

    We are actually aware of the problem and has been escalated to our developers for a permanent solution. However, this workaround will also permanently fix the issue.

    Thanks and apologies for the inconveniences caused.

  • Profile Image
    nickgillis
    Answered on February 20, 2018 at 02:24 PM

    Beautiful!  Thank you.

  • Profile Image
    hasan
    Answered on February 21, 2018 at 06:30 AM

    Hi,

    We've applied a solution to this problem. Could you please try it again and let us know?

    Thanks.

  • Profile Image
    nickgillis
    Answered on February 21, 2018 at 10:17 AM

    Should I remove the CSS that was provided earlier?  There was a continuous error, attached as well. 1519226260uncaught error.PNG

  • Profile Image
    hasan
    Answered on February 21, 2018 at 10:51 AM

    Yes, it should be working without custom CSS definitions.

    I can't replicate those errors in my examples. Could you please share with us your website URL?