Prevent form fields from overlapping

  • Profile Image
    AmitAk
    Asked 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

  • Profile Image
    BDAVID
    Answered 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
    AmitAk
    Answered 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
    BDAVID
    Answered on July 31, 2016 at 11:14 AM

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