Personalizar Contact Form 7 no WordPress

Home » WordPress» Dicas WorPress» Personalizar Contact Form 7 no WordPress
WordPress - Point Comunicação Web

Personalizar Contact Form 7 no WordPress

2 de maio de 2019 | Leitura de 2 min.

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).

 

Posts Relacionados

Point Comunicação®

Como preservar as classificações de SEO durante a reformulação de um site

As tendências de design mudam constantemente e se você está tentando se manter competitivo em...


Leia mais
Point Comunicação®

Como corrigir links permanentes quebrados no WordPress

Você pode corrigir permalinks quebrados no WordPress redefinindo as configurações de permalink,...


Leia mais

Deixe seu comentário