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

    how can I improve look on mobile device

    Asked by jrittenhouse on February 04, 2014 at 03:59 PM

    Hi,

    I'm trying to improve my form on mobile devices. I was trying to go through past questions on the form and inject custom CSS, and even write my own but it's just not working.

    I believe the main problem is the width of the text area (id_34). It seems like the width of this text area is forcing the width of the entire form to be too wide for mobile screen. I'm not sure how to fix this though.

    basically, I'm just looking for the background and that text area to adjust with mobile device width so when you visit the form it doesn't default to wide background and make everything small.

    Any input would be really appreciated.

    thanks,

    Josh

    Page URL:
    http://form.jotform.co/form/33535193654862

    Mobile mobile device Inject Custom CSS problem wide
  • Profile Image
    JotForm Support

    Answered by Welvin on February 04, 2014 at 04:27 PM

    Hi Josh,

    If possible, send us a screenshot of the said issue so we can easily identify the look of the form to your end. This is what I see when viewing your form direct URL using iPhone 5S:

     

    Instead of the main field ID, use the input ID: input_34. You can use @media CSS to the form. The codes below:

    /* Smartphones (portrait and landscape) ----------- */

    @media only screen 

    and (min-device-width : 320px) 

    and (max-device-width : 480px) {

    #input_34 {

    width: 350px;

    }

    }

     

    /* iPads (portrait and landscape) ----------- */

    @media only screen 

    and (min-device-width : 768px) 

    and (max-device-width : 1024px) {

    #input_34 {

    width: 350px;

    }

    }

    Inject this codes by following this guide: How to Inject Custom CSS Codes. You need to adjust 350px until you'll see the desired result.

    Let us know if you need further assistance.

    Thanks

  • Profile Image

    Answered by jrittenhouse on February 05, 2014 at 09:01 AM

    thanks for the response.

    I added that CSS, but still seem to get the same thing. Below is a screen shot of how it looks on my iPhone 4s.

     

    As you can see the "Installation Details" field is going off screen to the right. I don't know if the field is filling to the background, or forcing the background to be larger.

     

    thanks again,

    Josh

  • Profile Image

    Answered by EliezerN on February 05, 2014 at 10:05 AM

    Thanks for letting us know about the continuity of this issue.

    Kindly try removing the code suggested by my colleague and now use this CSS code: 

    /* Smartphones (portrait and landscape) ----------- */

    @media only screen 

    and (min-device-width : 320px) 

    and (max-device-width : 480px) {

    #input_34 {

    max-width: 350px!important;

    width: 350px!important;

    }

    }

     

    /* iPads (portrait and landscape) ----------- */

    @media only screen 

    and (min-device-width : 768px) 

    and (max-device-width : 1024px) {

    #input_34 {

    max-width: 350px!important;

    width: 350px!important;

    }

    }

    I hope this helps. Please inform us if you need further assistance with this inquiry.

    thanks

  • Profile Image

    Answered by jrittenhouse on February 05, 2014 at 10:34 AM

    really appreciate the quick responses!

    that CSS worked to make that field smaller, but it looks like the background is still too wide. Anyway we could make the background 100% when on mobile devices instead of a pixel dimension? so it just fits the screen and avoids scrolling side to side.

     

    thanks so much,

    Josh

  • Profile Image
    JotForm Support

    Answered by KadeJM on February 05, 2014 at 11:29 AM

    I see what you mean looking at it on my iPhone. That is happening because the background is too large and yes you can force it to fit the screen at 100%.

     

    Please try this instead:

    /* Smartphones (portrait and landscape) ----------- */

    @media only screen

    and (min-device-width : 320px)

    and (max-device-width : 100%) {

    #input_34 {

    max-width: 100%!important;

    width: 100%!important;

    }

    }

     

  • Profile Image
    JotForm Support

    Answered by KadeJM on February 05, 2014 at 11:33 AM

    Sorry, I forgot to include the Script for the iPad as well but it is done in the same way using 100% instead of the Size (500px). Just replace that for the width and max-width where it should fix that similar to how I did it for the iPhone. But if you need more help with it just ask.

  • Profile Image

    Answered by jrittenhouse on February 05, 2014 at 11:43 AM

    sorry, this is still only changing that field... I need the whole background to fit on screen rather than be too wide.

    are you able to scroll side to side on your phone? on mine, it's almost twice the width of the actual screen.

     

    here is a screen shot of it zoomed out so you can see how small it makes it:

  • Profile Image
    JotForm Support

    Answered by TitusN on February 05, 2014 at 12:42 PM

    Hello,

    Thank you for your feedback. 

    Please add the following rule inside the Mobile viewport as suggested by my Colleague Kade:

    .form-all {
    width: 100%!important;
    }

    Let us know if this helps.     

  • Profile Image

    Answered by jrittenhouse on February 05, 2014 at 12:55 PM

    still wide on my phone, doesn't appear to have had any effect.

  • Profile Image

    Answered by pinoytech on February 05, 2014 at 01:31 PM

    Hi,

    It looks fine on my end upon checking your form.

    Have you tried already clearing browser cache and cookies of your phone? If not, can you please give a try?

    Thanks,

  • Profile Image

    Answered by jrittenhouse on February 05, 2014 at 01:40 PM

    strange. cleared my cache and this is still what i get:

  • Profile Image

    Answered by pinoytech on February 05, 2014 at 02:08 PM

    May we know what mobile device you are using now for further investigation and for further assistance?

    Thanks,

  • Profile Image

    Answered by jrittenhouse on February 05, 2014 at 03:21 PM

    yes, I am on an iPhone 4s running ios 7.0.4

     

    thanks

  • Profile Image
    JotForm Support

    Answered by Mike_T on February 05, 2014 at 03:49 PM

    Can you please try to clear your browser temporary files on iPhone to see if that makes any difference?

    Also, you might try to decrease a number of Columns on your Text Area field.

  • Profile Image

    Answered by jrittenhouse on February 05, 2014 at 03:53 PM

    already cleared everything in browser on phone. also adjusting columns doesn't seem to help.

     

    I don't think it's the field that forcing it do be too wide.

  • Profile Image
    JotForm Support

    Answered by TitusN on February 05, 2014 at 05:06 PM

    Ok,

    I've created a test form (a copy of yours) for you to view - Please take a screen shot of what you see when you load it up on your phone.

    Here's the form: http://www.jotformpro.com/form/40355862601956 

    Please let us know.

               

  • Profile Image

    Answered by jrittenhouse on February 06, 2014 at 08:38 AM

    that one looks great on my phone.

  • Profile Image
    JotForm Support

    Answered by TitusN on February 06, 2014 at 09:02 AM

    Please Go ahead and clone it, take a closer look at the injected CSS rules. You may use the form, or replace the rules on your current form with these ones:

    .form-all {
    width: 100%;
    }
    #cid_16,
    #input_16,
    #cid_3,
    #first_3,
    #last_3,
    #cid_18,
    #input_18,
    #cid_17,
    #input_17
    #cid_19,
    #input_19,
    #cid_20,
    #input_20,
    #cid_21,
    #input_21,
    #cid_22,
    #input_22,
    #cid_33,
    #input_33_area,
    #input_33_phone,
    #cid_4,
    #input_4,
    #cid_5,
    #input_5,
    #cid_6,
    #input_6,
    #cid_7,
    #input_7,
    #cid_8,
    #input_8,
    #cid_9,
    #input_9,
    #cid_10,
    #input_10,
    #cid_11,
    #input_11,
    #cid_12,
    #input_12,
    #cid_13,
    #input_13,
    #cid_14,
    #input_14,
    #cid_15,
    #input_15,
    #cid_23,
    #input_23,
    #cid_24,
    #input_24,
    #cid_34,
    #input_34
    {
    width: 95%;
    }
    .form-sub-label-container {
    margin-right: 5px!important;
    width: 95%;
    }

    I had to style the fields individually to respond to a mobile screen.

    To limit the form width, you may add the following rule:


    .form-all{

    max-width: 300px;/*For instance*/

    }

    Please let us know how we can assist further.

  • Profile Image

    Answered by jrittenhouse on February 07, 2014 at 09:58 AM

    so the clone looks great on my phone for the most part, but not so great on a desktop since all the fields go 100% wide now.

    I tried adding the mobile CSS that was suggested above, and it wasn't working. I tried for a couple hours yesterday and just couldn't get it to work properly.

    also - do you know why the phone number is now breaking up onto two lines? I need that on one.

  • Profile Image

    Answered by EliezerN on February 07, 2014 at 10:48 AM

    Hi,

    Could you please confirm that you also injected the next CSS code suggested by Titus?

    .form-all{

    max-width: 300px;/*For instance*/

    }

    I cloned Titus' form and injected the code and it works fine in desktop now:

    So, kindly inject the CSS code mentioned above and let us know if that resolves the problem from your side.

    Thanks

  • Profile Image

    Answered by jrittenhouse on February 07, 2014 at 10:53 AM

    my mistake, that will work.

    the phone number field is still being split onto two lines though.

  • Profile Image

    Answered by EliezerN on February 07, 2014 at 12:24 PM

    @Josh

    When you say "split into two lines" do you mean a box of the number field is under the other one? Because I checked your form and both boxes are in the same line:

    Or do you mean they are separated boxes and you wish them to be one box only?

    If that is the case you may use regular Textboxes instead.

    Please let us know if you need further assistance with this inquiry or simply open a new threads for unrelated questions.

    Thanks

  • Profile Image

    Answered by jrittenhouse on February 07, 2014 at 12:25 PM

    for me, on desktop and phone, the area code is above the phone number field.

  • Profile Image
    JotForm Support

    Answered by TitusN on February 07, 2014 at 12:45 PM

    Yes - some browsers and devices will do that - due to browser stylesheets that add padding for better visibility. 

    In any case, to simplify the whole scenario - Just use the normal text field as shown below:

    The phone number mask will make sure that only a phone number can be added (click on image to view better from our support forum)

    Remember to add the field's id to the list of rules provided earlier. You can find it by clicking on properites: 

    If you have further issues, please open a new request using this link, we'll look out for it.

    Thanks.