reduce the margin

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

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.