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

    Submit button custom CSS styles not showing

    Asked by xranger50 on July 22, 2016 at 05:00 PM

    I know this question has been asked repeatedly, and I've tried all the suggested solutions I could find for this problem, but to no avail. I CAN NOT get the custom CSS that I injected for the "Submit" and "Reset" buttons on my form to display properly.

    They do display as intended in "Designer" mode, and even the roll-over effect works there (the "Reset" button is in roll-over state in this screen shot)

    But in the preview mode and online (Form URL attached) the rounded corners are ONLY in the roll-over state on both buttons, and the lighter colored border in the non-rollover state is missing as well.

    Below is the CSS code I injected through the "Custom CSS" section in the "Preferences-Form Styles" tab (see attached screen shot), and it IS also showing in the source code of the form online below the  /*__INSPECT_SEPERATOR__*/ section, but something seems to interfere with it displaying properly. What am I missing?

    .form-submit-button {
        background-image : url(https://www.jotform.com/uploads/xranger50/form_files/chromebg.jpg)!important;
        color : #bbeff1!important;
        border-style : double!important;
        border-width : 3px!important;
        border-color : #fed6fe!important;
        height : 50px!important;
        width : 170px!important;
        box-shadow : 0 5px 5px #003643
        0.3;
        font : bold 16px Times New Roman,sans-serif!important;
        border-radius : 15px;
    }

    .form-submit-button:hover {
        background-image : url(https://www.jotform.com/uploads/xranger50/form_files/chromebg2.jpg)!important;
        color : #003643!important;
        border-style : double!important;
        border-width : 3px!important;
        border-color : #003643!important;
        height : 50px!important;
        width : 170px!important;
        box-shadow : 0 5px 5px #003643
        0.3;
        font : bold 16px Times New Roman,sans-serif!important;
        border-radius : 15px;
    }

    .form-submit-reset {
        background-image : url(https://www.jotform.com/uploads/xranger50/form_files/chromebg.jpg)!important;
        color : #bbeff1!important;
        border-style : double!important;
        border-width : 3px!important;
        border-color : #fed6fe!important;
        height : 50px!important;
        width : 170px!important;
        box-shadow : 0 5px 5px #003643
        0.3;
        font : bold 16px Times New Roman,sans-serif!important;
        border-radius : 15px;
    }

    .form-submit-reset:hover {
        background-image : url(https://www.jotform.com/uploads/xranger50/form_files/chromebg2.jpg)!important;
        color : #003643!important;
        border-style : double!important;
        border-width : 3px!important;
        border-color : #003643!important;
        height : 50px!important;
        width : 170px!important;
        box-shadow : 0 5px 5px #003643
        0.3;
        font : bold 16px Times New Roman,sans-serif!important;
        border-radius : 15px;
    }

    .form-all {
        border : 3px double #fed6fe;
        box-shadow : 0 5px 5px #003643;
    }

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

    Screenshot
    css styles submit button custom css
  • Profile Image
    JotForm Support

    Answered by Mike on July 22, 2016 at 06:34 PM

    Thank you for contacting us.

    1) To fix the border-radius add !important statements to the styles.

    2) To fix the border-color, please add the next CSS.

    .form-all .form-submit-button {
    border-color : #fed6fe!important;
    }
    .form-all .form-submit-reset {
    border-color : #fed6fe!important;
    }

    Result:

    If there is anything else, please let us know.