Делаем форму подписки MailChimp в Bootstrap

Делаем форму подписки MailChimp в Bootstrap

Mailchimp это отличный инструмент для работы с почтовым маркетингом и поддерживает среди всего прочего много интересного функционала, в который входит встронные формы подписки для вашего сайта. Mailchimp отдает простой HTML код, но к сожалению он не поддерживается Bootstrap.

В этой статье вы узнаете как вставить форму Mailchimp на ваш сайт и затем влегкую интегрировать её в Bootstrap разметку. Конечно же с практическими примерами. Давайте начнем.

Создайте список MailChimp

Если у вас его ещё нет, но обязательно создайте его.

Создайте чистую форму регистрации в MailChimp

Пройдите в детали вашего списка (Lists > Your List Name) и выберите Signup forms. Из опций, которые увидите, выберите встроенные формы.

Выберите тип формы Naked

Настраиваем опции формы

Настраиваем формы так, как вам это нужно. Опции, которые мы выбрали для целей этого руководства показаны ниже. Как вы видите, Mailchimp дает только сырой HTML, но по-факту это реально то, что нам нужно.

Обновляем MailChimp HTML Bootstrap разметкой

После вставки кода из MailChimp на вашу страницу, код формы будет выглядеть так:

<div id="mc_embed_signup">
 
<form action="//Bootstrapious.us10.list-manage.com/subscribe/post?u=97f1bc02efa56031b67a2b00f&amp;id=fc7b4ce646" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
 
<div id="mc_embed_signup_scroll">
 
 
 
<div class="indicates-required"><span class="asterisk">*</span> indicates required</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" id="mce-EMAIL">
 
</div>
 
<div class="mc-field-group">
 
<label for="mce-FNAME">First Name </label>
 
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
 
</div>
 
<div class="mc-field-group">
 
<label for="mce-LNAME">Last Name </label>
 
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
 
</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;" aria-hidden="true"><input type="text" name="b_97f1bc02efa56031b67a2b00f_fc7b4ce646" tabindex="-1" value=""></div>
 
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
 
</div>
 
</form>
 
</div>

Код MailChimp содержит устаревшие классы и элементы, так что нам надо перенести на функционал Bootstrap некоторые атрибуты форм, лейблы и анти-спам div. Это div, спрятанный от viewport и включающий в себя элемент input.

Чтобы показать вам необходимые модификации, мы трансформируем этот код в две формы Bootstrap: одна содержит только поле email, а другая с именем и фамилией.

Простая форма подписки

Возьмем такой код, который будет выглядеть таким образом.

<form>
 
<div class="input-group">
 
<input type="email" class="form-control" required="required">
 
<span class="input-group-btn">
 
<button class="btn btn-default" type="submit"><i class="fa fa-send"></i></button>
 
</span>
 
</div>
 
</form>
 
 

После копирования атрибутов из MailChimp <form>, <input> и части анти-спам, результат будет таким:

Полная форма

Голый шаблон для формы будет влключать в себя поля имени, фамилии и email адреса.

<form>
 
<div class="form-group">
 
<label for="">First Name</label>
 
<input type="text" class="form-control">
 
</div>
 
<div class="form-group">
 
<label for="">Last Name</label>
 
<input type="text" class="form-control">
 
</div>
 
<div class="form-group">
 
<label for="">Email Address</label>
 
<input type="text" class="form-control" required="required">
 
</div>
 
<button type="submit" class="btn btn-primary"><i class="fa fa-envelope-o"></i> Subscribe</button>
 
</form>

И снова, что нам нужно сделать, так это скопировать атрибуты для <form>, <input>, <labels> и анти-спам дива из MailChimp формы.

Как результат:

<form action="//Bootstrapious.us10.list-manage.com/subscribe/post?u=97f1bc02efa56031b67a2b00f&amp;id=fc7b4ce646" method="post" target="_blank">
 
<div class="form-group">
 
<label for="mce-FNAME">First Name</label>
 
<input type="text" class="form-control" name="FNAME" id="mce-FNAME">
 
</div>
 
<div class="form-group">
 
<label for="mce-LNAME">Last Name</label>
 
<input type="text" class="form-control" name="LNAME" id="mce-LNAME">
 
</div>
 
<div class="form-group">
 
<label for="mce-EMAIL">Email Address</label>
 
<input type="email" class="form-control" required="required" name="EMAIL" id="mce-EMAIL">
 
</div>
 
<button type="submit" class="btn btn-primary"><i class="fa fa-envelope-o"></i> Subscribe</button>
 
 
 
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_97f1bc02efa56031b67a2b00f_fc7b4ce646" tabindex="-1" value=""></div>
 
 
 
</form>

Вот так все просто. Мы только что узнали о том, как трансформировать MailChimp формы в Bootstrap и начать собирать пользовательские адреса на сайте.