Как добавить форму регистрации Mailchimp в Blogger?

В этой статье я покажу вам, как добавить форму регистрации по электронной почте на свой веб-сайт Blogger.

Здесь я покажу вам пошаговый процесс добавления формы регистрации Mailchimp на боковую панель веб-сайта Blogger. Эта форма подписки будет разработана с использованием HTML, CSS и Javascript.

Итак, приступим к статье.

Что такое электронный маркетинг?

Электронный маркетинг — это процесс отправки по электронной почте обновлений о продуктах и ​​услугах и построения прочных отношений с клиентом или клиентом.

Вы можете использовать его, чтобы отправлять обновления о своем блоге или отправлять бесплатную электронную книгу, приглашать пользователей присоединиться к вебинарам или отправлять купоны на скидку и увеличивать партнерские продажи.

Поскольку Feedburner закрыт Google, в платформе Blogger нет встроенного способа сбора электронных писем. Вот почему вам нужен инструмент для электронного маркетинга, такой как Mailchimp, который позволяет нам создавать список адресов электронной почты и отправлять электронные письма бесплатно.

В Mailchimp вы можете бесплатно добавить до 2000 подписчиков и отправлять 10 000 писем в месяц. И если вы хотите добавить больше подписчиков, вы можете перейти на премиум-план.

Форма регистрации, которая поставляется с Mailchimp, очень проста и выглядит не очень хорошо. Вот почему нам нужно изменить дизайн этой формы, используя коды CSS.

Итак, давайте проверим, как вы можете собирать электронные письма ваших посетителей, используя форму регистрации Mailchimp в Blogger.

Как добавить форму регистрации Mailchimp в Blogger

Шаг 1. Чтобы добавить форму регистрации по электронной почте в Blogger, выполните следующие действия.

Шаг 2. Перейдите на панель инструментов Blogger и щелкните раздел «Макет». Теперь добавьте виджет HTML/Javascript на боковую панель.

Шаг 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, скопируйте и замените URL-адрес MailChimp в приведенном выше коде.

Шаг 5. Теперь перейдите в редактор темы блоггера и вставьте приведенный ниже код CSS чуть выше ]]></b:скин> тег или </стиль> ярлык.

 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 будет добавлена ​​на ваш веб-сайт блоггера.

Если у вас возникнут какие-либо проблемы во время этого процесса, вы можете воспользоваться помощью приведенного ниже видео-руководства.

Примечание. Если вы можете добавить форму регистрации как на боковую панель, так и в область нижнего колонтитула, в зависимости от того, что вам подходит.

Вы можете дополнительно настроить этого подписчика электронной почты для Blogger, изменив код CSS. В видео выше я объяснил, как вы можете это сделать.

Читайте также : Лучшие автоответчики для партнерского маркетинга

Я надеюсь, что после выполнения этого руководства вы успешно добавили форму регистрации Mailchimp на свой веб-сайт Blogger. Если у вас все еще есть какие-либо сомнения, не стесняйтесь спрашивать меня в разделе комментариев.

Вы можете дополнительно настроить автоматизацию в Mailchimp, поэтому всякий раз, когда новый пользователь-подписчик присоединяется к вашему списку адресов электронной почты, приветственное сообщение будет автоматически отправляться на его адрес электронной почты. Вы также можете автоматизировать электронные письма, которые будут отправляться автоматически через определенные промежутки времени, например дни или недели.

Если вы хотите, чтобы я сделал учебник по этому вопросу, дайте мне знать в разделе комментариев.

Чтобы узнать больше о таких интересных обновлениях, присоединяйтесь к нашей еженедельной рассылке ниже. Спасибо.

Будьте первым, кто получит обновление

Подпишитесь на наш еженедельный информационный бюллетень, чтобы получать последние новости SEO, маркетинговые тенденции, эксклюзивные советы и рекомендации по ведению блога прямо в свой почтовый ящик.

Представлять на рассмотрение