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

    Responsive form on iPhone not fitting

    Asked by dogboy on March 31, 2014 at 05:00 PM

    I have a long form embedded on my site, which is responsive.  I've read through a number of posts here on the forum regarding jotform and its responsive behavior, and tried injecting several of the CSS codes to no avail.

    My form looks fine on my iPhone 4s in Landscape view, but in Portrait view it is extending off the side of the screen and I can't seem to figure out why.  See screenshots.

    Screenshot
    JotForm long form site screenshots
  • Profile Image

    Answered by Cesar on March 31, 2014 at 05:57 PM

    I have cloned your form and injected the following CSS code in to it:

    @media only screen and (max-device-width: 550px){
    .form-all{
    width:360px !important;
    margin-left:-30px !important;
    float: left !important;
    }}


    This is my cloned example form: http://form.jotformpro.com/form/40896995128977?

    Do let us know if you need further assistance. Thank you.

     

    Related Article:

    How-to-Clone-an-Existing-Form-from-a-URL

  • Profile Image

    Answered by dogboy on March 31, 2014 at 06:40 PM

    Hmmm, thanks for your help.  When I look at your cloned form in Portrait on the iPhone, it looks fine.  When I inject that CSS in to my form and look at it on my site, it looks worse in both Landscape and Portrait.  I must have some conflicting css somewhere.

    http://www.localdogrescue.com/adoptionapp.html

     

  • Profile Image
    JotForm Support

    Answered by jonathan on March 31, 2014 at 07:44 PM

    Hi,

    You may want to try re-embedding the form to your website using its iframe code embed.

    Use this guide -Getting-the-Form-iFrame-Code

    Right now, I could see that you are using script embed which could be causing script conflict with the other scripts existing on the web page. Using iframe embed should prevent these script conflict.

    Please inform us if issue still remains.

    Thanks!

  • Profile Image

    Answered by dogboy on March 31, 2014 at 09:56 PM

    Hi, I had tried embedding the form using the iFrame method before.  With scrolling="no", the form is cut off when viewing on iPhone but okay on desktop (in firefox).  When I set scrolling="yes", the form looks okay on the iPhone but I get the right-side and bottom scrollbars when viewing on the desktop, which is uneccessary (and ugly).  I can't seem to get it to look "normal" on both handhelds and desktops.  It either looks good on one and not on the other, or vice versa.

     

    *Edit - I should add that when using the iFrame method with scrolling="yes" and that css injected from your first reply, the form doesn't even show up on iPhone...

  • Profile Image

    Answered by Cesar on March 31, 2014 at 11:58 PM

    I currently see no scrollbars on the desktop version. And it appears to display ok on a Nexus 7, when I do try to view it at this time on my mobile phone (android) I do see the form renders for a fraction of a second but then disappears off the page. 

    I will try performing furhter tests on your form. Once I have an update on this I will update you on your thread. Thank you.

  • Profile Image

    Answered by Cesar on April 01, 2014 at 12:44 AM

    I have modified the code, utilizing only the following CSS Code:

    #label_46{display: none;}

    @media only screen and (max-device-width: 550px)
    {.form-textbox{
    width:200px !important;
    min-width:200px !important;
    max-width:200px !important;}}

    Please try it out. Do let us know of you need further assistance. Thank you.

  • Profile Image

    Answered by dogboy on April 02, 2014 at 09:46 AM

    So its pretty much back to square one now.  When viewing it using iFrame method it renders fine on desktops (except for the right and bottom scrollbars on Firefox) and fine in Landscape mode on iPhone, but in Portrait in iPhone its expanding off the right side of the screen.

    I also tried using the Embed method and its the same rendering results on the iPhone, and the same on the desktop (minus the scroll bars).

    I can just live with it as-is unless you want to continue trying.  I appreciate your help.

     

    Here's a screen shot showing scrollbars in Firefox using iFrame: http://awesomescreenshot.com/05e2l7s8ab

  • Profile Image

    Answered by Carina on April 02, 2014 at 10:44 AM

    While using the iFrame method I tried changing scrolling to "auto" and the scrollbar disappeared in firefox. I also found this method for hidding scrollbars but still allow scrolling.

    Let us know if we can be of more assistance.