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

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

Изначально я делал это для форм MailChimp, т. к. их стандартные формы не имели функции добавления чекбокса принятия Политики конфиденциальности. Добавлять в редакторе форм обычный чекбокс было бесполезно — он не работал так, как нужно, а именно не запрещал отправку формы, если галочка не отмечена.

Описанный ниже способ добавления галочки согласия подойдёт для любой HTML-формы.

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

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

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

<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> нужен для того, чтобы чекбокс срабатывал и при нажатии на текст.

Чтобы отключить кнопку если чекбокс не отмечен, добавьте в код кнопки disabled:

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

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

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

Не забудьте в коде чекбокса и кнопки заменить id на свои. В моём примере идентификатор для форм, генерируемых Мэилчимпом.

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

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

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

Добавьте к коду чекбокса 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">

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

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

  1. Ольга написал:

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

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

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

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

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

  2. VetWestr247 написал:

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

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

      Благодарю за отзыв)

  3. Сергей написал:

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

  4. Jesus написал:

    Превосходное решение! Большое спасибо!
    Правда попробовал заменить getElementById на getElementsByClassName — почему-то не работает.

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

Ваш адрес email не будет опубликован.