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:

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.

O grupo div.input com 50% em ‘width’ do form:

Os labels:

O label.error é gerado pelo jQuery validate e adicionado seguido dos campos.

Os campos:

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.

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:

Como sabemos exatamente qual função vai executar quando a jQuery carregar, adicionaremos o jQuery Validate no init:

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:

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:

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.