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

    reduce the margin

    Asked by kauseway on September 11, 2015 at 08:58 PM

    is there a way to reduce the margin or padding around all sides and in between fields without hurting the responsiveness.?

     

    Page URL:
    http://form.jotformpro.com/form/52537130034949

    JotForm height
  • Profile Image
    JotForm Support

    Answered by Boris on September 12, 2015 at 05:44 PM

    Yes, we can do that by injecting custom CSS into your form.

    I have noticed that your other form named fiverr is already made in such a way:

    http://www.jotformpro.com/form/52544336851962

    Here is the full custom CSS that was used on that second form to achieve its appearance:

    /* Custom CSS by Malayadavparsu */
    html.supernova div.form-all, div.form-all {
        background-color : rgb(44, 182, 217) !important;
    }

    .form-all {
        padding : 0;
        margin : 0 auto;
        border-radius : 2.5px;
    }

    .form-line {
        padding : 0;
    }

    ul.form-section.page-section {
        padding : 2.5px 2.5px 3px 3px;
    }

    li[data-type=control_widget] {
        display : none;
    }

    button#input_2 {
        margin : 4px 0px 0px 0px;
        padding : 0;
        background : #0E9BBF;
        font-family : 'open sans';
        text-transform : uppercase;
        font-size : 15px;
        border : 2px solid #0481A0 !important;
    }

    li#id_7, li#id_1, li#id_3, li#id_4 {
        width : 48.85% !important;
        margin : 0;
    }

    li#id_1, li#id_3 {
        padding : 0px;
    }

    li#id_7, li#id_4 {
        padding : 0px 0px 0px 2.8%;
    }

    li.form-line.form-line-column {
        color : #323a3b;
    }

    div#cid_1 {
        position : relative;
    }

    div#cid_3, div#cid_4 {
        margin-top : 4px;
    }

    #cid_1:after {
        content : '';
        background-image : url(//www.accommodation.net/img/location-icon-blue.png);
        position : absolute;
        left : 2px;
        width : 11px;
        height : 16px;
        top : 17px;
    }

    input#input_1 {
        width : 98% !important;
        padding : 1% 0.3% 1.5% 5%;
    }

    @media screen and (max-width:762px){
        .form-all {
            width : 90%;
        }

        #input_7, #input_1, #input_3, #input_4 {
            width : 98.5% !important;
        }

        ul.form-section.page-section {
            padding : 1px 1px 2.5px 1px;
        }

        li#id_7, li#id_1, li#id_3, li#id_4 {
            width : 98% !important;
            padding : 0;
            margin : 3px;
            float : none;
            clear : both;
        }

        input[type=text] {
            padding : 7.5px;
        }

        button#input_2 {
            margin-top : 2px;
            width : 99.5%;
        }

        input#input_1 {
            width : 95.5% !important;
        }

        li#id_3, li#id_4 {
            margin-top : 0;
        }

        input#input_4 {
            width : 98% !important;
        }

    }

    @media only screen and (max-width: 40em){
        li#id_2 {
            padding : 0;
        }

        input#input_1, input#input_7, input#input_3, input#input_4 {
            width : 101% !important;
        }

    }

    If you wish to take only the padding and margin styles from it, without including the color changes, you can try using this shortened version of that code:

    .form-all {
        padding : 0;
        margin : 0 auto;
        border-radius : 2.5px;
    }

    .form-line {
        padding : 0;
    }

    ul.form-section.page-section {
        padding : 2.5px 2.5px 3px 3px;
    }

    li[data-type=control_widget] {
        display : none;
    }

    button#input_2 {
        margin : 4px 0px 0px 0px;
        padding : 0;
    }

    li#id_7, li#id_1, li#id_3, li#id_4 {
        width : 48.85% !important;
        margin : 0;
    }

    li#id_1, li#id_3 {
        padding : 0px;
    }

    li#id_7, li#id_4 {
        padding : 0px 0px 0px 2.8%;
    }

    div#cid_3, div#cid_4 {
        margin-top : 4px;
    }

    input#input_1 {
        width : 98% !important;
        padding : 1% 0.3% 1.5% 5%;
    }

    @media screen and (max-width:762px){
        .form-all {
            width : 90%;
        }

        #input_7, #input_1, #input_3, #input_4 {
            width : 98.5% !important;
        }

        ul.form-section.page-section {
            padding : 1px 1px 2.5px 1px;
        }

        li#id_7, li#id_1, li#id_3, li#id_4 {
            width : 98% !important;
            padding : 0;
            margin : 3px;
            float : none;
            clear : both;
        }

        input[type=text] {
            padding : 7.5px;
        }

        button#input_2 {
            margin-top : 2px;
            width : 99.5%;
        }

        input#input_1 {
            width : 95.5% !important;
        }

        li#id_3, li#id_4 {
            margin-top : 0;
        }

        input#input_4 {
            width : 98% !important;
        }

    }

    @media only screen and (max-width: 40em){
        li#id_2 {
            padding : 0;
        }

        input#input_1, input#input_7, input#input_3, input#input_4 {
            width : 101% !important;
        }

    }

    I hope it helps. Please let us know how it goes.