Change primary color

[zero_to_one]

Hey there,
I’d like to change the primary color of my contact form
from
#3f51b5
to
hsl(346,75%,57%)

thanks for your help!

[Prasant]

Hello @zerotoone.de,

Thanks for writing in!

Please add following CSS under Pro > Theme Options > CSS:

#cf7md-form .mdc-text-field .mdc-floating-label {
    color: hsl(346,75%,57%) !important;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[zero_to_one]

@Prasant

#cf7md-form .mdc-text-field .mdc-floating-label {
color: hsl(346,75%,57%) !important;
}

thank you, but this only changed the font I did not want to change the font color only the

• underlines when clicked

• border around text field http://prntscr.com/nx2u4p

• and the caret-color: #3f51b5;

thanks for your help!

[rad]

Hi @zerotoone.de,

In that case, I recommend contacting the plugin author. The plugin that applies that styling is Material Design for Contact Form 7. It seems to have a themed color for the form and probably controlled by some settings or its own stylesheet, and they aren’t simple fields as by checking the code.

Thanks!