fbpx

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

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

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

 

2 комментария

  1. Ольга 23.08.2018 в 18:20 - Ответить

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

    • Тимур Бикташев 26.08.2018 в 22:34

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

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

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

Оставить комментарий