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 Form header color

    Asked by ipbr21054 on September 22, 2013 at 04:57 PM

    I have 2 forms of which the header on both forms are the colour red.

    I am trying to change them both to #3366FF blue

    I have looked but i cant see where it needs to be changed.

     

    Any help would be nice.

    colour form header color form header colour color
  • Profile Image

    Answered by khrisell on September 22, 2013 at 06:50 PM

    Hello,

    To be able to change the color of your header background color to blue,

    1. Click the Free text Field.

    2. Click Edit HTML

    Then.. 

    Insert this tags to the HTML Source Editor of your Free Text Field.

    <div style="width: 100%; height: 100%; background-color: blue; text-align: center;">

     

     

     

    Then click Update.

    Now you will be able to see the background of your header will change to blue.

    Kindly let us know if you need further assistace.

    Thank you for using JotForm. 

  • Profile Image

    Answered by ipbr21054 on September 23, 2013 at 04:04 AM

    I have found the free text field.

    Also i mentioned blue but cant you add a code #3366FF which will then matche with my site as supposed to just a generic blue without a choice of shade of blue ?

  • Profile Image

    Answered by pinoytech on September 23, 2013 at 07:28 AM

    Hi,

    Which form you are referring? Can you please share to us the URL for further assistance?

    Thank you!

  • Profile Image

    Answered by ipbr21054 on September 23, 2013 at 08:41 AM

    Hi

    Here are the 2 forms.

    http://form.jotformeu.com/form/32651513003339

    http://www.theremotedoctor.co.uk/fordcontact.html

    Depending once the blue has been added i may require a different text colour.

    All depends how it looks.

    You may edit my 2 forms if you like.

     

    I am trying to get the blue from the scrolling field background on theis page.

    http://www.theremotedoctor.co.uk/

  • Profile Image
    JotForm Support

    Answered by guilledutra on September 23, 2013 at 10:52 AM

    Hi,

    Form: http://form.jotformeu.com/form/32651513003339

    Locate this custom css code:

    #text_6 div {
    background: red;
    border: 1px dashed #000;
    margin-left: 3px;
    border-radius: 2px;
    padding-bottom: 3px;
    padding-top: 3px;

    }

    and replace it with:

    #text_6 div {
    background: #3366FF;
    border: 1px dashed #000;
    margin-left: 3px;
    border-radius: 2px;
    padding-bottom: 3px;
    padding-top: 3px;
    color: YOUR FONT COLOR HERE !important;

    }

    The same applies to http://www.theremotedoctor.co.uk/fordcontact.html

    Use this guide to locate the code:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Hope it helps

    please let us know if you need further assistance

    thanks

  • Profile Image

    Answered by ipbr21054 on September 23, 2013 at 11:07 AM

    Many thanks.

     

    Am i also able to add the #3366FF to the submit button on web page

    http://form.jotformeu.com/form/32651513003339

    Please advise code to look for and also font colour code to look for.

     

    Thanks again

  • Profile Image

    Answered by ipbr21054 on September 23, 2013 at 12:53 PM

    I have managed to find how to edite the background colour of the submit button.

    Can you advise why when i add color:white  !important; the text still shows black ?

    This is where i made the edit.

    #id_6 {
    text-align: center !important;
    font-weight: bold !important;
    font-size: 25px !important;
    color: white!important;
    font-family: arial !important;
    padding: 0px !important;
    max-width: 416px;
    }

  • Profile Image
    JotForm Support

    Answered by Welvin on September 23, 2013 at 03:45 PM

    Hi,

    Add this to your form custom CSS codes: 

    .form-submit-button, {

    color: #FFF !important;

    }

    Here's the output:

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on September 23, 2013 at 03:47 PM

    If you'll see any missing colors customization from your form, please kindly open a new thread so we can assist you further. We require new threads for every issues/inquiry. Unless if it's a general inquiry about Jotform functions/features.

    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on September 23, 2013 at 04:24 PM

    @ipbr21054

    Insofar as the submit button's text is concerned, there are conflicting rules in your CSS. The following rule appears in one section:

    .form-submit-button {
    margin-top: 0px !important;
    cursor: pointer;
    width: 150px;
    padding: 5px;
    background: transparent;
    border: 1px dashed #7A7246;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color:#00ABEE !important;
    font-weight: bold;
    font-family: verdana;
    font-size: 13px;
    opacity:0.5;
    filter:alpha(opacity=40);
    }

    Then the rule immediately following states:

    .form-submit-button{
    background-color: #3366FF;
    opacity:100;
    filter:alpha(opacity=100);
    color: white!important;
    }

    Then there's a third rule targeting the same element:

    .form-submit-button, .form-submit-button-simple_red  {
    color:#000 !important;
    text-shadow: none !important;
    }

    As you can see, all three declarations are different. However, the last rule will override the others because of how the cascade works. Thus the black text.

    Anyway, like my colleague Welvin said, please open a new thread if you need to further discuss this because the original topic of this thread has nothing to do with the submit button.


    Thanks

  • Profile Image

    Answered by ipbr21054 on September 23, 2013 at 05:44 PM

    New thread started as requested.

    http://www.jotform.com/answers/271279-Submit-button-font-colour-change#0

  • Profile Image

    Answered by pinoytech on September 23, 2013 at 06:32 PM

    Hi,

    Please refer on the link bellow for my response about submit button issue.

    http://www.jotform.me/answers/271279

    Thank you!