How do I change background colour of heading ?

  • Profile Image
    Asked on January 16, 2011 at 05:36 PM



    When I click on FORM TOOLS > HEADING

    Then it says "click to edit this tex"


    How do I change the background colour of the box - not the actual form or text but the box that surrounds the words "click to edit this text" ?



  • Profile Image
    Answered on January 16, 2011 at 10:16 PM

    I'm new to JotForm but here's my suggestion:

    While in the form builder, click the "Form Style" tab and then "Background". Note the six character code in the box and then play around with the palette until you find the desired color for the header's background and when you do, note what the code has changed to. Now, enter the original code that was there to reset the background of the form to what it was. (Okay, that may have seemed like an exercise in futility but just follow along and you'll understand.)

    Click "Preview" > "Form Source" > "Advanced Options". In the menu, click "HTML Code" to reveal the submenu and click "Full Source Code". Click anywhere in the code to select all of it and copy it to an HTML editor or a plaintext application like Notepad. (Don't use a word processor like Word or WordPerfect - otherwise your code might inadvertently get corrupted.)

    Now, near the top of the source code you should see a line that states (in part) rel="stylesheet" that contains a URL (internet address). Copy that URL into your browser's address bar and hit Return (Enter). What you see is the external stylesheet to which your form is presently pointing. Click and drag your mouse to select it all (I think with most browsers pressing Ctrl+A should do the same job) and copy it into a new text document. Search for the line that has .form-header-group{ and on the line immediately below you will see background:#f5f5f5;. The part between the pound sign and the semi-colon is what controls the header's background color. Here's where you need that code you copied earlier. Replace f5f5f5 (light gray) with the new hexadecimal code (minus the pound sign). Save the file as style.css or whatever_you_wish_to_call_it.css and upload it to your server. Now change the URL in the "rel=stylesheet" line in your form's source so that it now points to your stylesheet instead of JotForm's. Replace the old form source on your site with the new one and when you refresh your form, its header's background should now have the desired appearance.

    (In order for this to work, the webpage on which your form is embedded must contain the full source code instead of the simple embed code.)

    I hope that wasn't too confusing. LOL

  • Profile Image
    Answered on January 17, 2011 at 07:06 AM