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 to change the color of the submit button?

    Asked by vincentcui on August 23, 2013 at 08:13 PM

    I have one more question, as same form, the submit button I select is
    simple green, however I would like to change the color of submit button to
    #518d8a, so I modify CSS like below:

    .form-submit-button {width: 348px;
    margin-top: -10px;
    background: #518d8a;
    }

    However it wont any change when I preview the form.
    So my question is how to change the color of the submit button to#518d8a?

    Thanks

    preview select same form thanks
  • Profile Image

    Answered by jedcadorna on August 23, 2013 at 09:22 PM

    Hi,

    I tried to copy the CSS code into my sample form and it seems working fine, You can check my sample form here  Sample Form  and you can also paste the CSS code in your reply here that is found in Preferences | Form Styles | Inject Custom CSS so we can check. You may also include the link to the form that you are working with.

    Submit button

    Submit button2

     

    Regards,

  • Profile Image

    Answered by jedcadorna on August 23, 2013 at 09:26 PM
  • Profile Image

    Answered by vincentcui on August 23, 2013 at 10:03 PM

    Hi,

    My form is at http://www.jotform.com/?formID=32180717978464.

    and below is the CSS I used:

    h2.form-header {
    font-size: 1.714em;
    color: #000000 !important;
    }
    .form-header-group.form-all {
    font-family: "PT Sans","Arial","Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif !important;
    }
    .form-all {
    background-color:transparent !important;
    padding-top: 0px;
    }
    .form-label-top {
    display: none;
    }
    .form-textbox {
    height: 25px;
    border: 0;
    background:#fcfcfc;-webkit-box-shadow: none !important;
    box-shadow: none !important;
    color: #C !important;
    font-family: PT Sans;
    width: 338px;
    }
    .form-textarea {
    height: 100px;
    border: 0;
    background:#fcfcfc;-webkit-box-shadow: none !important;
    box-shadow: none !important;
    color: #C !important;
    font-family: PT Sans;
    width: 338px;
    }
    .form-submit-button {width: 348px;
    margin-top: -10px;
    background: #518d8a;
    }

     

    I can see the color of submit change to #518d8a under edit model, however, it is also simple green when preview.

    You can check my form about this.

     

    Thanks

  • Profile Image

    Answered by jedcadorna on August 24, 2013 at 03:25 AM

    Hi,

    I tried to clone your form which is https://www.jotform.com/?formID=32180717978464 and copied the CSS settings that you have, please check if this is the settings that appears on your preview and is this the color of the submit button that your are pertaining to. Let me know if this is the correct form.

     

    Form

     

    Thanks,

    Jed

  • Profile Image

    Answered by jedcadorna on August 25, 2013 at 11:51 AM

    Hi,

     

    I think when assigning a button style it overrides the setting in the Form Style Custom CSS, I have here another workaround that you may try or you can also make a clone of the sample form that I had made URL: http://form.jotform.me/form/32362520089451.

     

    Here are the steps.

    1. Disable Button Style

    disablebuttonstyle

    disablebuttonstyle2

     

    2. Inject Custom CSS, Use the code below:

    injectCSS

     

    Code to be injected in your form CSS settings:

     

    /*Starts Here*/

    h2.form-header {

    font-size: 1.714em;

    color: #000000 !important;

    }

    .form-header-group.form-all {

    font-family: "PT Sans","Arial","Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif !important;

    }

    .form-all {

    background-color:transparent !important;

    padding-top: 0px;

    }

    .form-label-top {

    display: none;

    }

    .form-textbox {

    height: 25px;

    border: 0;

    background:#fcfcfc;-webkit-box-shadow: none !important;

    box-shadow: none !important;

    color: #C !important;

    font-family: PT Sans;

    width: 338px;

    }

    .form-textarea {

    height: 100px;

    border: 0;

    background:#fcfcfc;-webkit-box-shadow: none !important;

    box-shadow: none !important;

    color: #C !important;

    font-family: PT Sans;

    width: 338px;

    }

     

    /* Submit button color

    ------------------------------*/

    .form-submit-button{width: 348px;

    margin-top: -10px; cursor: pointer;-moz-border-radius:.5em;

    -webkit-border-radius:.5em;

    border-radius:.5em;padding:8px 18px;color: #154d0e;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    font-weight: bold;

    text-shadow:1px 1px 0px #518d8a;border:1px solid #268a16 !important;-moz-box-shadow:inset 0px 1px 0px 0px #c9efabzz;

    -webkit-box-shadow:inset 0px 1px 0px 0px #c9efab;

    box-shadow:inset 0px 0px 0px 0px #c9efab;background: #4ea20a; /* old browsers */

    background: -moz-linear-gradient(top, #7bd82f 0%, #4ea20a 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#518d8a), color-stop(100%,#518d8a)); /* webkit */

    background: linear-gradient(top, #7bd82f 0%, #4ea20a 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7bd82f', endColorstr='#4ea20a', GradientType=0 ); /* ie */

    }

    .form-submit-button:hover{

    border:1px solid #268a16 !important;

    background: #518D76; /* old browsers */

    background: -moz-linear-gradient(top, #80dd32 0%, #5bb215 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80dd32), color-stop(100%,#5bb215)); /* webkit */

    background: linear-gradient(top, #80dd32 0%, #5bb215 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80dd32', endColorstr='#5bb215', GradientType=0 ); /* ie */

    }

    .form-submit-button:active{

    border:1px solid #268a16 !important;

    position: relative;

    top: 1px;

    background: #5bb215; /* old browsers */

    background: -moz-linear-gradient(top, #5bb215 0%, #80dd32 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5bb215), color-stop(100%,#80dd32)); /* webkit */

    background: linear-gradient(top, #5bb215 0%, #80dd32 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bb215', endColorstr='#80dd32', GradientType=0 ); /* ie */

    }

    /*Ends Here*/

     

    For your reference here are some of the functions that are included in the code:

    .form-submit-button - You can set your color,size,height etc inside this function.

    .form-submit-button:hover - This is when you hover your mouse and see the effects changed, you can set it here.

    .form-submit-button:active - After clicking on the submit button it sets to active link and the settings inside here will take effect.

     

    Here sets the roundess of the button:

    -moz-border-radius:.5em;

    -webkit-border-radius:.5em;

    border-radius:.5em;

     

    background: - sets the background color

    border: - The border property is used as a shorthand method to specify one or more of the 3 border values (width, style, and color) all in one place. This property applies to all 4 sides

    width: - The width property is used to specify the width of the content area of an element's box

     

    This block of code below sets the gradient color of your button and its browser's flexibility to display the settings (You can play around with colors, just change the one that starts with "#" ex. #518D76 change to #000000)

    background: #518D76; /* old browsers */

    background: -moz-linear-gradient(top, #80dd32 0%, #5bb215 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80dd32), color-stop(100%,#5bb215)); /* webkit */

    background: linear-gradient(top, #80dd32 0%, #5bb215 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80dd32', endColorstr='#5bb215', GradientType=0 ); /* ie */

     

    Gradient Sample:

    Gradient

     

    Just let me know if you have more questions.

     

    Cheers!

  • Profile Image

    Answered by vincentcui on August 25, 2013 at 11:57 PM

    thanks a lot. it works.