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

    Form lightbox appearing differently on web browser

    Asked by talletian on May 13, 2016 at 03:49 PM

    Hi,

    the lightbox form I've embedded into squarespace is appearing differently on google chrome, internet explorer than in the jotform form builder.

    in internet explorer the image I have is pixelated and the submit button is wider than the other textboxes despite making them all one size in the builder (as seen in attached image).

    In chrome the submit button appears smaller than the textboxes. Additionally is there anyway to change the close 'x' icon from the one that is generated to just an 'x' without the circle?

    Page URL:
    https://form.jotform.com/61246456499265

    Screenshot
    Form Builder lightbox form JotForm size
  • Profile Image

    Answered by Huberson on May 13, 2016 at 04:33 PM

    I have previewed the form from direct URL in IE11, Chrome and Firefox, it looks consistent across all the browsers. Can you provide us the link of the web page where you embed the form with Lightbox.

    The close button with the Lightbox is generated by internal JavaScript, I'm not sure it can be modified from the generated code.

  • Profile Image

    Answered by talletian on May 13, 2016 at 05:44 PM
    https://hauteclassics.squarespace.com/
    ...
  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 13, 2016 at 07:02 PM

    Thank you for sharing the link to the webpage, I have checked it and I can see the form is not being displayed the same on Chrome and Firefox, here is an image when loading the form using the direct link and the link to your website using Google Chrome: 

    I think this is most likely related to the responsive code, it changes the width of the HTML elements dynamically and the button has the width fixed, I would suggest you to make some changes on the current layout of your form and this should help you to display it properly, instead of set a fixed width to the submit button you will set it a responsive width and will change the padding of the form, inject this CSS code to your form: 

    .form-line {

        padding-left: 5% !important;

        padding-right: 5% !important;

        padding-top: 2% !important;

    }

    .form-all .form-submit-button{

        width: 100% !important;

    }

    This guide will help you to inject the code: 

    How-to-Inject-Custom-CSS-Codes

    Your form should start to be displaying the same in all the web browsers with the fields and submit button having the same width: 

    Do let us know how it goes. 

  • Profile Image

    Answered by talletian on May 17, 2016 at 12:45 PM
    Hi, sorry I am unclear as to where I am suppose to paste the code you
    provided. Here is the CSS for my existing form:
    @import "https://fonts.googleapis.com/css?family=Playfair
    Display:light,lightitalic,normal,italic,bold,bolditalic";
    @import "//
    www.jotform.com/themes/css/buttons/form-submit-button-black_blue.css";
    .form-all {
    font-family: "Lucida Grande", sans-serif;
    }
    .form-all {
    width: 240px;
    width: 100%;
    max-width: 240px;
    }
    .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: 9px;
    }
    .form-label {
    font-weight: normal;
    font-size: 0.95em;
    }
    .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 .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: 480px) and (max-width: 239px) {
    .jotform-form {
    padding: 30px 0;
    }
    }
    /* | */
    /* | */
    @media screen and (min-width: 768px) {
    .jotform-form {
    padding: 60px 0;
    }
    }
    /* | */
    /* | */
    @media screen and (max-width: 239px) {
    .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: #6f6f6f;
    }
    .form-checkbox-item label,
    .form-radio-item label {
    color: #555555;
    }
    .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 */
    [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: 280px;
    }
    .form-radio-item,
    .form-checkbox-item {
    width: 100%;
    max-width: 280px;
    -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 {
    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: 13px;
    margin-bottom: 13px;
    }
    .form-line {
    padding: 0px 0px;
    }
    .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: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    }
    .form-all .form-textarea {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    }
    .form-all .form-submit-button,
    .form-all .form-submit-reset,
    .form-all .form-submit-print {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    }
    .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 {
    height: 40px;
    width: 240px;
    font-size: 1em;
    padding: 9px 15px;
    font-family: "Lucida Grande", sans-serif;
    font-size: 10px;
    font-weight: 400;
    border: none;
    border-width: 0px !important;
    border-style: solid !important;
    }
    .form-all .form-pagebreak-back,
    .form-all .form-pagebreak-next {
    font-size: 1em;
    padding: 9px 15px;
    font-family: "Lucida Grande", sans-serif;
    font-size: 9px;
    font-weight: normal;
    }
    /*
    & when ( @buttonFontType = google ) {
    @import (css) "@{buttonFontLink}";
    }
    */
    h2.form-header {
    line-height: 1.618em;
    }
    h2 ~ .form-subHeader {
    line-height: 1.5em;
    }
    .form-header-group {
    text-align: center;
    }
    .form-line {
    zoom: 1;
    }
    .form-line:before,
    .form-line:after {
    display: table;
    content: '';
    line-height: 0;
    }
    .form-line:after {
    clear: both;
    }
    .form-sub-label-container {
    margin-right: 0;
    float: left;
    white-space: nowrap;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    .form-sub-label-container .date-separate {
    visibility: hidden;
    }
    .form-captcha input,
    .form-spinner input {
    width: 280px;
    }
    .form-textbox,
    .form-textarea {
    width: 100%;
    max-width: 280px;
    -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: 280px;
    }
    .form-radio-item,
    .form-checkbox-item {
    width: 100%;
    max-width: 280px;
    -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: 280px;
    }
    [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: 28%;
    margin-right: 4%;
    }
    [data-type="control_datetime"] .form-sub-label-container:last-child {
    width: 4%;
    margin-right: 0;
    }
    [data-type="control_datetime"].allowTime .form-sub-label-container {
    width: 12%;
    margin-right: 3%;
    }
    [data-type="control_datetime"].allowTime
    .form-sub-label-container:last-child {
    width: 4%;
    margin-right: 0;
    }
    [data-type="control_datetime"].allowTime .allowTime-container {
    float: right;
    width: 51%;
    }
    [data-type="control_datetime"].allowTime .allowTime-container
    .form-sub-label-container {
    width: 27%;
    margin-right: 4%;
    }
    [data-type="control_datetime"].allowTime .allowTime-container
    .form-sub-label-container:first-child {
    width: 4%;
    margin-left: 3%;
    }
    [data-type="control_datetime"].allowTime .allowTime-container
    .form-sub-label-container:last-child {
    width: 27%;
    margin-right: 0;
    }
    [data-type="control_datetime"].allowTime .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-line,
    .form-input,
    .form-input-wide,
    .form-dropdown,
    .form-sub-label-container,
    .form-address-table,
    .form-matrix-table {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    }
    .form-textbox,
    .form-textarea,
    .form-radio-item,
    .form-checkbox-item,
    .form-captcha input,
    .form-spinner input,
    .form-error-message {
    width: 100%;
    max-width: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    /*.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: "Playfair Display", 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-header-group .form-header,
    .form-header-group .form-subHeader {
    color: #000000;
    }
    .form-textbox,
    .form-textarea {
    border-width: 0px;
    border-color: #cccccc;
    padding: 11px 10px 9px 10px;
    }
    .form-textbox,
    .form-textarea,
    .form-radio-other-input,
    .form-checkbox-other-input,
    .form-captcha input,
    .form-spinner input {
    background-color: #ffffff;
    }
    .form-textbox {
    height: 20px;
    }
    .form-textarea {
    height: 200px;
    }
    .form-textbox,
    .form-textarea {
    width: 100%;
    max-width: 240px;
    -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: 240px;
    }
    [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_phone"] .form-sub-label-container .date-separate {
    visibility: hidden;
    }
    [data-type="control_datetime"] .form-sub-label-container {
    width: 28%;
    margin-right: 4%;
    }
    [data-type="control_datetime"] .form-sub-label-container:last-child {
    width: 4%;
    margin-right: 0;
    }
    [data-type="control_datetime"] .form-sub-label-container .date-separate {
    visibility: hidden;
    }
    [data-type="control_datetime"].allowTime .form-sub-label-container {
    width: 12%;
    margin-right: 3%;
    }
    [data-type="control_datetime"].allowTime
    .form-sub-label-container:last-child {
    width: 4%;
    margin-right: 0;
    }
    [data-type="control_datetime"].allowTime .allowTime-container {
    float: right;
    width: 51%;
    }
    [data-type="control_datetime"].allowTime .allowTime-container
    .form-sub-label-container {
    width: 27%;
    margin-right: 4%;
    }
    [data-type="control_datetime"].allowTime .allowTime-container
    .form-sub-label-container:first-child {
    width: 4%;
    margin-left: 3%;
    }
    [data-type="control_datetime"].allowTime .allowTime-container
    .form-sub-label-container:last-child {
    width: 27%;
    margin-right: 0;
    }
    [data-type="control_datetime"].allowTime .form-dropdown {
    width: 100%;
    }
    .form-matrix-table {
    width: 100%;
    max-width: 240px;
    }
    .form-address-table {
    width: 100%;
    max-width: 240px;
    }
    .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 {
    -webkit-appearance: menulist-button;
    height: 25px;
    }
    [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: 280px;
    }
    [data-type="control_dropdown"] .form-dropdown {
    width: 100% !important;
    max-width: 280px;
    }
    [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: left !important;
    }
    .form-label {
    font-family: "Lucida Grande", sans-serif;
    }
    li[data-type="control_image"] div {
    text-align: Center;
    }
    li[data-type="control_image"] img {
    border: none;
    border-width: 0px !important;
    border-style: solid !important;
    border-color: #ffffff !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__*/
    .form-submit-button {
    letter-spacing : 5px;
    }.supernova .form-all {
    border : none;
    box-shadow : none;
    }.form-all {
    padding-top : 0px;
    }.jotform-form {
    padding : 0px;
    }.form-header {}.form-image {}.form-line {}#input_3 {
    letter-spacing : 6px;
    }#input_1 {
    letter-spacing : 6px;
    }.form-buttons-wrapper {}#input_2 {
    background : #000000;
    }#input_10 {
    letter-spacing : 6px;
    }
    if you could please let me know if I need to replace your code with
    existing css where I should do so, simply adding it didn't seem to work.
    Thanks!
    ...
  • Profile Image

    Answered by Huberson on May 17, 2016 at 02:27 PM

    You need to copy the provided code and inject it to your form from your Jotform account, not the code in your website. Then download the Lightbox code again to re-embed the form.

    .form-line {

        padding-left: 5% !important;

        padding-right: 5% !important;

        padding-top: 2% !important;

    }

    .form-all .form-submit-button{

        width: 100% !important;

    }

    You might also need to remove/comment some of the CSS affecting the submit button from Designer