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

    Where would I insert the CSS code below?

    Asked by abithas on May 03, 2016 at 06:09 PM
    where would i insert the following code below?

    .form-label-left, .form-label-right, .form-label-top { display:none; }


    .form-all {
    font-family: "Lucida Grande", sans-serif;
    }
    .form-all {
    width: 690px;
    width: 100%;
    max-width: 690px;
    }
    .form-label-left,
    .form-label-right {
    width: 150px;
    }
    .form-label {
    white-space: normal;
    }
    .form-label.form-label-auto {
    display: inline-block;
    float: left;
    text-align: left;
    width: 150px;
    }
    .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: #ffffff;
    background-color: #f5f5f5;
    }
    .supernova body {
    background-color: transparent;
    }
    /*
    @width30: (unit(@formWidth, px) + 60px);
    @width60: (unit(@formWidth, px)+ 120px);
    @width90: (unit(@formWidth, px)+ 180px);
    */
    /* | */
    @media screen and (min-width: 480px) {
    .supernova .form-all {
    border: 1px solid #dcdcdc;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
    }
    }
    /* | */
    /* | */
    @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: 689px) {
    .jotform-form {
    padding: 30px 0;
    }
    }
    /* | */
    /* | */
    @media screen and (min-width: 768px) {
    .jotform-form {
    padding: 60px 0;
    }
    }
    /* | */
    /* | */
    @media screen and (max-width: 689px) {
    .jotform-form {
    padding: 0;
    }
    }
    /* | */
    .supernova .form-all,
    .form-all {
    background-color: #ffffff;
    border: 1px solid transparent;
    }
    .form-header-group {
    border-color: #e6e6e6;
    }
    .form-matrix-table tr {
    border-color: #e6e6e6;
    }
    .form-matrix-table tr:nth-child(2n) {
    background-color: #f2f2f2;
    }
    .form-all {
    color: #555555;
    }
    .form-header-group .form-header {
    color: #555555;
    }
    .form-header-group .form-subHeader {
    color: #6f6f6f;
    }
    .form-sub-label {
    color: #6f6f6f;
    }
    .form-label-top,
    .form-label-left,
    .form-label-right,
    .form-html {
    color: #555555;
    }
    .form-checkbox-item label,
    .form-radio-item label {
    color: #6f6f6f;
    }
    .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: #ffffe0;
    }
    /* ö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: 12px;
    margin-bottom: 12px;
    }
    .form-line {
    padding: 12px 36px;
    }
    .form-all .qq-upload-button,
    .form-all .form-submit-button,
    .form-all .form-submit-reset,
    .form-all .form-submit-print {
    font-size: 1em;
    padding: 9px 15px;
    font-family: "Lucida Grande", sans-serif;
    font-size: 14px;
    font-weight: normal;
    }
    .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: #ffffff;
    }
    [data-type="control_dropdown"] .form-input,
    [data-type="control_dropdown"] .form-input-wide {
    width: 150px;
    }
    .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: #fff4f4;
    }
    .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% !important;
    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 Mike on May 03, 2016 at 06:19 PM

    The custom CSS is usually added via Form Designer. Please see the next animation.

    However, the process might be different depending on your goal. If you need help with anything specific, please provide us with more information on your inquiry.