Como ajustar o Contact Form 7 do CSS

Vídeo: Ajustar altura y ancho del textarea de Contact Form 7 - CSS

Contente

Instruções
Dicas
Aviso
O que você precisa

O Contact Form 7 é um plugin da plataforma de publicação WordPress que permite aos usuários criar rapidamente formulários de contato personalizados. Embora os formulários sejam fáceis de se criar e implementar, seus campos são minimamente personalizados, o que permite a integração com qualquer site. Crie seus estilos personalizados e implemente-os nos campos dos formulários gerados por esse plugin.

Instruções

Personalize o estilo dos campos Contact Form 7 utilizando o CSS (Comstock/Comstock/Getty Images)

Abra o stylesheet do tema do seu WordPress e role até o fim. Crie uma área comentada para que possa localizar seu código facilmente. Exemplo:

/ Aqui é onde meu código CF7 personalizado começa /
Personalize os estilos dos seus campos e áreas de texto. Para isso, crie uma entrada em seu stylesheet. Exemplo:

.wpcf7 input[type="texto"], .wpcf7 areadotexto { }

Adicione bordas personalizadas (borders), planos de fundo (backgrounds), espaçamento (padding) e tamanhos dos elementos do texto. Exemplos:

.wpcf7 input[type="texto"] { background: none repeat scroll 0 0 #F9F9F9; border: 1px solid #8E9BA9; padding: 5px; width:200px; }
Personalize os estilos dos menus "drop-down" e de seleção. Para isso, crie uma entrada em seu stylesheet. Exemplo:

.wpcf7 input[type="select"] {

}

Personalize os campos de seleção de forma parecida com os campos de texto. Os campos de seleção não são tão amplos quanto os campos de texto, então adicione alguns pixels extra para sua largura (width). Exemplo:

.wpcf7 input[type="selecionado"] { background: none repeat scroll 0 0 #F9F9F9; border: 1px solid #8E9BA9; padding: 5px; width:210px; }
Personalize o estilo do seu botão de envio. Para isso, crie uma entrada em seu stylesheet. Exemplo:

.wpcf7 input[type="envio"] {

}

Personalize o botão de envio para complementar o visual e aparência do seu site (ele deve continuar se destacando do plano de fundo). Exemplo de um botão de envio vermelho:

.wpcf7 input[type="envio"] { background-color: #990000; border: 4px solid #B34040; color: #FFFFFF; }
Salve as mudanças no seu stylesheet e transfira os dados para a pasta tema.

Dicas

Experimente vários estilos e cores de borda diferentes.
Faça uma nova verificação dos formulários no Firefox, Safari e Internet Explorer, pois cada navegador fornece campos de entrada um pouco diferentes.

Aviso

Adicione o CSS personalizado ao stylesheet do seu tema e não no stylesheet do plugin. Se você fizer isso, quando o plugin for atualizado, a personalização dos arquivos em sua pasta poderão ser perdidos.