Arquivos do Website:

MailChimp - Dicas para personalizar e instalar o formulário de subscrição por e-mail no Blogger


O MailChimp é um dos melhores serviços que existe atualmente para você criar uma lista de e-mails. É um serviço excelente para fazer e-mail marketing. O serviço é pago, mas, você pode obter uma conta gratuita com direito a criar uma lista de e-mails, com um máximo de até 2.000 mil subscritores e enviar no máximo 12.000 mil e-mails por mês.



Bom, o intuito deste artigo, não é ensinar você a criar uma conta no serviço de e-mail marketing denominado MailChimp e, sim, apresentar dicas para personalizar o formulário de subscrição por e-mail.
Se você deseja obter um formulário de subscrição por e-mail, do serviço de e-mail marketing MailChimp, igual a este na imagem acima, leia as dicas a seguir:


a)Faça login na sua conta do MailChimp;
b)Escolha a opção "Lists" ==> Clique na opção "Stats", correspondente a lista desejada ==> Escolha a opção "Signup forms".
c)Escolha a opção "Embedded forms" e, clique em "Select".
d)Escolha a opção "Classic" ==> Coloque um título no formulário ==> Marque a opção "all fields" ==> Marque a opção "disable all JavaScript" ==> Copie o código do formulário.

Veja na imagem abaixo, você deve deixar o painel de controle do formulário, assim (o título do formulário não precisa ser igual):



O código HTML do formulário, que você vai copiar no site MailChimp, deverá ser parecido com este que está logo abaixo (não copie este código, é apenas para exemplo)!

<!-- Begin MailChimp Signup Form -->

<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">

<style type="text/css">

 #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }

 /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.

    We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

</style>

<div id="mc_embed_signup">

<form action="//dicasonlinegratis.us3.list-manage.com/subscribe/post?u=2ba84c144d5afd1bbd5e2d328&amp;id=1bc5305761" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

 <h2>Subscreva a NEWSLETTER</h2>

<div class="mc-field-group">

 <label for="mce-FNAME">Seu nome </label>

 <input type="text" value="" name="FNAME" class="" id="mce-FNAME">

</div>

<div class="mc-field-group">

 <label for="mce-EMAIL">Seu e-mail </label>

 <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">

</div>

 <div id="mce-responses" class="clear">

  <div class="response" id="mce-error-response" style="display:none"></div>

  <div class="response" id="mce-success-response" style="display:none"></div>

 </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->

    <div style="position: absolute; left: -5000px;"><input type="text" name="b_2ba84c144d5afd1bbd5e2d328_1bc5305761" tabindex="-1" value=""></div>

    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

</form>

</div>



<!--End mc_embed_signup-->


Depois que você copiar o código do formulário, lá no site MailChimp, cole o código num editor de texto e apague toda a parte parecida com esta, que está destacada na cor vermelha no código de exemplo acima. A parte que está destacada na cor preto "Subscribe", você poderá alterar para qualquer frase (no meu formulário de exemplo, eu coloquei "Assinar Grátis").

Em qual parte do blog, devo colocar o código HTML do formulário?

Acesse o painel de controle do Blogger ==> Layout ==> Adicionar um Gadget ==> HTML/JavaScript ==> Cole o código dentro do gadget ==> Clique em "Salvar".

Em qual parte do blog, devo colocar o código CSS do formulário?

Acesse o painel de controle do Blogger ==> Modelo ==> Editar HTML ==> Localize a tag "</b:skin>" ==> Cole o código CSS, que está logo abaixo, acima de "</b:skin>" ==> Clique em "Salvar modelo".

Este é o código CSS do formulário, adicione no código fonte do seu blog, seguindo as dicas acima (não esqueça de fazer backup do template, antes de adicionar este código CSS):

#mc_embed_signup form {display:block; position:relative; text-align:left; padding:10px 0 10px 3%}

#mc_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em; color:#eee;}

#mc_embed_signup input {border:1px solid #555; -webkit-appearance:none;}

#mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}

#mc_embed_signup input[type=radio]{-webkit-appearance:radio;}

#mc_embed_signup input:focus {border-color:#3e433e;}

#mce-FNAME {background:#ddd url(http://3.bp.blogspot.com/-Z8hGFye9368/UyigU_xZ3eI/AAAAAAAANGc/vlkjtes2FrM/s1600/Chef.png) no-repeat 0px 0px;height:20px;font:bold 16px Arial; color:#333;box-shadow:0 0 26px 0 #333 inset;}

#mce-EMAIL {background:#ddd url(http://2.bp.blogspot.com/--pQwili4aV4/Uyh2tV1xEHI/AAAAAAAANGA/Jui2bMnmIQE/s1600/arroba.png) no-repeat 0px 0px;height:20px;font:bold 16px Arial; color:#333;box-shadow:0 0 26px 0 #333 inset;}  

#mc_embed_signup .button {clear:both; background-color: #333; border: 0 none; border-radius:4px; color: #ddd; cursor: pointer; display: inline-block; font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 5px 5px 5px 0; padding: 0 22px; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: 282px;}  

#mc_embed_signup .button:hover {background-color:#222;}

#mc_embed_signup .small-meta {font-size: 11px;} 

#mc_embed_signup .nowrap {white-space:nowrap;}

#mc_embed_signup .mc-field-group {clear:left; position:relative; width:280px; padding-bottom:3px; min-height:50px;}

#mc_embed_signup .size1of2 {clear:none; float:left; display:inline-block; width:46%; margin-right:4%;}

* html #mc_embed_signup .size1of2 {margin-right:2%; /* Fix for IE6 double margins. */}

#mc_embed_signup .mc-field-group label {display:block; margin-bottom:3px;}

#mc_embed_signup .mc-field-group input {display:block; width:100%; padding:8px 0; text-indent:2%;}

#mc_embed_signup .mc-field-group select {display:inline-block; width:99%; padding:5px 0; margin-bottom:2px;} 

#mc_embed_signup{background:#15c; height:100%; width:300px;border-radius:10px; clear:left; font: bold 13px Arial; color:#eee;}


O código CSS pode ser todo personalizado (apenas para usuários com algum conhecimento em CSS) - eu vou citar apenas a personalização de algumas partes importantes:

  • #mc_embed_signup h2  = Controla o título do formulário, tamanho da fonte e a cor;
  • #mce-FNAME = Controla o campo onde o usuário coloca o nome;
  • #mce-EMAIL = Controla o campo onde o usuário coloca o endereço de e-mail;
  • #mc_embed_signup .button = Controla o botão de ação "Assinar Grátis" - essa é a cor que ficará ativa;
  • #mc_embed_signup .button:hover = Controla o botão de ação "Assinar Grátis" - essa é a cor que aparecerá quando o usuário passar o cursor do mouse;
  • #mc_embed_signup = Controla todo o formulário - cor de fundo, cor do título do campo "nome" e "e-mail", tamanho da fonte, largura e altura do formulário.

Você poderá adicionar outras imagens de fundo, nos seguintes locais: #mce-FNAME e #mce-EMAIL. Primeiro você deve hospedar as imagens no blog, depois copie o endereço url de cada imagem e adicione no local correto dentro do CSS.

Dica extra: Para adicionar e editar os campos do formulário e seus respectivos títulos, acesse a sua conta no site MailChimp e, escolha a opção "Lists" ==> Escolha a lista e clique em "Stats" ==> Escolha a opção "Signup forms" ==> Escolha a opção "General forms" e clique em "Select" (A opção "add a fild" adiciona mais campos no formulário e a opção "field settings", serve para editar os textos)!