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

    Form cut off on iPhone 5c Safari

    Asked by webact on December 05, 2016 at 05:40 PM

    Form link: https://form.jotform.com/62566406326154
    Page URL 1: https://www.webact.com/contact
    Page URL 2: https://www.webact.com/100/contact

    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
    JotForm Support

    Answered by EltonCris 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;

    }}

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

    If you need further assistance, let us know.

  • Profile Image

    Answered by webact 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! https://webact.freshdesk.com/register/HmwVbQY6cqGbwkixkUO 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 by webact 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
    JotForm Support

    Answered by BJoanna 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: 

    https://www.jotform.com/help/148-Getting-the-form-iFrame-code 

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

  • Profile Image

    Answered by webact 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
    JotForm Support

    Answered by BDAVID on December 16, 2016 at 06:35 PM

    Please inject the following code in your form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

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

     .form-all{

        width: 90% !important;

        margin-left: -2px !important;

    }

    }

    This should be the result:

    Let us know if you need more help.

  • Profile Image

    Answered by webact on December 19, 2016 at 03:41 PM

    Thank you BDAVID!  That worked perfectly.