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

    Im having trouble optimising my form for mobile view

    Asked by timcross861 on June 17, 2016 at 06:49 PM

    I have already added widget etc.

    Page URL:
    https://form.jotformeu.com/53295888852373

    Mobile mobile view JotForm uploads jpg www
  • Profile Image
    JotForm Support

    Answered by Boris on June 17, 2016 at 09:53 PM

    It seems that existing styles for Submit button and other fields are already set at a fixed number (specifically set in pixels). This is forcing your Submit button to always be 400 pixels wide, even if being viewed on a smaller mobile device.

    To remedy this, I would recommend adding the following custom CSS to your form:

    .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {
        width: 100%;
    }

    It will make sure that Submit button, Print button, Reset button, and similar use entire available width of the form. Since the form on desktops is already set at width of 400 pixels, it means that these buttons will still appear at 400 pixels on desktop computers, while on mobile devices it will be taking 100% of available space.

    You can add the above CSS to your form by following this guide:

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

    In case you also want to force the image on the first input field at the top also resize when viewed on smaller screens, you can apply the following CSS as well:

    #input_14 { background-size: contain; }

    Please try it out, and if you need further assistance, please let us know. Thank you.

  • Profile Image

    Answered by timcross861 on June 18, 2016 at 05:06 AM

    Great that has worked well. 

    I still have a couple of issues though, can the SE11 CAR text size in the background image also be reduced to keep in theme with the picture?

    Also the drop down boxes overhand the edge of the screen can this be fixed also? with a slight gap in between the two?

     

  • Profile Image
    JotForm Support

    Answered by liyam on June 18, 2016 at 06:15 AM

    Hello,

    I've checked the view on my end and the SE11 CAR text size seems to be within its bounds. Have you made the changes already on this text?

    Regarding the dropdown fields, you can inject this CSS code into your form:

    #id_16 {
       padding-left: 20px;
    }
    #id_17 {
      padding-left: 10px;
    }

    Please do get back to us if you have questions or concerns.

    Thanks.