Изначально я делал это для форм 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">
В этом случае, если пользователь отключит чекбокс, кнопка станет неактивной. Вот и всё.
wpDiscuz