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

    Change color of submit button with inject custom css

    Asked by jlrehmann on April 19, 2011 at 12:02 PM

    I would like to change the color of the submit button on the PASTEL layout from Orange to a deep blue color.  How?

    Also, I want the 2nd header line NOT to be italic. "To have the Create user..."

    Page URL:
    http://form.jotform.com/form/10963527267

    Inject Custom CSS layout
  • Profile Image

    Answered by DanielGriffin on April 19, 2011 at 12:51 PM

    Hi there,

    The theme you have picked is overriding the styles for your form.  If you want to set your own style, you will need to open up the form and turn off the theme (ie set it to default)

     

    Next you will need to inject some custom CSS to style the buttons.  click the Setup and Embed tab, and then the Preferences button, then click the Form Styles tab in the wizard that opens.  You 'll see and option for injecting CSS.  Paste the following code in there:

    .form-submit-button{
    background-color: #09f;
    }

     

    If you want a different colour, have a look at this page to get the hex code:

    http://www.pagetutor.com/colorpicker/index.html

    Then chage background-color to your prefered value.

     

    You'll probably want to make some other changes to the text since moving from the pastel theme to the deafult theme will have some hangovers, such as text colour etc.  So to change that, and the sub heading, you will need  some more CSS.  Try experimenting with the code below

    body { color: #000000; }

    .form-subHeader {font-style:normal}

    If you need more help just let me know.

    Thanks,

    Daniel

  • Profile Image
    JotForm Support

    Answered by NeilVicente on April 19, 2011 at 12:57 PM

    Hi,

    Play around with the bolded color codes in this css:

    .form-submit-button, .form-submit-reset, .form-submit-print, .form-pagebreak-back, .form-pagebreak-next {
        background-moz-linear-gradient(center top , #FAA84C 0%, #FF7B0D 100%) repeat scroll 0 0 transparent;
        border1px solid #C64F00;
        border-radius4px 4px 4px 4px;
        box-shadow0 1px 0 rgba(255, 255, 255, 0.75);
        color#FFFFFF;
        font-size12px;
        padding6px 18px;
        text-shadow0 -1px 0 #C64F00;
    }

    This is for the hover effect:

    .form-submit-button:hover, .form-submit-reset:hover, .form-submit-print:hover, .form-pagebreak-back:hover, .form-pagebreak-next:hover {
        background: -moz-linear-gradient(center top , #FBCB5D 0%, #EFA003 100%) repeat scroll 0 0 transparent;
        border-color: #D08A01;
    }


    This is for the button's active state:

    .form-submit-button:active, .form-submit-reset:active, .form-submit-print:active, .form-pagebreak-back:active, .form-pagebreak-next:active {
        background: -moz-linear-gradient(center top , #EFA003 0%, #FBCB5D 100%) repeat scroll 0 0 transparent;
        border-color: #D08A01;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 4px rgba(0, 0, 0, 0.1) inset;

    }

    Refer to HTML Color Codes for more web-safe colors.

    For the sub-header, try this:

    .form-subHeader {
    font-style:normal;
    }


    Hope this helps. Do tell us if there's anything else we can help you with. Thank you.

  • Profile Image

    Answered by ajeet kumar yadav on April 21, 2011 at 02:31 AM

    good

  • Profile Image

    Answered by cleancrawls on May 10, 2013 at 05:53 PM

    Hi,

    I'm having problems getting the form on my site to reflect the CSS (injected) changes I've made to the form.

    In JotForm's interface, the button I'm trying to style is showing correctly styled, but it won't update on the site itself. (temp url: http://sites.launchrocketship.com/df5fc8d8-a3b4-41bc-bcc7-8cc0be496005/)

    What's strange is that the field styles are changing, just not the button.  Here's my injected code:

    .form-label-left,.form-label-right,.form-label-top {

    display:none;

    }.form-textbox {

    height:20px;

    width:255px;

    }.form-all {

    padding-top:5px;

    }.form-line {

    padding-bottom:5px;

    padding-top:5px;

    padding-left:0;.form-line-error {

    background:none repeat scroll 0 0;

    }

    .form-submit-button{cursor: pointer;-moz-border-radius:.25em;

    -webkit-border-radius:.25em;

    border-radius:.25em;padding:15px 35px;color: #ffffff;

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

    font-size: 20px;

    font-weight: bold;

    text-shadow:-1px -1px 0px #d85d00;border:1px solid #d85d00 !important;-moz-box-shadow:inset 0px 1px 0px 0px #ffcc7a;

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

    box-shadow:inset 0px 1px 0px 0px #ffcc7a;background: #ff6c00; /* old browsers */

    background: -moz-linear-gradient(top, #faa51a 0%, #ff6c00 100%); /* firefox */

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

    background: linear-gradient(top, #faa51a 0%, #ff6c00 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#ff6c00', GradientType=0 ); /* ie */

    }.form-submit-button-simple_orange:hover{

    border:1px solid #d85d00 !important;

    background: #fc8d0f; /* old browsers */

    background: -moz-linear-gradient(top, #ffb53b 0%, #fc8d0f 100%); /* firefox */

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

    background: linear-gradient(top, #ffb53b 0%, #fc8d0f 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb53b', endColorstr='#fc8d0f', GradientType=0 ); /* ie */

    }.form-submit-button-simple_orange:active{

    border:1px solid #d85d00 !important;

    position: relative;

    top: 1px;

    background: #fc8d0f; /* old browsers */

    background: -moz-linear-gradient(top, #fc8d0f 0%, #ffb53b 100%); /* firefox */

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

    background: linear-gradient(top, #fc8d0f 0%, #ffb53b 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fc8d0f', endColorstr='#ffb53b', GradientType=0 ); /* ie */

    }

  • Profile Image
    JotForm Support

    Answered by jonathan on May 10, 2013 at 09:10 PM

    @cleancrawls

    When I test your form, both the embedded form and the direct URL.

    in both instance, the orange submit button behaves or animate similarly.

    That's a lot of CSS code you injected on the form, and I am having difficulty what is the code for the submit button alone... can you please describe exactly how the button was suppose to be stylized?  Is there a a style in before and after? or when you hover over it?

    May I suggest also that you create a separate post/topic to your concern. Use this link

    https://www.jotform.com/contact

    We can focus dedicatedly to your own post if you do this, and turn over response will be quicker too.

    Thanks.