Formulário responsivo com MailChimp

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>

Ver demo sem style.

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%;
  }
}

Ver demo com style.

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: http://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.