Como personalizar o estilo do formulário de contato 7 para combinar com seu site

Com mais de um milhão de instalações ativas, o Contact Form 7 é de longe um dos plug-ins mais populares do WordPress de todos os tempos. Sua popularidade provavelmente tem muito a ver com a verdade por trás de sua descrição: “Simples, mas flexível”.

Contact Form 7 permite que você crie vários formulários de contato usando nada além de marcação HTML simples (que ele gera para você). Depois de criado, cada formulário pode ser implementado rapidamente colocando seu código de acesso correspondente onde você gostaria que o formulário aparecesse; na página, postagem ou área de widget. As mensagens enviadas através dos formulários são enviadas para o endereço de email fornecido nas configurações do plugin e o spam é combatido através do suporte para CAPTCHA e Akismet.

O Formulário de Contato 7 é tão simples que parece que qualquer pessoa pode usá-lo com eficácia. O estilo também pretende ser simples. Mas talvez muito simples para alguns. Por padrão, o plugin Contact Form 7 não estiliza seus formulários. Qualquer estilo que eles tenham é resultado dos estilos padrão presentes na folha de estilo de um tema do WordPress.

Geralmente resulta em algo bastante básico, como este:

Infelizmente, esse tipo de formulário, embora simples e flexível, pode não ter um design tão bonito quanto os outros elementos do site. Deixando muitos usuários satisfeitos procurando alternativas ao Formulário de Contato 7 com mais opções de estilo. Felizmente, com apenas um pouco de CSS, nenhuma alternativa de plug-in é necessária.

No post de hoje, vou compartilhar uma série de dicas que abrirão uma ampla variedade de possibilidades de estilo do Contact Form 7 para qualquer pessoa, usando qualquer tema.

Como personalizar o estilo do formulário de contato 7 para combinar com seu site

Inscreva-se no nosso canal no Youtube

Onde editar seu formulário de contato 7 CSS (e por quê)

É importante que, ao adicionar CSS personalizado, você não o adicione à folha de estilo do Formulário de Contato 7 ou de seu tema pai. Quaisquer alterações ou acréscimos que você fizer lá serão sobrescritos assim que o tema e / ou plugin forem atualizados.

Em vez disso, você desejará adicionar o CSS abaixo ao CSS do seu tema filho. Você também pode usar o recurso CSS personalizado no Jetpack ou, se o seu tema fornecer uma seção em seu painel de administração para CSS personalizado, você também pode usar isso.

Ok, agora que sabemos onde colocar os estilos, veremos a seguir, vamos começar!

Como criar estilos de formulário para todo o site

Vamos começar fazendo algumas edições gerais que se aplicarão a todo o formulário. Podemos fazer isso usando o seletor de classe .wpcf7 e, em seguida, adicionando estilos abaixo dele.

(Eu também gostaria de sugerir que você coloque o título comentado que escrevi abaixo em sua folha de estilo para indicar onde seus estilos de Formulário de Contato começam.)

/* Contact Form 7 Styles
---------------------------------*/

.wpcf7 {

background-color: #F0F0F0;

border: 5px solid #666666;

}

Depois de adicionar o código acima à sua folha de estilo, cada formulário que você criar com o Contact Form 7 terá os estilos de fundo e borda que você acabou de definir. Abaixo está um exemplo.

Como você pode ver, existem alguns problemas de espaçamento. Para corrigir isso, você deve ajustar as margens entre a borda e os elementos internos do formulário. Você pode fazer isso com o código abaixo.

