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

    Can I change the button colors?

    Asked by emclanekinsethcom on July 15, 2013 at 10:36 AM

    I would like to change the colors of the buttons to match my layout.



    Page URL:

    button colors JotForm layout www
  • Profile Image

    Answered by pinoytech on July 15, 2013 at 10:50 AM


    Yes, you can change the color of your buttons. For more information, please take a look at this article: http://www.jotform.me/help/118-Submit-Button-CSS-CSS3

    I've cloned also your form and made some fixed on your header image.


    This is the css code that I've used to fixed the header image.

    #id_61.form-line {

    padding: 0;


    If you need further assistance, please let us know.

    Thank you!

  • Profile Image

    Answered by emclanekinsethcom on July 15, 2013 at 11:06 AM
    Still having trouble with the buttons. I want all buttons to change, not
    just the submit button. Thanks.
  • Profile Image

    Answered by pinoytech on July 15, 2013 at 11:45 AM


    May I ask what color you want for your pagebreak and submit button?

    If you take a look at this cloned form, I was able to change the color of your pagebreak and submit button using this codes.

    .form-submit-button, .form-submit-reset, .form-submit-print, .form-pagebreak-back, .form-pagebreak-next {

    border: 1px solid #FF7B0D !important;

    -moz-box-shadow: inset 0px 1px 0px 0px #FF7B0D !important;

    -webkit-box-shadow: inset 0px 1px 0px 0px #FF7B0D !important;

    box-shadow: inset 0px 1px 0px 0px #FF7B0D !important;

    background: #FF7B0D !important;

    background: -moz-linear-gradient(top, #ededed 0%, #dfdfdf 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#dfdfdf));

    background: linear-gradient(top, #ededed 0%, #dfdfdf 100%);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf', GradientType=0 );


    Thank you!