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:
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