Há cada dia mais utilizamos serviços disponíveis na web que tem um plano básico e gratuito que permite integrações. Nos últimos meses tenho feito formulários com frequência usando uma abordagem bem simples. Vou mostrar agora como criar um formulário responsivo, integrando com MailChimp e usando jQuery Validate.
O HTML
Vamos criar o formulário da seguinte maneira:
<section> <h1>CREATE RESPONSIVE FORM WITH INTEGRATE MAILCHIMP</h1> <form id="form-contact" method="POST" action="mailchimp-contact.php"> <div class="input"> <label for="name">Name</label> <input type="text" id="name" name="name" placeholder="Your name" required> </div> ... <div class="input txt"> <label for="message">Message</label> <textarea id="message" name="message" cols="10" rows="5" placeholder="Its message leaves" required></textarea> </div> <div class="buttons"> <span class="form-message"></span> <input type="submit" value="SEND" /> </div> </form> </section>
O CSS
Para cada label e input foi adicionado uma div.input
para inserir uma formatação por grupo.
O form está centralizado com max-width:
Por ser um elemento ‘block’, vamos definir o tamanho máximo que ele pode ter.
form { margin: 0 auto; max-width: 850px; padding: 20px 10px; background-color: rgba(255,255,255,0.4) }
O grupo div.input com 50% em ‘width’ do form:
.input { float: left; width: 48%; padding: 0 1% 20px; position: relative; } .input.txt { width: 98%; } /*textarea 100%*/
Os labels:
.input label { display: block; padding-bottom: 5px; color: #666; }
.input label.error { position: absolute; right: 18px; top: 35px; color: #f00; }
O label.error é gerado pelo jQuery validate e adicionado seguido dos campos.
Os campos:
.input input, .input textarea { padding-top: 10px; padding-bottom: 9px; border: none; font-size: 16px; font-weight: 100; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .input input { width: 94%; padding-left: 3%; padding-right: 3%; } .input textarea { width: 97%; padding-left: 1.5%; padding-right: 1.5%; }
Formatamos os campos para ter 100% de tamanho do elemento pai ‘div.input’.
Sempre que redimensionar não haverá quebras, portanto, responsivo meu amigo.
Agora um capricho para resoluções pequenas.
@media screen and (max-width: 520px) { .input { width: 98%; } }
O jQuery + MailChimp
Com o HTML e CSS prontos, vamos adicionar o JavaScript que é fácil. Como dependemos do jQuery e não podemos iniciar de qualquer forma, segue uma estrutura bem legal:
function(){ var contact = function(){ var init = function() { //initialize code }; //more functions return {init: init}; }(); //jQuery loaded $(document).ready(contact.init); })();
Como sabemos exatamente qual função vai executar quando a jQuery carregar, adicionaremos o jQuery Validate no init:
var init = function() { $('#form-contact').validate({ rules : { name: "required", email: { required: true, email: true }, phone: { required: true, minlength: 14 }, company: "required", message: "required" }, messages: { name: "*", email: { required: "*", email: "*" }, phone: { required: "*", minlength: "*" }, company: "*", message: "*" } }); };
Agora que estamos validando todos os campos, que tal adicionar um ajax para deixar nosso formulário bem suave e uma função para exibir mensagens de sucesso ou erro, veja:
var init = function() { $('#form-contact').validate({ rules : { ... }, messages: { ... }, submitHandler: function(form) { var $form = $(form); var params = { name: $form.find('#name').val(), email: $form.find('#email').val(), phone: $form.find('#phone').val(), company: $form.find('#company').val(), message: $form.find('#message').val() }; $.ajax({ type: $form.attr('method'), url: $form.attr('action'), data: params, success: function( data ) { if(data == "true") { $form.find('.input input').val(""); $form.find('.input textarea').val(""); setMessage("Mission accomplished. <strong>"+ params.email +"</strong> was successfully added to list.", "success"); } else { setMessage("Mission failed. <strong>"+ params.email +"</strong> not was added to list.", "error"); } }, error: function( data ) { setMessage("Mission failed in connection. Try again.", "error"); } }); return false; } }); }; var setMessage = function($message, $type) { $('.form-message').html($message).addClass($type); setTimeout(function(){ $('.form-message').removeClass($type); }, 6000); };
Via ‘submitHandler’ do jQuery Validate, vamos disparar por ajax todos os dados preenchidos e travar o post do form com ‘return false’ no final da função. Assim evitamos aquele redirecionamento de post.
O PHP
Como definimos com ‘method’ e ‘action’ para o nosso formulário, segue o código para resgatar os dados:
<?php require_once 'MCAPI.class.php'; $api = new MCAPI('casiuach1293kajsc912319203cja23s-us9'); $merge_vars = array('NAME'=>$_POST["name"], 'PHONE'=>$_POST["phone"], 'COMPANY'=>$_POST["company"], 'MESSAGE'=>$_POST["message"]); // Submit subscriber data to MailChimp // For parameters doc, refer to: https://apidocs.mailchimp.com/api/1.3/listsubscribe.func.php $retval = $api->listSubscribe( '12938asd98', $_POST["email"], $merge_vars, 'html', false, true ); if ($api->errorCode){ echo "false"; } else { echo "true"; } ?>
Dependemos da MCAPI.class que você pode verificar na documentação ou baixar aqui, só lembrando que precisa adicionar sua API Key e List ID.
PRONTO
Nosso formulário é responsivo e integrado ao mailchimp.
Veja como ficou o resultado final
Veja o código completo no github
É isso ae pessoal, obrigado.