Olá, tudo bem? No post de hoje vou ensinar como integrar o formulário  de assinatura de Newsletter do MailChimp ao seu projeto do Webacapella 5.

Itens Necessários: 

  • Conta no MailChimp caso não tenha click aqui.
  • Editor HTML (neste tutorial sera utilizado Brackets caso queira baixa-lo click aqui.
  • Arquivo CSS disponibilizados no final Post

1. Primeiramente vamos abrir a Dashboard do MailChimp, e criar uma nova lista. Para isto basta em Audience>Create  A List.

2. Criando a lista. Para criar sua lista basta preencher o formulário com os dados do projeto, List Name (Nome da sua Lista), Default Form email address (E-mail padrão do formulário), Default From name (Nome Padrão do Formulário), Remind people how they signed up to your list (Lembrete de porque a pessoa esta recebendo seu email), Contact information for this list (Dados de contato), após informar todos estes dados como no exemplo a baixo basta clicar em Save e está pronta esta etapa.

3. Criando o formulário de captura de e-mails. Para gerar nosso formulário vamos em Signup forms.

4. Após isto vamos em Embedded forms> Selec. O site ira mostra 5 estilos de formulário sendo eles Classic, Super Slim, Horizontal, Naked, Advanced, selecione o “Horizontal”

 

desabilitando o Include form title e o  Enable reCAPTCHA. Ok, feito isso eremos copiar o codigo gerado pelo site.

5. Bom finalizamos a etapa de gerar nosso html, agora vamos editar o codigo html e personalizar ele para deixar no estilo do nosso projeto.

A primeira coisa a se fazer é alterar o arquivo css chamado pelo código na linha 2 iremos substituir href=”//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css” por href=”custom.css” para assim poder futuramente customizar nosso formulário. Feito isso vamos para a linha 4 onde removeremos o seguinte código css  background:#fff; para nosso fundo ser transparente. Agora iremos traduzir para português na linha 12 contem o seguinte trecho placeholder=”email address” onde substituiremos o “email address” por “Seu E-mail” e na linha 15 iremos alterar o seguinte trecho value=”Subscribe” por value”Inscrever-se”.

Ficando assim o código:

6. Customização do código, para customizar este código basta abrir  o arquivo que esta disponível para download no final do artigo:

A edição é bem simples para mudar a cor fixa devera ser alterado o background-color: #202020 da linha 9 para a cor que você desejar. E para Alterar a cor ao colocar o mouse em cima do botão basta alterar o background-color: #ff0042 da linha 10.

7. Inserir o código e fazer-lo funcionar corretamente. Para colocar nosso Newsletter no Webacappella 5 é super simple é so criar uma row e inserir uma chamada html e colar nosso codigo, depois é so enviar o arquivo custom.css para o local onde os arquivos do seu site estão armazenados.

 

Baixar Custom.css