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

    How do I remove spacing on the right?

    Asked by j_pham on November 27, 2014 at 05:00 AM

    I embedded the form using this embed script:

    <script type="text/javascript" src="https://secure.jotform.us/jsform/23523508895158"></script>

     

    How do I remove the white space on the right of the form and decrease the vertical space between the text fields?

     

    Here is the CSS of the form:

    .form-all {

    font-family: "Tahoma", sans-serif;

    width: 150px;

    padding-top: 0px;

    padding-bottom: 0px;

    padding-right: -50px;

    padding-left: 0px;

    margin-top: -25px;

    margin-bottom: -45px;

    margin-right:-50px;

    margin-left: -5px;

    }

    .form-label-left,

    .form-label-right

    .form-label

    .form-label.form-label-auto {

    display: block;

    float: none;

    text-align: left;

    }

    .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;

    }

    .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 {

    background-color: #ffffff;

    }

    .supernova .form-all {

    border: 1px solid #e6e6e6;

    -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: 768px) and (max-width: 1024px) {

    .jotform-form {

    padding: 60px 0;

    }

    }

    /* | */

    /* | */

    @media screen and (min-width: 1024px) {

    .jotform-form {

    padding: 90px 0;

    }

    }

    /* | */

    .form-all {

    background-color: #ffffff;

    border: 0px 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 {

    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 */

    /*.ctrl-custom-size(@bgSize, @tickSize, @tickOffsetTop, @tickOffsetLeft, @radius) {input {

    display: none;

    }

    label {

    position: relative;

    margin-left: 0;

    }label:before {

    content: '';

    position: relative;

    display: inline-block;

    vertical-align: baseline;

    margin-right: 4px;

    .border-box();

    .rounded(@radius);width: @bgSize;

    height: @bgSize;

    }label:after {

    content: '';

    position: absolute;

    z-index: 10;

    display: inline-block;

    opacity: 0;top:@tickOffsetTop;

    left:@tickOffsetLeft;

    width: @tickSize;

    height: @tickSize;

    .rounded(@radius);

    }input:checked + label:after {

    opacity: 1;

    }}*/

    [data-type="control_radio"] .form-input,

    [data-type="control_checkbox"] .form-input,

    [data-type="control_radio"] .form-input-wide,

    [data-type="control_checkbox"] .form-input-wide {

    width: 100%;

    max-width: 150px;

    }

    .form-radio-item,

    .form-checkbox-item {

    width: 100%;

    max-width: 150px;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    .form-textbox.form-radio-other-input,

    .form-textbox.form-checkbox-other-input {

    width: 80%;

    margin-left: 3%;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    .form-multiple-column {

    width: 100%;

    }

    .form-multiple-column .form-radio-item,

    .form-multiple-column .form-checkbox-item {

    width: 10%;

    }

    .form-multiple-column[data-columncount="1"] .form-radio-item,

    .form-multiple-column[data-columncount="1"] .form-checkbox-item {

    width: 100%;

    }

    .form-multiple-column[data-columncount="2"] .form-radio-item,

    .form-multiple-column[data-columncount="2"] .form-checkbox-item {

    width: 50%;

    }

    .form-multiple-column[data-columncount="3"] .form-radio-item,

    .form-multiple-column[data-columncount="3"] .form-checkbox-item {

    width: 33.33333333%;

    }

    .form-multiple-column[data-columncount="4"] .form-radio-item,

    .form-multiple-column[data-columncount="4"] .form-checkbox-item {

    width: 25%;

    }

    .form-multiple-column[data-columncount="5"] .form-radio-item,

    .form-multiple-column[data-columncount="5"] .form-checkbox-item {

    width: 20%;

    }

    .form-multiple-column[data-columncount="6"] .form-radio-item,

    .form-multiple-column[data-columncount="6"] .form-checkbox-item {

    width: 16.66666667%;

    }

    .form-multiple-column[data-columncount="7"] .form-radio-item,

    .form-multiple-column[data-columncount="7"] .form-checkbox-item {

    width: 14.28571429%;

    }

    .form-multiple-column[data-columncount="8"] .form-radio-item,

    .form-multiple-column[data-columncount="8"] .form-checkbox-item {

    width: 12.5%;

    }

    .form-multiple-column[data-columncount="9"] .form-radio-item,

    .form-multiple-column[data-columncount="9"] .form-checkbox-item {

    width: 11.11111111%;

    }

    .form-single-column .form-checkbox-item,

    .form-single-column .form-radio-item {

    width: 100%;

    }

    .supernova {

    background-repeat: no-repeat;

    background-attachment: scroll;

    background-position: center top;

    background-repeat: repeat;

    }

    /* | */

    @media screen and (min-width: 480px) {

    .supernova {

    background-image: url("//static-interlogyllc.netdna-ssl.com/themes/img/blank.gif");

    }

    }

    #stage {

    background-image: url("//static-interlogyllc.netdna-ssl.com/themes/img/blank.gif");

    }

    /* | */

    .form-all {

    background-image: url("//static-interlogyllc.netdna-ssl.com/themes/img/blank.gif");

    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: 1px 7px;

    }

    .form-all .qq-upload-button,

    .form-all .form-submit-button,

    .form-all .form-submit-reset,

    .form-all .form-submit-print {

    height: 35px;

    width: 80px;

    font-size: 1em;

    padding: 9px 15px;

    font-family: "Tahoma", sans-serif;

    font-size: 12px;

    font-weight: normal;

    }

    .form-all .form-pagebreak-back,

    .form-all .form-pagebreak-next {

    font-size: 1em;

    padding: 9px 15px;

    font-family: "Tahoma", sans-serif;

    font-size: 14px;

    font-weight: normal;

    }

    /*

    TODO: Significant improvement possibility:following import statement is not required in design mode,

    but it should be inside the exported css of current design, in the form itself

    when it is shown to people. Being of this here, causing re-drawn problems.

    we should find a way to only include this in css send while saving current designsee prepareModel4Save for implementation for @buttonFontType

    */

    /*

    & 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-header-group {

    background-image: url("//static-interlogyllc.netdna-ssl.com/themes/img/blank.gif");

    }

    .form-sub-label-container {

    margin-right: 0;

    float: left;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    .form-captcha input,

    .form-spinner input {

    width: 150px;

    }

    .form-textbox,

    .form-textarea {

    width: 100%;

    max-width: 150px;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    .form-input,

    .form-address-table,

    .form-matrix-table {

    width: 100%;

    max-width: 150px;

    }

    .form-radio-item,

    .form-checkbox-item {

    width: 100%;

    max-width: 150px;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    .form-textbox.form-radio-other-input,

    .form-textbox.form-checkbox-other-input {

    width: 80%;

    margin-left: 3%;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    .form-multiple-column {

    width: 100%;

    }

    .form-multiple-column .form-radio-item,

    .form-multiple-column .form-checkbox-item {

    width: 10%;

    }

    .form-multiple-column[data-columncount="1"] .form-radio-item,

    .form-multiple-column[data-columncount="1"] .form-checkbox-item {

    width: 100%;

    }

    .form-multiple-column[data-columncount="2"] .form-radio-item,

    .form-multiple-column[data-columncount="2"] .form-checkbox-item {

    width: 50%;

    }

    .form-multiple-column[data-columncount="3"] .form-radio-item,

    .form-multiple-column[data-columncount="3"] .form-checkbox-item {

    width: 33.33333333%;

    }

    .form-multiple-column[data-columncount="4"] .form-radio-item,

    .form-multiple-column[data-columncount="4"] .form-checkbox-item {

    width: 25%;

    }

    .form-multiple-column[data-columncount="5"] .form-radio-item,

    .form-multiple-column[data-columncount="5"] .form-checkbox-item {

    width: 20%;

    }

    .form-multiple-column[data-columncount="6"] .form-radio-item,

    .form-multiple-column[data-columncount="6"] .form-checkbox-item {

    width: 16.66666667%;

    }

    .form-multiple-column[data-columncount="7"] .form-radio-item,

    .form-multiple-column[data-columncount="7"] .form-checkbox-item {

    width: 14.28571429%;

    }

    .form-multiple-column[data-columncount="8"] .form-radio-item,

    .form-multiple-column[data-columncount="8"] .form-checkbox-item {

    width: 12.5%;

    }

    .form-multiple-column[data-columncount="9"] .form-radio-item,

    .form-multiple-column[data-columncount="9"] .form-checkbox-item {

    width: 11.11111111%;

    }

    [data-type="control_dropdown"] .form-dropdown {

    /*width: 100% !important;

    max-width: unit(@inputWidth, px);*/

    width: 150px !important;

    max-width: 100%;

    }

    [data-type="control_fullname"] .form-sub-label-container {

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    width: 48%;

    }

    [data-type="control_fullname"] .form-sub-label-container:first-child {

    margin-right: 4%;

    }

    [data-type="control_phone"] .form-sub-label-container {

    width: 65%;

    }

    [data-type="control_phone"] .form-sub-label-container:first-child {

    width: 32.5%;

    margin-right: 2.5%;

    }

    [data-type="control_birthdate"] .form-sub-label-container {

    width: 22%;

    margin-right: 3%;

    }

    [data-type="control_birthdate"] .form-sub-label-container:first-child {

    width: 50%;

    }

    [data-type="control_birthdate"] .form-sub-label-container:last-child {

    margin-right: 0;

    }

    [data-type="control_birthdate"] .form-sub-label-container .form-dropdown {

    width: 100%;

    }

    [data-type="control_time"] .form-sub-label-container {

    width: 37%;

    margin-right: 3%;

    }

    [data-type="control_time"] .form-sub-label-container:last-child {

    width: 20%;

    margin-right: 0;

    }

    [data-type="control_time"] .form-sub-label-container .form-dropdown {

    width: 100%;

    }

    [data-type="control_datetime"] .form-sub-label-container {

    width: 12%;

    margin-right: 3%;

    }

    [data-type="control_datetime"] .form-sub-label-container:last-child {

    width: 3%;

    margin-right: 0;

    }

    [data-type="control_datetime"] span .form-sub-label-container:first-child {

    width: 4%;

    }

    [data-type="control_datetime"] span .form-sub-label-container:last-child {

    width: 12%;

    margin-right: 3%;

    }

    [data-type="control_datetime"] .form-dropdown {

    width: 100%;

    }

    [data-type="control_payment"] .form-sub-label-container {

    width: auto;

    }

    [data-type="control_payment"] .form-sub-label-container .form-dropdown {

    width: 100%;

    }

    .form-address-table td .form-dropdown {

    width: 100%;

    }

    .form-address-table td .form-sub-label-container {

    width: 96%;

    }

    .form-address-table td:last-child .form-sub-label-container {

    margin-left: 4%;

    }

    .form-address-table td[colspan="2"] .form-sub-label-container {

    width: 100%;

    margin: 0;

    }

    /*.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: "Tahoma", 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 {

    width: 100%;

    max-width: 150px;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    [data-type="control_textbox"] .form-input,

    [data-type="control_textarea"] .form-input,

    [data-type="control_fullname"] .form-input,

    [data-type="control_phone"] .form-input,

    [data-type="control_datetime"] .form-input,

    [data-type="control_address"] .form-input,

    [data-type="control_email"] .form-input,

    [data-type="control_passwordbox"] .form-input,

    [data-type="control_autocomp"] .form-input,

    [data-type="control_textbox"] .form-input-wide,

    [data-type="control_textarea"] .form-input-wide,

    [data-type="control_fullname"] .form-input-wide,

    [data-type="control_phone"] .form-input-wide,

    [data-type="control_datetime"] .form-input-wide,

    [data-type="control_address"] .form-input-wide,

    [data-type="control_email"] .form-input-wide,

    [data-type="control_passwordbox"] .form-input-wide,

    [data-type="control_autocomp"] .form-input-wide {

    width: 100%;

    max-width: 150px;

    }

    [data-type="control_fullname"] .form-sub-label-container {

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    width: 48%;

    }

    [data-type="control_fullname"] .form-sub-label-container:first-child {

    margin-right: 4%;

    }

    [data-type="control_phone"] .form-sub-label-container {

    width: 65%;

    }

    [data-type="control_phone"] .form-sub-label-container:first-child {

    width: 32.5%;

    margin-right: 2.5%;

    }

    [data-type="control_datetime"] .form-sub-label-container {

    width: 12%;

    margin-right: 3%;

    }

    [data-type="control_datetime"] .form-sub-label-container:last-child {

    width: 3%;

    margin-right: 0;

    }

    [data-type="control_datetime"] span .form-sub-label-container:first-child {

    width: 4%;

    }

    [data-type="control_datetime"] span .form-sub-label-container:last-child {

    width: 12%;

    margin-right: 3%;

    }

    [data-type="control_datetime"] .form-dropdown {

    width: 100%;

    }

    .form-matrix-table {

    width: 100%;

    max-width: 150px;

    }

    .form-address-table {

    width: 100%;

    max-width: 150px;

    }

    .form-address-table td .form-dropdown {

    width: 100%;

    }

    .form-address-table td .form-sub-label-container {

    width: 96%;

    }

    .form-address-table td:last-child .form-sub-label-container {

    margin-left: 4%;

    }

    .form-address-table td[colspan="2"] .form-sub-label-container {

    width: 100%;

    margin: 0;

    }

    /*@textInputStyle: "ti-default";

    @textInputBorderWidth: -1;

    @textInputBorderStyle: -1;

    @clrTextInputBorder: -1;

    @clrTextInputBg: -1;

    @clrTextInputFont: -1;

    @textInputHeight: -1;

    @textAreaHeight: -1;& when ( @formControlStyle = ti-default ) {}*/

    [data-type="control_dropdown"] .form-input,

    [data-type="control_birthdate"] .form-input,

    [data-type="control_time"] .form-input,

    [data-type="control_dropdown"] .form-input-wide,

    [data-type="control_birthdate"] .form-input-wide,

    [data-type="control_time"] .form-input-wide {

    width: 100%;

    max-width: 150px;

    }

    [data-type="control_dropdown"] .form-dropdown {

    /*width: 100% !important;

    max-width: unit(@dropdownWidth, px);*/

    width: 150px !important;

    max-width: 100%;

    }

    [data-type="control_birthdate"] .form-sub-label-container {

    width: 22%;

    margin-right: 3%;

    }

    [data-type="control_birthdate"] .form-sub-label-container:first-child {

    width: 50%;

    }

    [data-type="control_birthdate"] .form-sub-label-container:last-child {

    margin-right: 0;

    }

    [data-type="control_birthdate"] .form-sub-label-container .form-dropdown {

    width: 100%;

    }

    [data-type="control_time"] .form-sub-label-container {

    width: 37%;

    margin-right: 3%;

    }

    [data-type="control_time"] .form-sub-label-container:last-child {

    width: 20%;

    margin-right: 0;

    }

    [data-type="control_time"] .form-sub-label-container .form-dropdown {

    width: 100%;

    }

    .form-buttons-wrapper {

    margin-left: 0 !important;

    text-align: center !important;

    }

    .form-label {

    font-family: "Tahoma", 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;

    }

    /* | */

    @media screen and (max-width: 768px) {

    .form-all {

    border: 0;

    width: 100%;

    }

    .form-sub-label-container {

    width: 100%;

    margin: 0;

    }

    .form-input {

    width: 100%;

    }

    .form-label {

    width: 100%!important;

    }

    .form-line {

    padding: 2% 5%;

    margin: 0;

    }

    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;

    }

    .form-header-group {

    padding: 3% 0!important;

    margin: 5%!important;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    .form-buttons-wrapper {

    margin: 0!important;

    }

    .form-buttons-wrapper button {

    width: 100%;

    }

    table {

    width: 100%!important;

    }

    table td + td {

    padding-left: 3%;

    }

    .form-checkbox-item input,

    .form-radio-item input {

    width: auto;

    }

    }

    /* | *//*__INSPECT_SEPERATOR__*/

     

    Page URL:
    https://www.selectgp.com/page/orange-county-printer

    Screenshot
    JotForm textarea checkbox style size
  • Profile Image

    Answered by DarkFx on November 27, 2014 at 07:21 AM

    Hi j_pham,

    I have a quick solution on your form. Please follow instructions below.

    First, remove your CSS files on the Form Styles to this new one.

    .form-all {background: transparent;}
    .form-line.form-col-1 {
    box-sizing: border-box;
    margin: 0px 0;
    padding: 5px 10px;
    width: 60%;
    }.form-line.form-col-2 {
    box-sizing: border-box;
    float:right;
    width: 30%;
    }
    .form-all .qq-upload-button,.form-all .form-submit-button,.form-all .form-submit-reset,.form-all .form-submit-print {
    height: 35px;
    width: 80px;
    font-size: 1em;padding: 9px 15px;
    font-family: "Tahoma", sans-serif;
    font-size: 12px;
    font-weight: normal;
    }.form-line {
    box-sizing: border-box;
    margin: 6px 0;
    padding: 5px 5px;
    width: 100%;
    }

    Follow screenshot below and regarding to the size(width) of your input email box, you can change that with your desire size.


     

     

    My cloned: http://form.jotform.me/form/43302873661454

    If you want to copy my cloned form, here is the guide on how to clone an existing form. :)

    Hope this help!

    Thanks.

  • Profile Image
    JotForm Support

    Answered by abajan on November 27, 2014 at 10:24 AM

    @j_pham

    Did you attempt to submit a reply to my colleague? If so, unfortunately it was not posted. Please try again by going to http://www.jotform.com/answers/465649 and posting it in the thread.


    Thanks