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.