Como adicionar um formulário de inscrição do Mailchimp no Blogger?

Neste artigo, mostrarei como você pode adicionar um formulário de inscrição por e-mail ao seu site do Blogger.

Aqui, mostrarei o processo passo a passo para adicionar o formulário de inscrição do Mailchimp na barra lateral do site do Blogger. Este formulário de assinante será projetado usando HTML, CSS e Javascript.

Então, vamos começar o artigo.

O que é E-mail Marketing?

O marketing por e-mail é o processo de enviar atualizações por e-mail sobre produtos e serviços e construir um relacionamento sólido com o cliente ou o cliente.

Você pode usá-lo para enviar atualizações sobre seu blog ou enviar um e-book gratuito, convidar usuários para participar de webinars ou enviar cupons de desconto e aumentar as vendas de afiliados.

Como o Feedburner foi desativado pelo Google, não há uma maneira integrada de coletar e-mails na plataforma do Blogger. É por isso que você precisa de uma ferramenta de marketing por e-mail como o Mailchimp, que nos permite criar uma lista de e-mails e enviar e-mails gratuitamente.

No Mailchimp, você pode adicionar até 2.000 assinantes gratuitamente e enviar 10.000 e-mails por mês. E se você quiser adicionar mais assinantes, poderá atualizar para o plano premium.

O formulário de inscrição que vem com o Mailchimp é muito básico e não parece bom. É por isso que precisamos redesenhar este formulário usando códigos CSS.

Então, vamos verificar como você pode coletar e-mails de seus visitantes usando o formulário de inscrição do Mailchimp no Blogger.

Etapas para adicionar o formulário de inscrição do Mailchimp no Blogger

Etapa 1 : Para adicionar um formulário de inscrição por e-mail no Blogger, você precisa seguir as etapas abaixo.

Passo 2 : Vá para o painel do Blogger e clique na seção Layout. Agora adicione um widget HTML/Javascript na barra lateral.

Passo 3 : Agora copie o código HTML abaixo e cole-o na seção do widget.

 <div class="container"> <!-- Begin Mailchimp Signup Form --> <div> <form action="ADD-YOUR-MAILCHIMP-URL-HERE" method="post" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div> <div class="mc-field-group"> <label for="mce-EMAIL">Email Address <span class="asterisk">*</span> </label> <input type="email" value="" name="EMAIL" class="required email" /> </div> <div class="mc-field-group"> <label for="mce-NAME">Name <span class="asterisk">*</span> </label> <input type="text" value="" name="NAME" class="required" /> </div> <div class="clear"> <div class="response"></div> <div class="response"></div> </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div aria-hidden="true"><input type="text" name="b_ac52e8b1ce2a06907e0091d7c_63bf572981" tabindex="-1" value="" /></div> <div class="indicates-required"><span class="asterisk">*</span> indicates required</div> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" class="subscribe" /></div> </div> </form> </div> <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='NAME';ftypes[1]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script> <!--End mc_embed_signup--> </div>

Etapa 4 : Agora, faça login no painel do Mailchimp e copie e substitua o URL do MailChimp no código acima.

Passo 5 : Agora vá para o editor de temas do blogger e cole o código CSS abaixo logo acima do ]]></b:pele> etiqueta ou </style> marcação.

 form { background: #004369; border-radius: 30px; padding: 50px 20px 50px 20px; margin: 10px 0 10px; font-size: 22px; position: relative; box-shadow: 0 40px 50px -50px #89fcf3; } form input { display: block; width: 100%; border-radius: 12px; border: none; height: 50px; padding: 15px; background: FFFFFF; color: black; transition: 0.5s; } form input:focus { outline: none; box-shadow: 0px 10px 30px -20px #89fcf3; filter: contrast(85%) } form label { color: #CCCDCF; font-weight: bold; display: inline-block; margin-bottom: 15px; font-size: 22px; } form .subscribe { max-width: 300px; height: auto; background: #DB1F48; border: #E5DDC8 2px solid; border-radius: 45px; font-weight: bold; line-height: normal; margin: 0 auto -80px; } form .subscribe:hover { background: #01949A; color: #151515; cursor: pointer; } /* Mailchimp CSS */ form .mc-field-group { margin-bottom: 20px; } form .indicates-required { color: #CCCDCF; font-size: 0.5em; margin: 35px 0; text-align: center; } form input + .mce_inline_error { display: inline-block; font-size: 0.5em; position: relative; } form input + .mce_inline_error:before { content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #6B0505; position: absolute; top: -10px; }

Etapa 6 : Agora salve o código e o formulário de inscrição de e-mail do Mailchimp será adicionado ao site do seu blogger.

Se você enfrentar algum problema durante esse processo, poderá obter a ajuda do guia em vídeo abaixo.

Nota: Se você puder adicionar o formulário de inscrição na barra lateral e na área do rodapé, o que for adequado para você.

Você pode personalizar ainda mais esse assinante de e-mail no Blogger modificando o código CSS. No vídeo acima, expliquei como você pode fazer isso.

Leia também : Melhores Autoresponders para marketing de afiliados

Espero que, depois de seguir este tutorial, você tenha adicionado com sucesso o formulário de inscrição do Mailchimp ao seu site do Blogger. Se você ainda tiver alguma dúvida, sinta-se à vontade para me perguntar na seção de comentários.

Você pode definir ainda mais a automação no Mailchimp, portanto, sempre que um novo assinante de usuário ingressar na sua lista de e-mail, uma mensagem de boas-vindas será enviada automaticamente para o endereço de e-mail dele. Você também pode automatizar e-mails que serão enviados automaticamente após determinados intervalos, como dias ou semanas.

Se você quiser que eu faça um tutorial sobre isso, deixe-me saber na seção de comentários.

Para mais atualizações interessantes, junte-se à nossa newsletter semanal abaixo. Obrigada.

Seja o primeiro a receber a atualização

Junte-se à nossa Newsletter semanal para receber as últimas notícias de SEO, tendências de marketing, dicas e truques exclusivos para blogs, diretamente na sua caixa de correio.

Enviar