WordPress: personalizando formulário de contato contact form 7

Antes de tudo, tenha em mente que o seu formulário de contato pode aparecer bem no navegador em micro desktop/de mesa e desarrumado no celular ou tablet.
Neste caso, simuladores de dispositivos móveis podem ou não exibir o formulário corretamente, mas são uma boa opção para quem não tem diversos modelos de celulares à mão (vide link ao final deste post).

Neste caso os ajustes no formulário tem de ser no modelo/template do site ou nas configurações do formulário.
Seguem dicas para essas situações:

a) Editando o formulário no modelo/template do site (na seção de configurações do modelo ou no código CSS do modelo).
Para quem precisar de ajuda sobre como editar o código CSS do formulário, seguem alguns links:

Links com dicas de como personalizar o CSS de formulários contactForm 7:
WordPress.org
Stack Overflow
Theme Skills

Em resumo, você pode modificar o formulário de modo global, usando a marcações como:
.wpcf7 {width:100% !important;}
.wpcf7-form {width:100% !important;}

ou pode modificar elementos individualmente, com marcações como essa:
wpcf7-form input[type=”text”], input[type=”email”], input[type=”url”], input[type=”password”], input[type=”search”], input[type=”number”], input[type=”tel”], input[type=”range”], input[type=”date”], input[type=”month”], input[type=”week”], input[type=”time”], input[type=”datetime”], input[type=”datetime-local”], input[type=”color”], select, textarea {width:100% !important;}
(removendo os campos que não está utilizando, como input[type=”password”], claro)

b) Editando o formulário nas configurações do formulário de contato (plugin do formulário ou no código CSS do plugin de formulário).

Plugin WP para personalizar formulários Contact Form 7: Contact Form 7 Style

Dicas para personalizar o funcionamento do ContactForm 7: Styling contact form 7

Espero que essas dicas sejam úteis!

Texto(s) relacionado(s):
Simuladores de dispositivos móveis

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

%d blogueiros gostam disto: