fbpx

Добавляем галочку согласия с политикой конфиденциальности в форму MailChimp

Галочка согласия в форме MailChimp

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

Форма подписки MailChimp с чекбоксом согласия

Для этого нам нужно:

  1. Добавить в код формы, которую генерировал нам MailChimp, строку с чекбоксом.
  2. Отключить кнопку, если чекбокс согласия не отмечен.

Небольшой комментарий ко второму пункту. Если не отключить кнопку при неотмеченном чекбоксе, форма всё равно сработает. А это уже противоречит закону, т. к. человек должен выразить явное согласие с вашей Политикой конфиденциальности. Если ваш сайт проверят, могут сказать «Ай-ай-ай».

Код для добавления в форму галочки согласия

Вставьте этот код перед кнопкой вашей формы:

<label>
<input type="checkbox" name="accept" onchange="document.getElementById('mc-embedded-subscribe').disabled = !this.checked" /> Я ознакомлен(-а) с <a href="http://site.ru/privacy/" target="_blank">Политикой конфиденциальности</a>
</label>

Тег <label></label> нужен для того, чтобы чекбокс срабатывал и при нажатии на текст. Для того, чтобы отключить кнопку, добавьте в её код «disabled»:

<input type="submit" value="Зарегистрироваться" name="subscribe" id="mc-embedded-subscribe" disabled class="button">

Ну и для того, чтобы сама кнопка в неактивном состоянии отличалась от обычной, в CSS допишите стили для неактивной кнопки. Самый простой вариант, если не хотите заморачиваться — измените прозрачность.

input[type="submit"]:disabled {
opacity: .5;
}

Код, если нужно, чтобы галочка была отмечена по умолчанию

Добавьте к коду чекбокса «checked». Это сделает чекбокс отмеченным по умолчанию:

<label>
<input type="checkbox" name="accept" onchange="document.getElementById('mc-embedded-subscribe').disabled = !this.checked" checked/> Я ознакомлен(-а) с <a href="http://site.ru/privacy/" target="_blank">Политикой конфиденциальности</a>
</label>

В код кнопки «disabled» не добавляйте:

<input type="submit" value="Зарегистрироваться" name="subscribe" id="mc-embedded-subscribe" class="button">

В этом случае, если пользователь отключит чекбокс, кнопка станет неактивной. Вот и всё. Довольно просто, не правда ли?  

6 комментариев к “Добавляем галочку согласия с политикой конфиденциальности в форму MailChimp

  1. Ольга сказал:

    Добрый день! А вы не могли бы привести ПОЛНЫЙ код согласия для тех, кто вообще «не фурычит» в HTML? Нужно, чтобы галка стояла по умолчанию и без нее кнопка бы деактивировалась.
    И ещё: после какого куска кода вставлять согласие, то есть где, собственно говоря, заканчивается код кнопки?
    Заранее благодарю!

    • Тимур Бикташев сказал:

      Здравствуйте, Ольга.

      Код полной формы можно посмотреть зесь: http://jsfiddle.net/dkj431uo/

      Я взял её с действующего лендинга.

  2. VetWestr247 сказал:

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

  3. Сергей сказал:

    Огромная благодарность Тимуру, ОЧЕНЬ помог! (сэкономил день моей жизни).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *