WordPress

Formulários Responsivos com o Contact Form 7

Formulários Responsivos no Contact Form é mais fácil do que parece

Fala pessoal, esse tutorial é relativamente simples, mas imagino que seja de grande valia para todos que gostariam de ter formulários responsivos em seu site WordPress.

O Contact Form 7, na minha opinião, é o melhor plugin gratuito pra geração de formulários por ser bem fácil e bem intuitivo de se configurar, além de ter um documentação bem abrangente em no seu site.

Como não estou aqui para falar do Contact Form 7 e sim para ensinar a deixá-lo responsivo vamos direto ao tutorial.

Ao final desse tutorial o seu formulário deverá ficar parecido com esse:

formularios responsivos contact form 7

Marcação HTML

Primeiro, precisamos criar o código HTML para o formulário e deixaremos ele preparado com todas as Ids e classses CSS que precisaremos mais tarde para deixá-lo do jeito que nós queremos.

<div id="responsive-form" class="clearfix">

<div class="form-row">
<div class="column-half">Nome [text* first-name]</div>
<div class="column-half">Sobrenome [text* last-name]</div>
</div>

<div class="form-row">
<div class="column-half">E-mail [email* your-email]</div>
<div class="column-half">Telefone [text* your-phone]</div>
</div>

<div class="form-row">
<div class="column-full">Assunto [text* your-subject]</div>
</div>

<div class="form-row">
<div class="column-full">Mensagem  [textarea your-message]</div>
</div>

<div class="form-row">
<div class="column-full">[submit "Enviar"]</div>
</div>

</div><!--fim responsive-form-->

CSS

Esse é o CSS que tonará possível o formulário em duas colunas.

#responsive-form{
	max-width:600px /*-- change this to get your desired form width --*/;
	margin:0 auto;
        width:100%;
}
.form-row{
	width: 100%;
}
.column-half, .column-full{
	float: left;
	position: relative;
	padding: 0.65rem;
	width:100%;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) { 
	.column-half{
		width: 50%;
	}
}

Agora vamos estilizar os campos do formulário.

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	-webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	      box-sizing: border-box
}
.wpcf7 input[type="text"]:focus{
	background: #fff;
}
.wpcf7-submit{
	float: right;
	background: #CA0002;
	color: #fff;
	text-transform: uppercase;
	border: none;
	padding: 8px 20px;
	cursor: pointer;
}
.wpcf7-submit:hover{
	background: #ff0000;
}
span.wpcf7-not-valid-tip{
	text-shadow: none;
	font-size: 12px;
	color: #fff;
	background: #ff0000;
	padding: 5px;
}
div.wpcf7-validation-errors { 
	text-shadow: none;
	border: transparent;
	background: #f9cd00;
	padding: 5px;
	color: #9C6533;
	text-align: center;
	margin: 0;
	font-size: 12px;
}
div.wpcf7-mail-sent-ok{
	text-align: center;
	text-shadow: none;
	padding: 5px;
	font-size: 12px;
	background: #59a80f;
	border-color: #59a80f;
	color: #fff;
	margin: 0;
}

Com esses estilos aplicados o formulário ficará com uma cara bem legal. Em versões desktop vai aparecer com duas colunas e em dispositivos móveis em uma coluna só.

Conclusão

Como falado no início do post, criar um formulário responsivo não é tão difícil como parece. Use esses códigos como base para criar a estrutura e a estilização básica e depois use sua imaginação para deixar ele com a cara que desejar.

Qualquer dúvida podem me perguntar nos comentários.

Até a próxima!

Essa dica eu achei no WPSnippet

4 pensamentos sobre “Formulários Responsivos com o Contact Form 7”

  1. Dagoberto Ideia

    Já conhecia essa dica, mas o “select” está desalinhando os demais “text”. Sabe como corrigir?

  2. Gleidson Vieira

    Sim mas onde coloco esses codigos? Creio que vc esteja fazerndo esse tutorial par leigos, então deveria explicar melhor com um passo a passo!
    Em que local devo colocar esses codigos? dentro do tema? no proprio contact form, em que local?

    1. Filipe Marques

      Gledison, desculpe a demora.

      O código de marcação HTML deve sim ser colocado dentro do formulário criado com o Contact Form. Note que junto com a marcação já existem inseridas no template as tags (que estão entre chaves) com os campos que receberão informações do formulário.

      Quanto ao CSS existem algumas formas de você inserí-lo:

      1 – Alguns temas dão a opção de você inserir CSS customizado dentro das suas configurações: basta colar esse código ali.

      2 – Instalar um plugin que permita você adicionar CSS customizável. Indico o https://br.wordpress.org/plugins/wp-add-custom-css/

      A segunda opção é a melhor solução para leigos.

      Espero ter ajudado!

Deixe um Comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *