Acesse nosso Fórum

Formulário responsivo com MailChimp

Cada dia mais estamos utilizando serviços disponíveis na web, principalmente aqueles que tem um plano básico gratuito que permite integrações.

por Palloi Hofmann 06/02/2015 Comentários

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.