จะเพิ่มแบบฟอร์มสมัครใช้งาน Mailchimp ใน Blogger ได้อย่างไร?

เผยแพร่แล้ว: 2021-10-07

ในบทความนี้ ผมจะแสดงให้คุณเห็นถึงวิธีการเพิ่มแบบฟอร์มลงทะเบียนอีเมลในเว็บไซต์ Blogger ของคุณ

ที่นี่ ฉันจะแสดงขั้นตอนทีละขั้นตอนในการเพิ่มแบบฟอร์มสมัครใช้งาน Mailchimp ในแถบด้านข้างของเว็บไซต์ Blogger แบบฟอร์มสมาชิกนี้จะออกแบบโดยใช้ HTML, CSS & Javascript

มาเริ่มบทความกันเลย

การตลาดผ่านอีเมลคืออะไร?

การตลาดทางอีเมลเป็นกระบวนการในการส่งอีเมลอัปเดตเกี่ยวกับผลิตภัณฑ์และบริการ และสร้างความสัมพันธ์ที่แน่นแฟ้นกับลูกค้าหรือลูกค้า

คุณสามารถใช้เพื่อส่งการอัปเดตเกี่ยวกับบล็อกของคุณ หรือส่ง ebook ฟรี เชิญผู้ใช้ให้เข้าร่วมการสัมมนาผ่านเว็บ หรือส่งคูปองส่วนลดและเพิ่มยอดขายให้กับ Affiliate

เนื่องจาก Google Feedburner ปิดตัวลง จึงไม่มีวิธีใดในการรวบรวมอีเมลในแพลตฟอร์ม Blogger นั่นเป็นเหตุผลที่คุณต้องการเครื่องมือการตลาดผ่านอีเมล เช่น Mailchimp ซึ่งช่วยให้เราสร้างรายชื่ออีเมลและส่งอีเมลได้ฟรี

ใน Mailchimp คุณสามารถเพิ่มสมาชิกได้ถึง 2,000 รายฟรีและส่งอีเมล 10,000 ฉบับต่อเดือน และหากคุณต้องการเพิ่มสมาชิก คุณสามารถอัปเกรดเป็นแผนพรีเมียมได้

แบบฟอร์มการสมัครที่มาพร้อมกับ Mailchimp นั้นธรรมดามากและดูไม่ดี นั่นเป็นเหตุผลที่เราต้องออกแบบแบบฟอร์มนี้ใหม่โดยใช้โค้ด CSS

มาดูกันว่าคุณจะรวบรวมอีเมลของผู้เยี่ยมชมได้อย่างไรโดยใช้แบบฟอร์มสมัครใช้งาน Mailchimp ใน Blogger

ขั้นตอนในการเพิ่มแบบฟอร์มลงทะเบียน Mailchimp ใน Blogger

ขั้นตอนที่ 1 : ในการเพิ่มแบบฟอร์มลงทะเบียนอีเมลใน Blogger คุณต้องทำตามขั้นตอนด้านล่าง

ขั้นตอนที่ 2 : ไปที่แดชบอร์ดของ Blogger และคลิกที่ส่วนเค้าโครง ตอนนี้เพิ่มวิดเจ็ต HTML/Javascript ในแถบด้านข้าง

เพิ่มแบบฟอร์มลงทะเบียนอีเมลใน Blogger

ขั้นตอนที่ 3 : ตอนนี้คัดลอกโค้ด HTML ด้านล่างแล้ววางลงในส่วนวิดเจ็ต

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

ขั้นตอนที่ 4 : ตอนนี้ลงชื่อเข้าใช้แดชบอร์ด Mailchimp ของคุณและคัดลอกและแทนที่ MailChimp URL ในโค้ดด้านบน

url แบบฟอร์มการสมัคร Mailchimp

ขั้นตอนที่ 5 : ไปที่ตัวแก้ไขธีมของบล็อกเกอร์แล้ววางโค้ด CSS ด้านล่างด้านบน ]]></b:skin> แท็กหรือ </style> แท็ก

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

ขั้นตอนที่ 6 : ตอนนี้ให้บันทึกรหัสและเพิ่มแบบฟอร์มสมัครอีเมล Mailchimp ลงในเว็บไซต์บล็อกเกอร์ของคุณ

หากคุณประสบปัญหาใดๆ ในระหว่างกระบวนการนี้ คุณสามารถรับความช่วยเหลือจากวิดีโอแนะนำด้านล่างนี้

วิดีโอ YouTube

หมายเหตุ: หากคุณเพิ่มแบบฟอร์มลงทะเบียนได้ทั้งในแถบด้านข้างและส่วนท้าย แล้วแต่แบบใดที่เหมาะกับคุณ

คุณสามารถปรับแต่งสมาชิกอีเมลนี้เพิ่มเติมสำหรับในบล็อกเกอร์โดยแก้ไขโค้ด CSS ในวิดีโอด้านบน ฉันได้อธิบายวิธีการทำ

อ่าน เพิ่มเติม : ระบบตอบรับอัตโนมัติที่ดีที่สุดสำหรับการตลาดพันธมิตร

ฉันหวังว่าหลังจากทำตามบทช่วยสอนนี้ คุณได้เพิ่มแบบฟอร์มสมัครใช้งาน Mailchimp ในเว็บไซต์ Blogger ของคุณสำเร็จแล้ว หากคุณยังมีข้อสงสัยโปรดถามฉันในส่วนความคิดเห็น

คุณสามารถตั้งค่าการทำงานอัตโนมัติเพิ่มเติมใน Mailchimp ได้ ดังนั้นเมื่อใดก็ตามที่ผู้ใช้ใหม่เข้าร่วมรายการอีเมลของคุณ ข้อความต้อนรับจะถูกส่งไปยังที่อยู่อีเมลของพวกเขาโดยอัตโนมัติ คุณยังสามารถทำให้อีเมลอัตโนมัติส่งโดยอัตโนมัติหลังจากช่วงเวลาหนึ่งๆ เช่น วันหรือสัปดาห์

หากคุณต้องการให้ฉันทำการสอนเกี่ยวกับเรื่องนี้ โปรดแจ้งให้เราทราบในส่วนความคิดเห็น

สำหรับการอัปเดตที่น่าสนใจเพิ่มเติม โปรดเข้าร่วมจดหมายข่าวรายสัปดาห์ของเราด้านล่าง ขอขอบคุณ.

เข้าร่วมจดหมายข่าว key2blogging

รับการอัปเดตก่อนใคร

เข้าร่วมจดหมายข่าวรายสัปดาห์ของเราเพื่อรับข่าวสาร SEO ล่าสุด เทรนด์การตลาด เคล็ดลับและลูกเล่นพิเศษของบล็อกในกล่องจดหมายของคุณ