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 can I change the color in ALL the buttons on my form?

    Asked by dejamour on May 10, 2012 at 02:10 PM

    I read how to change the colors on Multiple uploads, but I'd like to have consistent looking buttons for ALL the buttons (submit, cancel, print, upload, browse, etc.) throughout my whole form to look like these buttons...

     

    /* custom BLUE multi-upload buttons */ .qq-upload-button { background: #66CCFF; background: -moz-linear-gradient(top, #66CCFF 0%, #312492 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66CCFF), color-stop(100%,#312492));
    background: -o-linear-gradient(#66CCFF, #312492);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66CCFF', endColorstr='#312492') !important;
    zoom: 1; text-shadow: 0 -1px #312492;
    border: 1px solid #312492;
    } .qq-upload-button-hover { background: #66FFCC;
    background: -moz-linear-gradient(top, #66FFCC 0%, #339999 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66FFCC), color-stop(100%,#339999));
    background: -o-linear-gradient(#66FFCC, #339999);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66FFCC', endColorstr='#339999) !important;
    zoom: 1; }
    So how do I do that? TIA, dejamour
  • Profile Image

    Answered by jeanettebmz on May 10, 2012 at 05:12 PM

    I would suggest you to insert custom CSS and modify the following classes:

    .form-submit-button, .form-submit-reset, .form-submit-print, .form-screen-button, qq-upload-button

    However, I am not sure , which elements you wish to modify in total, so please make sure you look for the class of the element and modify it.

    At any rate, based on the color codes your have pasted on your post, here I leave you an example:

     

    .qq-upload-button {
    background: #66CCFF!important;
    color: #312492!important;
    text-shadow: 0 -1px #312492!important;  }

     

    .form-submit-button {
    background: #66CCFF!important;
    color: #312492!important;
    text-shadow: 0 -1px #312492!important;  }
     

    .form-submit-reset{
    background: #66CCFF!important;
    color: #312492!important;
    text-shadow: 0 -1px #312492!important;  }

    .form-submit-print {
    background: #66CCFF!important;
    color: #312492!important;
    text-shadow: 0 -1px #312492!important;  }
     

    .form-screen-button {
    background: #66CCFF!important;
    color: #312492!important;
    text-shadow: 0 -1px #312492!important;  }

     

     Hope this helps you to accomplish what you are looking for. Feel free to to ask for more assistance, we are always glad to help

    Jeanette

  • Profile Image

    Answered by dejamour on May 12, 2012 at 06:36 PM

    Thanks so much for your reply.

    May I make a suggestion? That when someone selects a theme for the form that there ba a panel that offers button choices for ALL the buttons in a form to have a consistent look and feel to them? And WITHOUT us users having to go in and "inject" CSS. As you know, it is SOOO easy to mess up by leaving off just a tiny little comma or period or not close a statement. We have come to JotForm for its simplicity, ease of use and for the very fact that many of us DO NOT KNOW how to do code, nor do we want to!

    And certainly, many of us don't knwo where to look for the buttons, or what their names may be. Plus, when you add different languages to the mix (as in my case, French and Spanish), there needs to also be a way to change anything else that is visible to a form visitor who speaks a foreign language.

    Any plans of simplifying this for us multilinguals in the near future?

    Thansk!

  • Profile Image

    Answered by jeanettebmz on May 12, 2012 at 09:30 PM

    Hello again!

    I apoligize if it seemed my answer would involve a lot of effort for you

    Actually, there is already a workaround regarding to the customization of the Submit, Print and Clear Button,despite the type of language. But it is limited to a certain number of colors

     

    But when it comes to the upload button, there is no way to customize it in the same way as the the ones mentioned above, besides the injection of the custom  CSS code

     

     

     

    I will forward your suggestion to 2nd level, so they can take it into consideration such feature to be implemented in the feature.

    Cheers!

    Jeanette