Como alterar cor do placeholder no contact form 7

Você sabia que é possível alterar a cor do placeholder dentro do campo do formulário no Contact Form 7?

 

O Contact Form 7 é um dos plugins de formulário mais populares do WordPress e ainda sim vejo constantemente pessoas com dúvidas sobre como alterar a cor do placeholder do contact form 7 já que o plugin não possui uma opção amigável para isso.

Sem muitas delongas vou mostrar agora como isso pode ser feito.

CSS para alterar a cor do placeholder no Contact Form 7

::-webkit-input-placeholder { /* WebKit browsers */
    color: #000 !important;
    opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #000 !important;
    opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #000 !important;
    opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #000 !important;
    opacity: 1;
}

O uso da tag !important

Caso não tenham reparado o código faz uso da tag !important para garantir que nenhum outro código CSS se sobreponha a essa que você acabou de escrever.

Usando o código para um formulário específico

O código passado acima alterar a cor do placeholder do contact form 7 em todos os formulário do site. Para alterar a cor do placeholder do contact form 7 em apenas um formulário específico você precisa utilizar o ID correto desse formulário.

Conseguimos esse id facilmente abrindo o Chrome Dev Tools (Ctrl + Shift + i) e localizando a seguinte linha:

 

#wpcf7-f93-p118-o1::placeholder {
    color: #000 !important;
    opacity: 1;
}

Conclusão

Assim aprendemos como alterar a cor do placeholder do Contact Form 7 no WordPress. Qualquer dúvida entrem em contato. Um abraço!

Menu
Open chat
Fala Comigo!