Change Selected Field Colors

Hi Harvey,

Sure! We actually have a tutorial that addresses this here (that link should take you to the section on validation).

Here’s the CSS that applies the red border to fields with errors:

div.wpforms-container-full .wpforms-form .wpforms-field input.wpforms-error, div.wpforms-container-full .wpforms-form .wpforms-field textarea.wpforms-error, div.wpforms-container-full .wpforms-form .wpforms-field select.wpforms-error {
    border: 1px solid #cc0000;
}

And here’s the CSS that styles the actual message (the text of the error):

div.wpforms-container-full .wpforms-form label.wpforms-error {
    display: block;
    color: #990000;
    font-size: 12px;
    float: none;
}

You can replace those colors with any other hex code. If you’re not sure what hex code to use, https://htmlcolorcodes.com/ is a site I like where you can pick a color and it provides the hex value.

And in case it helps, here’s WPBeginner’s tutorial on how to add CSS to your site.

I hope that helps! Please let me know if you have any questions ??

Hi,

Thanks for this I have managed to do this now ??

How am I able to change the hover colour of the text and background for the send button though?

Hi Harvey,

Great! I’m glad you were able to get the validation CSS going ??

We also have a tutorial that should help out with the submit button, including hover styling: https://wpforms.com/docs/how-to-customize-the-submit-button/.

I hope that helps! ??

Hi,

The last thing is

There looks to be a autofill colour as well

I am trying this code

input:-webkit-autofill {
    background-color: rgba(75, 220, 56, 0.25);
    background-image: none;
    color: rgb(0, 0, 0);
}

to change the colour from yellow but its not working?

Any ideas?

Hi Harvey,

Our plugin doesn’t add any color or CSS like this, so it sounds like that’s coming from your theme. If you could share the URL of the embedded form where you’re seeing this CSS get applied, though, I should be able to find a solution for you ??

Let me know, thanks!

Hi,

I believe it is being added by the browser its self so not an issue now.

Thanks,

Harvey

Hi Harvey,

Ok, if you have any other questions please let us know!

Have a good one ??