.wpcf7-form {

margin-left: 25px;

margin-right: 25px;

margin-top: 25px;

No meu site de teste, isso resultou no seguinte:

Observação: esses estilos podem afetar seus formulários de maneiras ligeiramente diferentes devido ao fato de que provavelmente estamos trabalhando com temas diferentes. Isso não significa que esse código não funcionará para você, apenas que talvez seja necessário ajustar um pouco os números para fazer as coisas certas para o seu site.

Como criar estilos de campo de formulário para todo o site

Uma das solicitações mais comuns que as pessoas têm quando se trata de estilizar o Formulário de Contato 7 é como elas podem ajustar a largura dos campos. Particularmente a área de mensagem que não se estende muito longe.

O código abaixo irá estender a área da mensagem para a largura desejada (quando ajustada). Eu defini o meu no exemplo para 95%, pois é o que parecia melhor no meu caso de uso imaginado. Você também pode configurá-lo para atender às suas necessidades - usando uma porcentagem ou uma contagem fixa de pixels.

.wpcf7-textarea {

width: 85%;

}

Você também pode ajustar a largura dos outros campos ajustando o seletor de classe de entrada .

.wpcf7 input {

width: 50%;

}

Se você não deseja ajustar todos os seus campos de entrada com os mesmos critérios, você pode detalhar um pouco, selecionando apenas aqueles nos quais está interessado. No exemplo abaixo, optei por apenas alterar meus campos de texto para que meu botão de envio também não é afetado.

.wpcf7-text {
width: 50%;
}

Depois de todas as mudanças acima, consegui estilizar o formulário que você vê abaixo.

Eu pessoalmente não queria mudar a cor do meu botão, mas acho que provavelmente é outro desejo comum. Portanto, se quiser alterar a cor do botão, você pode usar o CSS abaixo para fazer experiências.

.wpcf7-submit {

background: #555555;

color: #ffffff;

}

Com esses bits de CSS no lugar, todos os formulários criados com o Formulário de contato 7 se parecerão com a imagem final acima. Mas o que acontece quando você deseja que uma forma em particular seja diferente de todas as outras?

Como definir o estilo de um formulário específico

Obter o ID CSS específico necessário para fazer edições de estilo em um formulário específico pode ser um pouco incômodo, mas é possível com alguns ajustes.

A primeira coisa que você vai querer fazer é realmente adicionar o shortcode do formulário ao seu site e visualizá-lo. (Você notará que dentro desse código curto há um número para o ID - mas não é realmente o ID completo de que você precisa.)

Em seguida, usando o recurso de elemento de inspeção do Google Chrome ou algo semelhante em outro navegador, dê uma olhada no código do formulário. Usando isso, você encontrará o ID do formulário completo.

No meu caso, o número de identificação em meu shortcode era 4407 . O ID completo acabou sendo wpcf7-f4407-p4405-o1 . O que significava que eu poderia fazer outras edições, apenas naquele formulário específico, usando o código abaixo com vários critérios que diferiam das configurações de todo o meu site.

#wpcf7-f4407-p4405-o1 {
background-color: #333333;
border: 5px solid #0074A2;
}

Como definir o estilo de campos específicos

Você pode fazer a mesma coisa com campos específicos. Em vez de rastrear uma classe CSS ou ID específica em seu navegador, tudo o que você precisa fazer é adicioná-la ao construtor de formulários.

Quando estiver gerando uma tag para colocar no construtor de formulários, você notará que há duas opções para criar um ID, uma Classe ou ambos.

Neste exemplo, optei por criar uma classe chamada campo personalizado . Se você fizer o mesmo (ou algo semelhante), você será capaz de estilizar apenas aquele campo usando seu novo id (ou classe) como eu fiz abaixo.

#customized-field {

color: #ffffff;

border: 2px solid #333333;

}

Como criar layouts de formulário personalizados para caixas de seleção e botões radiais

Por padrão, as caixas de seleção e os raios são exibidos da esquerda para a direita.

Mas, devido à preferência pessoal ou a um caso de uso específico em que exibi-los de cima para baixo pode ser preferível, você pode usar uma das duas opções abaixo.

Para exibir suas caixas de seleção ou botões radiais de cima para baixo e à esquerda, use isto.

.wpcf7-list-item {
display: block;
}

Para exibir suas caixas de seleção e botões radiais de cima para baixo e à direita, use isto. Além disso, certifique-se de que, ao gerar a tag para essa opção, selecione a caixa de seleção “primeiro rótulo”.

.wpcf7-list-item {
display: table-row;
}

.wpcf7-list-item * {
display: table-cell;
}

Dica bônus: como remover títulos de campo e usar texto de espaço reservado

Esta dica não requer o uso de CSS como os outros acima, mas sim um simples ajuste na marcação usada no criador de formulários do Contact Form 7.

Às vezes não é necessário ter títulos de campo, especialmente quando você pode colocar texto de espaço reservado dentro dos próprios campos que explicam quais informações pertencem a eles.

Se for esse o caso em seu site, tudo o que você precisa fazer é excluir os títulos no criador de formulários e adicionar texto de espaço reservado como fiz no exemplo abaixo.

<p></p>

<p>[email* your-email placeholder "Email Address"]</p>

<p></p>

<p>[textarea your-message placeholder "Talk to me"]</p>

O resultado é uma forma mais limpa com menos desordem.

Para concluir

Espero ter mostrado nos exemplos acima que o plugin Contact Form 7 é altamente personalizável. É verdade que requer um pouco de ajustes, mas para um plug-in gratuito que pode ser esperado.

Acho que a falta de opções de estilo por padrão é uma grande parte do motivo pelo qual o plug-in funciona tão bem para tantos. Portanto, é justo que qualquer um recebendo muito valor disso e que queira mais estilo se comprometa alguns minutos para incluir uma versão de um dos exemplos de código acima.

Você tem alguma dica de estilo própria do Formulário de Contato 7? Algum favorito que você usou e gostaria de compartilhar? Escreva-nos nos comentários abaixo!

Miniatura do artigo via Dmitry Lemon5ky // shutterstock.com