Personalizar Contact Form 7 no WordPress

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

4 Comments

  1. wagner disse:

    Como abrir o arquivo style.css?como faço para aproximar as caixa de texto igual ao seu? ( sou leigo em CSS) grato.

    • Fernando Rezende de Oliveira disse:

      Olá Wagner. Você pode abrir o arquivo style.css pelo FTP. O arquivo geralmente fica na raiz do seu tema. Há um modo mais fácil de abri-lo. No painel do seu WordPress, navegue até Aparência/Editor. Você irá para a página de edição do seu arquivo style.css. Lembre-se de fazer o backup desse arquivo antes de qualquer edição. Caso ainda sinta dificuldades, existe um plugin que modifica o estilo do seu formulário. Veja esse post para saber mais. Abraços.

  2. Ricardo disse:

    Boa tarde. Estou com uma dificuldade de mudar a cor da place holder do formulário de contato. Você consegue me explicar?Obrigado.

Deixe sua Pergunta ou Comentário:

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Por favor, digite os caracteres desta imagem na caixa de entrada

Por favor digite o código da imagem

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>