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 to change the layout of my form for mobile

    Asked by beatsahead on November 09, 2015 at 01:06 PM

    I've tried using the responsive option in designer and some css but cant get the design look I'd like.

    On smaller screens I would like the form to line up vertically with each field under the other and all the same width.

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

    layout Mobile how how to change
  • Profile Image

    Answered by Ben on November 09, 2015 at 03:32 PM

    My suggestion would be to check this guide: How To Make Mobile Friendly Forms on JotForm

    The reason why is because if you only check the option in the Designer, you will get only some of the styles applied, while if you click on both the option in the designer and in the form builder, you will have more of them applied.

    If you wish, we could assist with the CSS as well, but please do let us know what is the resolution that you wish to have the mobile versions started at? I presume that it would usually be the standard ones, but since the form is wider than longer, I want to check with you just in case before we start.

  • Profile Image

    Answered by beatsahead on November 09, 2015 at 06:18 PM

    I'd rather do it with CSS, I'm making a mess of the code though.

    on a mobile id like the form to be

    please select

    start date

    start time

    end date

    end time

    email

    submit

    with all of those fields the same width, so that it looks very uniform vertically ona mobile as oppose to horizontal on a full screen.

  • Profile Image
    JotForm Support

    Answered by Chriistian on November 09, 2015 at 08:50 PM

    Hi,

    I'm currently checking on a custom CSS for your form. Please give me more time. I'll reply here as soon as I have it working. 

  • Profile Image
    JotForm Support

    Answered by Chriistian on November 09, 2015 at 09:44 PM

    Hi,

     

    Can you try injecting the custom CSS below?

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

    .form-section.page-section {

    padding: 10px;

    }

    #input_80,#id_47,#id_170,#id_171,#input_168 {

    width:100% !important;

    margin-left: 0px !important;

    }

    .date-separate {

    display: none;

    }

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

    max-width: 100% !important;

    }

    #input_171 {

    height: 30px !important;

    line-height: 25px !important;

    padding-left: 0px !important;

    width: 100% !important;

    }

    #hour_47, #hour_170 {

    width: 100% !important;

    max-width: 20% !important;

    position: absolute;

    left: 100px !important;

    top:5px;

    height: 30px !important;

    }#min_47, #min_170 {

    width: 100% !important;

    max-width: 20% !important;

    position: absolute;

    left: 170px !important;

    top:5px;

    height: 30px !important;

    }

    li#id_171 {

    top: 20px;

    }

     

    }

    You can check the cloned form here: https://form.jotform.com/53128331243951

    To inject a custom CSS, you can check the article here: How to Inject Custom CSS Codes

     

    Do let us know if you need further assistance.

    Regards.

  • Profile Image

    Answered by beatsahead on November 10, 2015 at 05:06 AM

    Thanks for that, its looking better, how do I get the date time field to be the same width as the other fields, and decrease the gap between the 2nd date and email field?

  • Profile Image
    JotForm Support

    Answered by Chriistian on November 10, 2015 at 06:27 AM

    Hi,

     

    To increase the width of the date time field you can add the custom CSS code below in your form inside the @media only screen and (max-width: 480px){} CSS code that I have provided above.

    #lite_mode_47, #lite_mode_170{

        width: 140px !important;

    }

    Also, you need to adjust/edit the position of the time field by adjusting the left property in the CSS code that I have provided above.

    #hour_47, #hour_170 {

        width : 100% !important;

        line-height : 25px !important;

        max-width : 20% !important;

        position : absolute;

        left : 155px !important;

        top : 5px;

        height : 30px !important;

    }

    #min_47, #min_170 {

        width : 100% !important;

        max-width : 20% !important;

        position : absolute;

        left : 215px !important;

        top : 5px;

        height : 30px !important;

    }

     

    To decrease the gap between the 2nd date and email field please remove the CSS part below in the CSS code I have provided.

    li#id_171 {

        top: 20px;

    }

     

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

  • Profile Image

    Answered by beatsahead on November 10, 2015 at 06:52 AM

    Thanks, its looking much better, can you tell me what I need to put in to reduce the space before the submit button please?

  • Profile Image
    JotForm Support

    Answered by Chriistian on November 10, 2015 at 09:14 AM

    Hi,

     

    To reduce the space before the submit button please try to add the custom CSS code below in your form inside the @media only screen and (max-width: 480px){} CSS code that I have provided above:

    button#input_168 {

        margin-top: 0px !important;

    }

     

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