x

Help changing the contact form input colours

My IssueHi, 

I was wondering if someone could help me change the contact form colours? I currently have the form text being white/grey is there any way I can change this to black (Including the "Indicates required field") I would also like to change the outline of the form box to be black as well thanks.

link to gyazo if my picture upload didn't work:

https://gyazo.com/6787ef4b0d02344b3329f6571129dc77

3,605 Views
Message 1 of 14
Report
1 Best Answer
Square

Best Answer

Try adding this to an Embed Code element directly above the form, @Disco:

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

It should fix it on the live site.

View Best Answer >

3,562 Views
Message 13 of 14
Report
13 REPLIES 13
Square

Could you post a link to the page of your site that has the form, @Disco? It'll help to inspect the code on the live page.

3,595 Views
Message 13 of 14
Report

3,571 Views
Message 13 of 14
Report
Square

Best Answer

Try adding this to an Embed Code element directly above the form, @Disco:

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

It should fix it on the live site.

3,563 Views
Message 13 of 14
Report

I'm afraid that didn't help... still has a white input text

3,554 Views
Message 13 of 14
Report

managed to find help on my issue... (https://community.weebly.com/t5/How-Do-I-In-the-Community/Change-Font-Colour-in-Contact-Form/td-p/66...)

is there any way I can change the box colour?

3,551 Views
Message 13 of 14
Report

also when the form is submitted the "thank you for submitting" text is white

3,550 Views
Message 13 of 14
Report
Square

It would be harder to change the color of the submission text because it doesn't use a static class or ID. It might be simpler to make a hidden page of your site as a thank you page, then use that with the form.

3,541 Views
Message 13 of 14
Report
Square

Try adding this in with your other style rules:

.wsite-form-input.wsite-input
{
color: #efefef !important
}

That changes it to a lighter grey.

3,548 Views
Message 13 of 14
Report

This worked for me! I had a custom template that for some reason didn't have this field in it. I could change everything from input box background color, to font type and size and more but for some reason the code string to change the color wasn't there. I went to the editor, inserted this code you suggested, changed the HEX code to black and it worked instantly. Thank you so much. 

3,029 Views
Message 13 of 14
Report
Square

Awesome! Thanks for updating us. Smiley Happy

1,490 Views
Message 13 of 14
Report

You can create a custom form look and feel by using Embed Code functionality. This will ulitimately take you out of the native form tool of Weebly but enables you to exert fine grain control of your web form.

Here's an extensive article about how to execute the embedded code for a form. Also includes sample html for this.

https://blog.formkeep.com/how-you-can-do-more-with-weebly-forms/

1,404 Views
Message 13 of 14
Report

YES!!! I found it!!!!!! Not even Weebly geeks had it!

And I'm not a coder, just a visual designer who tries with CSS. Here it is:

Copy and paste to your site's CSS:

#wsite-content form#form-531367540984492612 .wsite-form-field label {

        color: #FFFFFF !important;

}

 

The number reffers to the specific Form-ID number that you find under inspect. Replace it with your Form ID number.

1,445 Views
Message 15 of 14
Report
Square

Thanks for sharing @absoluties! Smiley Happy

1,442 Views
Message 15 of 14
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.