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

    Hi I need some help with the padding and margins.

    Asked by a2000 on January 14, 2016 at 08:09 AM

    Hi I need some help with the padding and margins. After i used the designer function and added the source code into my html page as well as upload the CSS files, there's now a huge padding above my form and a margin on the left where i'd like it to be aligned with my header.

    Please help!

    http://www.uniq365cloud.com/Jill/contact.html



    This is a re-post of a comment on Customize Your Form Using Custom CSS Codes

    source www designer
  • Profile Image
    JotForm Support

    Answered by KadeJM on January 14, 2016 at 11:52 AM

    It seems to me that you are in need of some help with adjusting your form's padding and margins so that it's aligned better under the header of your webpage.

    When I first visit your webpage I can see a gap on the top and on the left.

    To fix this within the form to try to align it better you can try injecting this css code below which will remove the margins that are creating those gaps you are viewing.

     

    CSS CODE:

    .form-all {margin-top: 0px;

                   margin-left: -120px;

    }

     

    And that will force your form up some and to the left as well producing this result:

     

    If for some reason you need to shift it more just adjust the values some or let us know with an updated screenshot so that we can assist you further.

  • Profile Image

    Answered by a2000 on January 14, 2016 at 09:46 PM
    hi this is my current css. where do i inject or edit this line of css?
    .form-all {
    font-family: "Lucida Grande", sans-serif;
    }
    .form-all {
    width: 650px;
    width: 100%;
    max-width: 650px;
    }
    .form-label-left,
    .form-label-right {
    width: 140px;
    }
    .form-label {
    white-space: normal;
    }
    .form-label.form-label-auto {
    display: inline-block;
    float: left;
    text-align: left;
    width: 140px;
    }
    .form-label-left {
    display: inline-block;
    white-space: normal;
    float: left;
    text-align: left;
    }
    .form-label-right {
    display: inline-block;
    white-space: normal;
    float: left;
    text-align: right;
    }
    .form-label-top {
    white-space: normal;
    display: block;
    float: none;
    text-align: left;
    }
    .form-all {
    font-size: 14px;
    }
    .form-label {
    font-weight: bold;
    }
    .form-checkbox-item label,
    .form-radio-item label {
    font-weight: normal;
    }
    .supernova {
    background-color: none;
    background-color: #ffffff;
    }
    .supernova body {
    background-color: transparent;
    }
    /*
    @width30: (unit(@formWidth, px) + 60px);
    @width60: (unit(@formWidth, px)+ 120px);
    @width90: (unit(@formWidth, px)+ 180px);
    */
    /* | */
    /* | */
    /* | */
    @media screen and (max-width: 480px) {
    .jotform-form {
    padding: 10px 0;
    }
    }
    /* | */
    /* | */
    @media screen and (min-width: 480px) and (max-width: 768px) {
    .jotform-form {
    padding: 30px 0;
    }
    }
    /* | */
    /* | */
    @media screen and (min-width: 480px) and (max-width: 649px) {
    .jotform-form {
    padding: 30px 0;
    }
    }
    /* | */
    /* | */
    @media screen and (min-width: 768px) {
    .jotform-form {
    padding: 60px 0;
    }
    }
    /* | */
    /* | */
    @media screen and (max-width: 649px) {
    .jotform-form {
    padding: 0;
    }
    }
    /* | */
    .supernova .form-all,
    .form-all {
    background-color: none;
    border: 1px solid transparent;
    }
    .form-all {
    color: #000000;
    }
    .form-header-group .form-header {
    color: #000000;
    }
    .form-header-group .form-subHeader {
    color: #1a1a1a;
    }
    .form-sub-label {
    color: #1a1a1a;
    }
    .form-label-top,
    .form-label-left,
    .form-label-right,
    .form-html {
    color: #000000;
    }
    .form-checkbox-item label,
    .form-radio-item label {
    color: #1a1a1a;
    }
    .form-line.form-line-active {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -ms-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    -ms-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    background-color: inherit;
    }
    /* ömer */
    .form-radio-item,
    .form-checkbox-item {
    padding-bottom: 0px !important;
    }
    .form-radio-item:last-child,
    .form-checkbox-item:last-child {
    padding-bottom: 0;
    }
    /* ömer */
    .form-single-column .form-checkbox-item,
    .form-single-column .form-radio-item {
    width: 100%;
    }
    .supernova {
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
    background-repeat: repeat;
    }
    .supernova {
    background-image: none;
    }
    #stage {
    background-image: none;
    }
    /* | */
    .form-all {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
    background-repeat: repeat;
    }
    .form-header-group {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
    }
    .form-line {
    margin-top: 0px;
    margin-bottom: 0px;
    }
    .form-line {
    padding: 12px 36px;
    }
    .form-all .form-textbox,
    .form-all .form-radio-other-input,
    .form-all .form-checkbox-other-input,
    .form-all .form-captcha input,
    .form-all .form-spinner input,
    .form-all .form-pagebreak-back,
    .form-all .form-pagebreak-next,
    .form-all .qq-upload-button,
    .form-all .form-error-message {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    }
    .form-all .form-sub-label {
    margin-left: 3px;
    }
    .form-all .form-textarea {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    }
    .form-all {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    }
    .form-section:first-child {
    -webkit-border-radius: 0px 0px 0 0;
    -moz-border-radius: 0px 0px 0 0;
    border-radius: 0px 0px 0 0;
    }
    .form-section:last-child {
    -webkit-border-radius: 0 0 0px 0px;
    -moz-border-radius: 0 0 0px 0px;
    border-radius: 0 0 0px 0px;
    }
    .form-all .qq-upload-button,
    .form-all .form-submit-button,
    .form-all .form-submit-reset,
    .form-all .form-submit-print {
    width: 100px;
    font-size: 1em;
    padding: 9px 15px;
    font-family: "Lucida Grande", sans-serif;
    font-size: 18px;
    font-weight: normal;
    }
    .form-all .qq-upload-button,
    .form-all .form-submit-button,
    .form-all .form-submit-reset,
    .form-all .form-submit-print {
    color: #eeeeee !important;
    background: #10364f;
    box-shadow: none;
    text-shadow: none;
    }
    .form-all .form-pagebreak-back,
    .form-all .form-pagebreak-next {
    font-size: 1em;
    padding: 9px 15px;
    font-family: "Lucida Grande", sans-serif;
    font-size: 14px;
    font-weight: normal;
    }
    /*
    & when ( @buttonFontType = google ) {
    @import (css) "@{buttonFontLink}";
    }
    */
    h2.form-header {
    line-height: 1.618em;
    font-size: 1.714em;
    }
    h2 ~ .form-subHeader {
    line-height: 1.5em;
    font-size: 1.071em;
    }
    .form-header-group {
    text-align: left;
    }
    /*.form-dropdown,
    .form-radio-item,
    .form-checkbox-item,
    .form-radio-other-input,
    .form-checkbox-other-input,*/
    .form-captcha input,
    .form-spinner input,
    .form-error-message {
    padding: 4px 3px 2px 3px;
    }
    .form-header-group {
    font-family: "Lucida Grande", sans-serif;
    }
    .form-section {
    padding: 0px 0px 0px 0px;
    }
    .form-header-group {
    margin: 12px 36px 12px 36px;
    }
    .form-header-group {
    padding: 24px 0px 24px 0px;
    }
    .form-textbox,
    .form-textarea {
    padding: 4px 3px 2px 3px;
    }
    .form-textbox,
    .form-textarea,
    .form-radio-other-input,
    .form-checkbox-other-input,
    .form-captcha input,
    .form-spinner input {
    background-color: inherit;
    }
    [data-type="control_dropdown"] .form-input,
    [data-type="control_dropdown"] .form-input-wide {
    width: 150px;
    }
    .form-buttons-wrapper {
    margin-left: 0 !important;
    text-align: left !important;
    }
    .form-label {
    font-family: "Lucida Grande", sans-serif;
    }
    li[data-type="control_image"] div {
    text-align: left;
    }
    li[data-type="control_image"] img {
    border: none;
    border-width: 0px !important;
    border-style: solid !important;
    border-color: false !important;
    }
    .form-line-column {
    width: auto;
    }
    .form-line-error {
    overflow: hidden;
    -webkit-transition-property: none;
    -moz-transition-property: none;
    -ms-transition-property: none;
    -o-transition-property: none;
    transition-property: none;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    -ms-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    background-color: inherit;
    }
    .form-line-error .form-error-message {
    background-color: #ff3200;
    clear: both;
    float: none;
    }
    .form-line-error .form-error-message .form-error-arrow {
    border-bottom-color: #ff3200;
    }
    .form-line-error input:not(#coupon-input),
    .form-line-error textarea,
    .form-line-error .form-validation-error {
    border: 1px solid #ff3200;
    -webkit-box-shadow: 0 0 3px #ff3200;
    -moz-box-shadow: 0 0 3px #ff3200;
    box-shadow: 0 0 3px #ff3200;
    }
    .ie-8 .form-all {
    margin-top: auto;
    margin-top: initial;
    }
    .ie-8 .form-all:before {
    display: none;
    }
    /* | */
    @media screen and (max-width: 480px), screen and (max-device-width: 768px)
    and (orientation: portrait), screen and (max-device-width: 415px) and
    (orientation: landscape) {
    .jotform-form {
    padding: 0;
    }
    .form-all {
    border: 0;
    width: 100%;
    max-width: initial;
    }
    .form-sub-label-container {
    width: 100%;
    margin: 0;
    }
    .form-input {
    width: 100%;
    }
    .form-label {
    width: 100%!important;
    }
    .form-line {
    padding: 2% 5%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    input[type=text],
    input[type=email],
    input[type=tel],
    textarea {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: initial !important;
    }
    .form-input,
    .form-input-wide,
    .form-textarea,
    .form-textbox,
    .form-dropdown {
    max-width: initial !important;
    }
    div.form-header-group {
    padding: 24px 0px !important;
    margin: 0 12px 2% !important;
    margin-left: 5% !important;
    margin-right: 5% !important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    [data-type="control_button"] {
    margin-bottom: 0 !important;
    }
    .form-buttons-wrapper {
    margin: 0!important;
    }
    .form-buttons-wrapper button {
    width: 100%;
    }
    table {
    width: 100%!important;
    max-width: initial !important;
    }
    table td + td {
    padding-left: 3%;
    }
    .form-checkbox-item input,
    .form-radio-item input {
    width: auto;
    }
    .form-collapse-table {
    margin: 0 5%;
    }
    }
    /* | *//*__INSPECT_SEPERATOR__*/
    ...
  • Profile Image
    JotForm Support

    Answered by Boris on January 15, 2016 at 02:33 AM

    You should add the new CSS codes at the very bottom of the existing CSS.

    On top of the code that my colleague Kade suggested, for removing the top padding, you can also add the following line of CSS:

    .jotform-form { padding: 0px; }

    So you will end up adding this code to the bottom of your existing CSS:

    .form-all {
      margin-top: 0px;
      margin-left: -120px;
    }
    .jotform-form {
      padding: 0px;
    }

    Your CSS will end up looking like this:

    ...
      .form-collapse-table {
        margin: 0 5%;
      }
    }
    /* | */

    /*__INSPECT_SEPERATOR__*/

        /* Injected CSS Code */

    .form-all {
      margin-top: 0px;
      margin-left: -120px;
    }
    .jotform-form {
      padding: 0px;
    }

     

    Please let us know if you need further assistance, and we will be happy to help.