Cum să adăugați un formular de înscriere Mailchimp în Blogger?

În acest articol, vă voi arăta cum puteți adăuga un formular de înscriere prin e-mail pe site-ul dvs. Blogger.

Aici, vă voi arăta procesul pas cu pas pentru a adăuga formularul de înscriere Mailchimp în bara laterală a site-ului Blogger. Acest formular de abonat va fi conceput folosind HTML, CSS și Javascript.

Deci, să începem articolul.

Ce este Email Marketing?

Marketingul prin e-mail este procesul de trimitere a actualizărilor prin e-mail despre produse și servicii și de a construi o relație solidă cu clientul sau clientul.

Îl puteți folosi pentru a trimite actualizări despre blogul dvs. sau pentru a trimite o carte electronică gratuită, pentru a invita utilizatorii să se alăture la seminarii web sau pentru a trimite cupoane de reducere și pentru a crește vânzările pentru afiliați.

Deoarece Feedburner este închis de Google, nu există nicio modalitate încorporată de a colecta e-mailuri în platforma Blogger. De aceea, aveți nevoie de un instrument de marketing prin e-mail precum Mailchimp, care ne permite să construim o listă de e-mailuri și să trimitem e-mailuri gratuit.

În Mailchimp, puteți adăuga gratuit până la 2000 de abonați și puteți trimite 10.000 de e-mailuri pe lună. Și dacă doriți să adăugați mai mulți abonați, puteți face upgrade la planul premium.

Formularul de înscriere care vine cu Mailchimp este foarte simplu și nu arată bine. De aceea trebuie să reproiectăm acest formular folosind coduri CSS.

Deci, haideți să verificăm cum puteți colecta e-mailuri ale vizitatorilor dvs. folosind formularul de înscriere Mailchimp din Blogger.

Pași pentru adăugarea formularului de înscriere Mailchimp în Blogger

Pasul 1 : Pentru a adăuga un formular de înscriere prin e-mail în Blogger, trebuie să urmați pașii de mai jos.

Pasul 2 : Accesați tabloul de bord Blogger și faceți clic pe secțiunea Aspect. Acum adăugați un widget HTML/Javascript în bara laterală.

Pasul 3 : Acum copiați codul HTML de mai jos și inserați-l în secțiunea 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>

Pasul 4 : Acum conectați-vă la tabloul de bord Mailchimp și copiați și înlocuiți adresa URL MailChimp în codul de mai sus.

Pasul 5 : Acum accesați editorul de teme blogger și inserați codul CSS de mai jos, chiar deasupra ]]></b:piele> eticheta sau </stil> etichetă.

 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; }

Pasul 6 : Acum salvați codul și formularul de înscriere pentru e-mail Mailchimp este adăugat pe site-ul dvs. blogger.

Dacă întâmpinați vreo problemă în timpul acestui proces, puteți beneficia de ajutorul ghidului video de mai jos.

Notă: dacă puteți adăuga formularul de înscriere atât în ​​bara laterală, cât și în zona de subsol, oricare este potrivit pentru dvs.

Puteți personaliza în continuare acest abonat de e-mail în Blogger modificând codul CSS. În videoclipul de mai sus, ți-am explicat cum poți face asta.

Citește și : Cele mai bune răspunsuri automate pentru marketing afiliat

Sper că, după ce ați urmat acest tutorial, ați adăugat cu succes formularul de înscriere Mailchimp pe site-ul dvs. Blogger. Dacă mai aveți îndoieli, nu ezitați să mă întrebați în secțiunea de comentarii.

Puteți seta automat automatizarea în Mailchimp, astfel încât de fiecare dată când un nou abonat utilizator se alătură listei dvs. de e-mail, un mesaj de bun venit va fi trimis automat la adresa sa de e-mail. De asemenea, puteți automatiza e-mailurile care vor fi trimise automat după anumite intervale, cum ar fi zile sau săptămâni.

Dacă vrei să fac un tutorial despre asta, anunță-mă în secțiunea de comentarii.

Pentru mai multe astfel de actualizări interesante, alăturați-vă buletinului nostru săptămânal de mai jos. Mulțumesc.

Fii primul care primește actualizarea

Alăturați-vă Newsletter-ului nostru săptămânal pentru a primi cele mai recente știri SEO, tendințe de marketing, sfaturi și trucuri exclusive de blogging, direct în căsuța dvs. poștală.

Trimite