Change the color of contact form input box and button

[djgabor]

I'd like to know how to change the background color of my Contact Form input boxes from Transparent to White. It seems simple but I can't find the CSS tags to modify.

Also how do you do this for the Submit button on the Contact Form also? It should be just as simple.

thanks in advance!

[Adam7]

If you post a link to your site I'm sure one of our Community members can help, @djgabor.

[djgabor]

Thanks! Here is the site.

http://bkisstest3.weebly.com/

I would like to change the EMAIL "field" (form) to WHITE as well as the button background. (Currently both a transparent / or / using the background of that section)

Any ideas would be appreciated. I even hunted through the CSS tags but couldn't find that text field nor button.

[MJCS]

Hi @djgabor, @Adam,

to change those colours you'll need to add this to the HEADER CODE section of that page's SEO Settings.

In the Weebly Editor click on Pages, and then select the page name from the left side column. Click on SEO Settings and then scroll down to find the HEADER CODE window and copy the following rules into that window, then Publish your site.

<style>
.wsite-form-label {
    color: #d5d5d5 !important;
}
.wsite-button .wsite-button-inner {
    background: #d5d5d5 !important;
}

.wsite-form-input{
       background-color: #d5d5d5 !important;
}
</style>

This could have been added to your main css file in the HTML CSS editor but you have forms on other pages in your site and that would cause the colours to be edited across the whole site rather than just your home page.

Please note, I didn't choose 'white' because of the text in that section of your page; "Get FREE tips to balance your chakras!".

I've set the color to #d5d5d5 to match that text which was not pure white. If you want it to be white, change the above code to replace #d5d5d5 with #fff.

Please let me know if you need further assistance with this and if you get the results you're after.

Regards, Mark

[Shobingg]

Hi I tried the same mehtod you described and it did not work to change the contact form labels to white

The site is http://shobinggtest.weebly.com/ 

Would it be possible to take a look and let me know why it did not work

[MJCS]

Hi @Shobingg,

I've just had a look and this code:

.wsite-button .wsite-button-inner {
    background: #fff !important;
}
.wsite-form-input{
       background-color: #fff !important;
}

added to the bottom of your CSS should produce this:

Hope that helps, Mark

[Shobingg]

Thanks @MJCS but as I am new this can you tell where this CSS should be put as I have 2 contact forms and I only what to change the one in the homepage . I tried the SEO header option but that did not work and can I change the label color too ?

[longtimeweeble]

Wonder if anyone can help me with changing the outline color of the contact form boxes and the astericks? They are currently red or orange adn i want them to be #00A082. I ge that I jsut need to put the code into the header box for that page but I'm not sure where to put it in or if i need to take anythignelse out. I don't really know how to code. Thanks again!

[vchuk68]

Hi Mark,

I see that you have helped someone change the input box itself. Is there a way of changing the colour around the boxes?

Thanks,

Victor

[RHRN]

Hi Mark, 

This was very helpful, thank you.

I was wondering how to change the font color of the options text (not the options circles) but the color of the font that shows the options. Right now they look like they are grayed out and not selectable.

Thanks so much

Sharon

[Adam7]

Form text should use the same thing you have set as regular text in Theme > Font Options.

[Markus1]

Hi Adam,

I need the text title colour to be white, the general paragraph text is dark grey/black.

How do I change this in the CSS?

Thanks

[Bernadette3]

Hi @Markus 

I replied to your other comment on this thread: https://community.weebly.com/t5/Site-Editor/Change-Form-Field-Title-text-color/m-p/86212#M14880

[RHRN]

This was very helpful thank you!.
I would also like to know how to change the color of a radio button. The above only changed the actual buttons.

Thanks so much!

[CC4M]

Hi Mark,

What would be the code for transparent backround with black outline for the fields? I used the code you sent but it seems to be only for backround and not the outline.

[flyupciyouth]

So I tried using this for my site and it didn't seem to work properly. I changed the color ID several times and it did not work for the text above the field boxes, only the boxes themselves. Is there any way to resolve this? I'm using a white background photo so I'd like to have black text above the field boxes. Any help you could give me would be appreciated.

Site Link: (Contact form is at the very bottom) 

 https://flupciyouth.weebly.com/

[Adam7]

Add this to Settings > SEO > Header Code and publish, @flyupciyouth:

<style>
	.wsite-form-input:laceholder
	{
		color:#000 !important;
	}
</style>

It won't do anything in the editor but will fix it on the live site.

[#18]

Thank you!!! Works perfectly

[MJCS]

Hi @djgabor,

how did you go with the color change? Any success?

Thanks, Mark

[djgabor]

Yes. It worked perfectly. Appreciate the help!!!

[jtrue004]

Hi, this is a great thread!

I am trying to change the container background color of the entire form. That way my form has its own background color and stands out.

Can you help with that?

I did everything on this thread but the code to change the container color doesn't appear to be here.

http://www.connectsure.net/the-villages.html

Thanks!