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.
How do I change the background color of the 'Contact Us' header in the 'Customized Website Contact Form' template?Asked by mav56 on January 22, 2014 at 09:12 PM
How do you change background color in the "Contact Us" text box at top of form? It always shows as green with small white envelopes on the right side.
This is a re-post of a comment on How to create your first web form
That green is actually an image, not just a color. The second declaration (highlighted here) of the third rule of the injected CSS of the template to which you're referring contains the image's URL. If you go there in Chrome you'll see the image in the top left corner (in Firefox, it will appear in the center). If you zoom in [Ctrl + Num+], you may notice that it has a subtle gradient. That's why it looks better than the plain background color (#57A700) that it covers. (The background color is there just as a fallback, in case the browser fails to load the image.)
So, the solution would be to either hide that image and change the background color to suit (along with the border which is defined in the fifth declaration of the same rule to which I earlier referred) or replace the image with another by using a different URL. Note that I said "that" image because there's still the envelope to consider. The envelope's URL can be seen in the last declaration of the fourth rule. You'll notice that the envelope has a green shadow. This means that if you change the background color (or image) of the header, the envelope won't look right. You would either have to replace it with another image or just hide it.
If you wish to replace the background image, please do the following:
1. Use your favorite image editor to create an image of the same dimensions (1px wide by 57px high) and save it
If you would rather just use a background color, change the second and fifth declarations of the third rule, omitting everything but the color in the second declaration. For instance, to have just a plain red backgound, change the rule to this
If you wish to replace the envelope with another image, create one of similar dimensions (32px wide by 34px high), upload it and replace the URL in the backgound declaration of the fourth rule
If you just wish to hide the envelope, remove the entire background declaration of the same rule
If you need clarification on anything, please let us know.