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

    Mobile Form Fields outside of form container.

    Asked by Homeappraisalsinc on June 11, 2013 at 12:34 PM

    Hi,

     

    I am trying to get one of my forms to be mobile friendly and have adjusted the width to 320px but the actual form fields are too long to fit. See the form here: https://www.homeappraisalsinc.com/payment-submission/

    It doesn't fit on my iPhone.

    Please let me know how to solve this issue. Thanks.

    Page URL:
    https://www.homeappraisalsinc.com/payment-submission/

    mobile form Mobile My Forms www thanks
  • Profile Image
    JotForm Support

    Answered by EltonCris on June 11, 2013 at 02:12 PM

    Hi,

    Yes, I can see the cut off at the bottom part of the form in iPhone. Is this your main concern all about?

    If so, try re-embedding the form using the following embed code.

    <iframe style="width: 100%; height: 1240px; border: none;" src="https://secure.jotform.us/form/20995050182149" height="240" width="320" frameborder="0" scrolling="yes"></iframe>

    Let su know if this doesn't help. Thanks!

  • Profile Image

    Answered by Homeappraisalsinc on June 12, 2013 at 01:55 AM

    HI,

     

    Thank you for your reply but it did not fix my issue.

    The issue I have is that th eright hand side of the form is off screen on an iPhone as you can see above in your screenshot. How can I fix this so that it fits?

    I cannot seem to override the CSS defaults within my CSS stylesheet.

    Thanks

  • Profile Image

    Answered by sidharth_kch on June 12, 2013 at 03:28 AM

    @Homeappraisalsinc

    Have you tried using the @media custom css?
    Try to inject the following custom css and see if that helps you:
    @media only screen and (max-device-width: 300px){
    #input_17_addr_line1, #input_17_addr_line2 {
    width: 240px !important;}
    #input_17_city, #input_17_state{width: 100px !important;}
    }
    Let us know if this helps!
    Thanks,
    Sidharth
  • Profile Image

    Answered by Homeappraisalsinc on June 12, 2013 at 04:51 AM

    For some reason, that isn't working. I can't see the css kick in under 300px in Google Web Dev tools either.

    In fact, any css that I write to over-ride the defaults (even simple font colour change), it doesn't show up? Even if I add !important.

    Thanks for your help so far.

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 12, 2013 at 05:49 AM

    @Homeappraisalsinc

    Try this CSS, simply inject this to your form. How to Inject Custom CSS Codes to your Form

     

    @media only screen and (max-device-width: 550px){

    .form-textbox, .form-dropdown, .form-textarea{

    width:240px !important;

    }

    input[id$="_city"],  input[id$="_postal"] {

    width:110px !important;

    }

    input[id$="_state"]{

    width:110px !important;

    margin-left:-20px !important;

    }

    #input_9_cc_number, #input_9_cc_ccv,
    #input_9_cc_exp_month, #input_9_cc_exp_year,
    #input_9_donation{

    width:120px !important;

    }

    #input_14_area{

    width:80px !important;

    }

    #input_14_phone{

    width:110px !important;

    }

    input[id*="first"], input[id*="last"]{

    width:120px !important;

    }

    #input_17_country, #input_9_country{

    width:120px !important;

    margin-left:-20px !important;

    }

    }

     

    Result:

    Hope this helps. Thanks!

  • Profile Image

    Answered by Homeappraisalsinc on June 12, 2013 at 06:28 AM

    That worked great thank you. The only issue I have now is that the blue background of the form extends out of the right hand side of the iphone screen. How can I resolve this?

    https://www.homeappraisalsinc.com/payment-submission/

    Thanks

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 12, 2013 at 07:54 AM

    @Homeappraisalsinc

    I've fixed. Kindly check your form now. Thanks!

  • Profile Image

    Answered by Homeappraisalsinc on June 12, 2013 at 08:04 AM

    Thank you. Out of interest, what was it that fixed it?

     

    Thanks again for your great support.

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 12, 2013 at 08:48 AM

    @Homeappraisalsinc

    You're welcome!

    I just updated the CSS codes I've provided earlier. You can check that to your form.

    .form-sub-label {

    color: #ffffff;

    font-size: 100%;}

    @media only screen and (max-device-width: 550px){

    .form-textbox, .form-dropdown, .form-textarea{

    width:240px !important;}

    input[id$="_city"],  input[id$="_postal"] {

    width:110px !important;}

    input[id$="_state"]{

    width:110px !important;

    margin-left:-20px !important;}

    #input_9_cc_exp_month, #input_9_cc_exp_year, #input_9_donation{

    width:120px !important;}

    #input_9_cc_number, #input_9_cc_ccv{

    width:105px !important;}

    #input_14_area{

    width:80px !important;}

    #input_14_phone{

    width:110px !important;}

    input[id*="first"]{

    width:105px !important;}

    input[id*="last"]{

    width:105px !important;

    margin-left:-5px !important;}

    #input_17_country, #input_9_country{

    width:120px !important;

    margin-left:-20px !important;}

    .form-all{

    width:280px !important;

    over-flow:hidden;

    margin:0 !important;

    padding:0 !important;}

    body, html{

    background:none !important;}

    #cid_9 hr {

    width: 275px;

    margin-left: 0;}}

    .form-all{

    background:#0055A5 !important;}

    body, html{background:#0055A5;}

    Thanks!