Form cut off on iPhone 5c Safari

  • Profile Image
    Asked on December 05, 2016 at 05:40 PM

    Form link:
    Page URL 1:
    Page URL 2:

    In the advanced design editor, I have the "make this form responsive" option checked and the max width is set, but no other width CSS is injected anywhere.  When I resize the browser window the form resizes fine, and when I use the Chrome inspect tool for iPhone 5, it looks fine.  However, when I visit either URL on my iPhone 5C, the form is cut off on the right side using Safari.  I've tried on a 5S as well, with the same issue.  On a Samsung phone with Chrome, there is no issue.  

    Any ideas on how to fix this?

  • Profile Image
    Answered on December 05, 2016 at 11:27 PM

    The only element that did not appear to be responsive is the google captcha widget. We can make its iframe container 100% so it works properly on mobile. Try to inject this CSS codes to your form and then check it after that. This might fix the problem.

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

    iframe {

        width: 100% !important;



    If you need further assistance, let us know.

  • Profile Image
    Answered on December 05, 2016 at 11:45 PM
    Hi Jotformforum_1004249, A new Customer Support account has been created for you. Click the url below to activate your account and select a password! If the above URL does not work try copying and pasting it into your browser. If you continue to have problems, please feel free to contact us. Regards, Customer Support
  • Profile Image
    Answered on December 06, 2016 at 01:47 PM

    Here's some screenshots of what I am getting on iPhone 5c and 5s with Safari.



    The code you suggested did not change anything.  


    PS- Sorry for the automatic reply from my ticketing system.

  • Profile Image
    Answered on December 06, 2016 at 03:38 PM

    Please try to add Mobile Responsive widget to your form to see if that will resolve your issue. If that does not resolve your issue, please try to re-embed your form with iFrame code. Inside of this guide you can find how to get iFrame code of your form: 

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image
    Answered on December 16, 2016 at 04:23 PM

    Hi, I have tried both of your suggestions but there was no change.  I'm at a loss as to why this would be cut off on an iPhone 5 only.  I did try with Chrome on my iPhone 5c and it is still cutoff, so I can eliminate it being a Safari issue.  The weird thing is, the form is not cut-off when the site is loading, but after it fully loads, the form resizes slightly, causing the cut-off.  Any additional suggestions would be appreciated. 

  • Profile Image
    Answered on December 16, 2016 at 06:35 PM

    Please inject the following code in your form: 

    @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { 


        width: 90% !important;

        margin-left: -2px !important;



    This should be the result:

    Let us know if you need more help.

  • Profile Image
    Answered on December 19, 2016 at 03:41 PM

    Thank you BDAVID!  That worked perfectly.