How do i change the colour of my contact form?

[ljburke85]

Hi,

On my published site here : http://www.ailerongroup.co.uk/book-binding.html

I have a contact form there, I want the outline boxes to be white, and white text in the boxes and white text above the boxes. 

Can someone help?

Laura

[BJ5]

Try adding this to the Header Code field for that page on the Pages tab (in SEO Settings for that particular page):

<style>
.wsite-form-label, .wsite-form-input, .wsite-search-element-input, .form-select, 
.wsite-form-field select, .wsite-com-product-option-groups select, .form-radio-container, 
input[type='radio'], input[type='checkbox']
{
	color: #fff !important;
}
.wsite-form-input, #form-773559558505292624 > div > .wsite-button
{
	border: 1px solid #fff !important;
	color: #fff !important;
}
</style>

That should work on the live site.

[ljburke85]

Hey!

That half worked, do you now know how i can change the box identify text to white also? Take a look here

http://www.ailerongroup.co.uk/book-binding.html

The box titles are still black, thank you

Laura

[BJ5 · Accepted solution]

Ahh... looks like I need to be more specific. Replace the code I gave before with this:

<style>
.wsite-form-label, .wsite-form-input, .wsite-search-element-input, .form-select, 
.wsite-form-field select, .wsite-com-product-option-groups select, .form-radio-container, 
#wsite-content .wsite-form-field label, #wsite-content .wsite-form-field label
input[type='radio'], input[type='checkbox']
{
	color: #fff !important;
}
.wsite-form-input, #form-773559558505292624 > div > .wsite-button, .form-select, .wsite-form-field select, 
.form-select:hover, .wsite-form-field select:hover
{
	border: 1px solid #fff !important;
	color: #fff !important;
}
</style>

[ljburke85]

You're a legend!!! Thank you so much!

[delzoactive]

Amazing thanks for this tip!

[Markus1]

Thanks for this, a great help!

[Evident]

Thank you! 

What about changing the submit button and the checkboxes?

www.evidentone.com

[Adam7]

What color did you want to change them to, @Evident?

[ea_1985]

Hi BJ! How are you? I saw your posts related to the contact forms. I've been able to make some changes using this code you gave 

<style>
.wsite-form-label, .wsite-form-input, .wsite-search-element-input, .form-select, 
.wsite-form-field select, .wsite-com-product-option-groups select, .form-radio-container, 
#wsite-content .wsite-form-field label, #wsite-content .wsite-form-field label
input[type='radio'], input[type='checkbox']
{
	color: #fff !important;
}
.wsite-form-input, #form-773559558505292624 > div > .wsite-button, .form-select, .wsite-form-field select, 
.form-select:hover, .wsite-form-field select:hover
{
	border: 1px solid #fff !important;
	color: #fff !important;
}
</style>

but what I need also is to change the fill color of the input boxes. Can you help me with this?? 

Thank you for your time 

[Adam7]

Is your form live, @ea_1985? It's usually easier to figure out from the live site since class names can be different in the editor.

[ea_1985]

Yep! You can check it here https://336173715502909351.weebly.com/

Thanks!

[ea_1985]

Just in case, I've just published the site with ea-pictures.com but the new design is not working yet so it's showing an old design. If you haven't take a look yet I suppose you won't be able to do it til tomorrow.

[Bernadette3]

Adam is actually on his weekend now and will be back on Sunday. There may be someone else on here that can help you out with that, @ea_1985. What color are you trying to make the text boxes and submit button? 

[ea_1985]

Also would be great to have the chance to change the send button color.

[tuiuiu01]

By applying the following recommended changes,

<style>
.wsite-form-label, .wsite-form-input, .wsite-search-element-input, .form-select, 
.wsite-form-field select, .wsite-com-product-option-groups select, .form-radio-container, 
#wsite-content .wsite-form-field label, #wsite-content .wsite-form-field label
input[type='radio'], input[type='checkbox']
{
	color: #fff !important;
}
.wsite-form-input, #form-773559558505292624 > div > .wsite-button, .form-select, .wsite-form-field select, 
.form-select:hover, .wsite-form-field select:hover
{
	border: 1px solid #fff !important;
	color: #fff !important;
}
</style>

I now have all the text that the user types in the boxes display in white as well. Impossible to read. what change do I need to make so that the text shows in black, and the radio button chosen also shows in black. It is currently in light grey and almost impossible for the user to see the selection picked. Thank you.

[tinaapng]

Hi, this helped me change the text color to white on my form - (which was needed). But unfortunately, didn't change the button color. Any way to fix this? Thanks.

Website: tinaapng.com/order 

[Spit_Spat]

is there any way to change the options circles in the contact form, the little "?" (if you're unsure of what to put in a text box) and the submit button ? thanks for the other code it almost worked completely.

[Spit_Spat]

i need them to be black not white but thats something i can change on my own

[MikePG]

Hi. In that code it gives a form number (#form-773559558505292624) - would I have to find that number to make the code work for my form?

[Adam7]

Yes, the number would be different for every form on any site, so you'll need to check to see what it would be for the form you want to change.