Personalizar Contact Form 7 no WordPress

WordPress - Point Comunicação Web
Categoria: WordPress Tags: Postado em: 2 de maio de 2019 300

Na maioria das vezes, o formulário Contact Form 7 incorpora o estilo do tema instalado. Mas as vezes o formulário permanece com as configurações padrão ou você simplesmente deseja alterar o seu estilo.



Abaixo estão os procedimentos para alteração manual do estilo usando CSS.

– Adicione o estilo abaixo no arquivo style.css do seu tema:

. formulario {
border: #ebebeb 1px solid; /*Cor, espessura e estilo da borda do campo*/
font-size: 12px; /*Tamanho da fonte de dentro do campo*/
padding: 3px; /*Margem interna do campo*/
border-radius: 5px; /*Cantos arredondados do campo*/
height: 30px; /*Altura*/
}
.botao {
border: #333 1px solid; /*Cor, espessura e estilo da borda do botão*/
font-size: 12px; /*Tamanho da fonte*/
font-weight: 400; /*Peso da fonte (Negrito)*/
padding: 3px; /*Margem interna do botão*/
background-color: #ebebeb; /*Cor de fundo*/
width: 70px; /*Largura*/
height:  30px; /*Altura*/
color: #999; /*Cor da fonte*/

– Após isso, basta chamar o estilo dentro de cada shortcode do Contact Form 7:

[textarea your-name class:formulario placeholder "Seu Nome"]
[email* your-email class:formulario placeholder "Seu E-mail"]
[submit class:botao "Enviar"]

Você também pode usar um estilo diferente para cada campo no seu formulário, basta inserir novas classes (.formulario2, .formulario3 etc) no arquivo style.css e chamá-las nos shortcodes (class:formulario2, class:formulario3 etc).

 

Gostou? compartilhe nas redes!! ;)

Deixe seu comentário

18 Compart.
Compartilhar18
Twittar
+1
Compartilhar
Pin