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

    Prevent form fields from overlapping

    Asked by AmitAk on July 31, 2016 at 05:10 AM

    I want to prevent my form fields from overlapping while keeping the form responsive.

     

    This is what my form looks like now:

     

     

    This is what i want to achieve:

     

     

    I have tried to fix this issue by setting margins on various fields,


    #input_9 ,#input_8 ,#input_10 {

    margin-left:60px;

    }

    #input_2{

    margin-left:180px;

    }

     

    It makes the form look exactly as i want but the form doesn't stay responsive.

     

    This is how it looks like on mobile after applying margins:

     

    My form is responsive right now and i need help with fixing this fields overlapping issue while keeping my form look good on mobile devices.

     

    Regards

    Page URL:
    https://form.jotform.me/62102552952450

  • Profile Image
    JotForm Support

    Answered by BDAVID on July 31, 2016 at 09:43 AM

    Please go to your forms Custom CSS area and delete everything you find there, and paste the following CSS code instead: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    .form-all{

        margin-top: 200px !important;

    }

    .form-line-active {

        background : none !important;

    }

    #input_7,#input_8,#input_9,#input_10,#input_2 {

        background-color : #559BDB;

        border-color : transparent;

        color : white;

        box-shadow : 0px 0px 2px blue;

    }

    #input_7,#input_8,#input_9,#input_10,#input_2:hover {

        box-shadow : 0px 0px 4px blue;

    }

    #id_7,#id_8,#id_9,#id_10,#id_2{

        padding-top: 0px !important;

        margin-top: 0px !important;

        padding-bottom: 0px !important;

        margin-bottom: 0px !important;

    }

    #id_7{

        padding-right: 5px !important;

        margin-right: 0px !important;

    }

    #id_8,#id_9,#id_10,#id_2 {

        padding-left: 5px !important;

        margin-left: 0px !important;

        padding-right: 0px !important;

        margin-right: 0px !important;

    }

    .form-all{

        width: 500px !important;

    }

    #input_7{

    width: 65px !important;

    max-width: 65px !important;

    }

    #input_9,#input_10{

        height: 35px !important;

    }

    #input_7{

        height: 43px !important;

    }

    #input_8{

        height: 43px !important;

    }

    input[type="file" i]::-webkit-file-upload-button, button {

         height: 43px !important;

    }

    #id_2{

        margin-top: -3px !important;

    }

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

    .form-all{

    width: 100% !important;

    }

    }

    Also, make sure to add the mobile responsive widget:

    Results:

    Desktop view:

    Mobile view:

    Here is my cloned version: https://form.jotform.co/62123166652855 

    You may clone it in your account and use it if you want to: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Let us know if you need more help.

  • Profile Image

    Answered by AmitAk on July 31, 2016 at 11:03 AM

    Thanks, everything works perfectly fine.

     

    You guys have one of the best support team, Goodluck.

  • Profile Image
    JotForm Support

    Answered by BDAVID on July 31, 2016 at 11:14 AM

    You are welcome! Open a new thread if you need anything else. :-)