Изначально я делал это для форм 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">
В этом случае, если пользователь отключит чекбокс, кнопка станет неактивной. Вот и всё.
Добрый день! А вы не могли бы привести ПОЛНЫЙ код согласия для тех, кто вообще «не фурычит» в HTML? Нужно, чтобы галка стояла по умолчанию и без нее кнопка бы деактивировалась.
И ещё: после какого куска кода вставлять согласие, то есть где, собственно говоря, заканчивается код кнопки?
Заранее благодарю!
Здравствуйте, Ольга.
Код полной формы можно посмотреть зесь: http://jsfiddle.net/dkj431uo/
Я взял её с действующего лендинга.
Здравствуйте, Тимур! А подскажите,пожалуйста, как сделать чекбокс в форму подписки FeedBurner?
Интересно пишете, жизненно. Все-таки, для того, чтобы делать по-настоящему популярный сайт, нужно не только рассказывать о чем-то, но и делать это в интересной форме:)
Благодарю за отзыв)
Огромная благодарность Тимуру, ОЧЕНЬ помог! (сэкономил день моей жизни).
Превосходное решение! Большое спасибо!
Правда попробовал заменить getElementById на getElementsByClassName — почему-то не работает.