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!