O que é um placeholder?
A palavra Placeholder vem do que inglês place (lugar) + hold (segurar/reservar).
Embrasileirando e deixando mais fluído significa "reservado com um propósito específico", ou seja o placeholder em HTML é aquele texto que te ajuda a entender melhor sobre o campo do de um formulário, ele mostra qual o propósito específico daquele campo.
O Placeholer é uma tag HTML5 que mostra uma dica, um texto guia, uma breve especificação da informação que precisa ser inserida naquele campo do formulário. Eu gostaria de deixar um adendo aqui, o placeholder não substitui o label do formulário ele apenas leva mais clareza para o campo, os labels são os títulos dos campos do formulário e são muito importantes, então não use somente o placeholder dando um display:none na label.
Veja a seguir alguns exemplos de formulários que utilizam placeholder:
Bom demais! Espero ter te ajudado a entender um pouco mais sobre placeholder na teoria, porque agora chegou a hora da prática meu "pácero".
Assista o vídeo do processo e se preferir continue a leitura e acompanhe o processo escrito
Como inserir Placeholder nos campos do Contact Form 7
Acesse o painel de edição dos campos do seu formulário e em seguida vá até a tag do campo que você deseja inserir o placeholder.
No final da tag antes de fechar o ] insira o atributo responsável pelo placeholder.
placeholder "Texto para o usuário"
Feito isso é só salvar o seu formulário de contato e testar.
Vou deixar um Bônus aqui pra você.
Como mudar a cor do placeholder no Contact Form 7
O processo de mudar a cor do placeholder envolve um pouco de código, mas fique tranquilão que eu vou te ajudar, é bem sussa.
A primeira coisa que precisamos fazer é criar uma div para envelopar o nosso formulário de contato fazendo que com as alterações sejam inseridas apenas nos formulários que conterem a nossa div.
Na edição da estrutura do formulário insira a tag antes dos campos do formulário
<div class="c-form-contato">
e depois a tag
</div>
no final dos campos. Veja o meu exemplo:
Maravilha, agora você só precisa colocar o código abaixo no topo do formulário e alterar para a sua cor desejada:
<style>
.c-form-contato input::-webkit-input-placeholder { /* WebKit browsers */
color: #ccc!important;
opacity: 1;
}
.c-form-contato input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #ccc !important;
opacity: 1;
}
.c-form-contato input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #ccc!important;
opacity: 1;
}
.c-form-contato input:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #ccc !important;
opacity: 1;
}
</style>
Veja abaixo como ficou no meu exemplo:
*Coloque o código acima da div que criamos.
Salve o formulário e veja se deu certo!
