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

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

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

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

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

<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">

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