Добавляем галочку согласия с политикой конфиденциальности в форму 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">

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

Вот и всё. Довольно просто, не правда ли?