How can I change the successful validation background color?

oz

ozneilau 09 May, 2019

I have an operational contact form that I created for a client and it works fine.

A green background is shown briefly when the form is successfully validated on submission but my client is keen to change the color to something more in keeping with their template.

The color is #d0e9c6 or similar (see example below).

I suspect this may be a standard UI Kit or Bootstrap feature but have been unable to find where to change this.

Help is much appreciated!

Thanks,

Neil

he

healyhatman 09 May, 2019

Right click, inspect, find which thing is green.

oz

ozneilau 09 May, 2019

Thanks Kamron, this is good advice but unfortunately, the green background is only visible for a second or so when the form is submitted and then the confirmation message is displayed.

he

healyhatman 09 May, 2019

In Chrome at least you can open Dev Tools with F12 and then when the form turns green, pause execution with F8.

oz

ozneilau 10 May, 2019

Thanks for helping Kamron and the F8 pause execution is a good tip but doesn't seem to stop the form submission process so I can see what's happening.

oz

ozneilau 10 May, 2019

Answer

OK, I managed to solve this eventually. Thanks for your help Kamron.

I couldn't get the green background to be shown long enough to inspect with web browser developer tools but there was also a red background shown when a field failed validation.

I was able to look at the red background with web browser developer tools which showed me that the background colour was being set in the main CSS file for the template (RocketTheme Iridescent Gantry 4 Template). I was then able to search the CSS file for #d0e9c6 and figure out which CSS needed to be overridden.

I was then able to insert the relevant code into the custom CSS for the template and finally change the colour.

Forums

How can I change the successful validation background color?