На многих сайтах, как Вы могли заметить, заполняя ту или иную контактную форму, нужно отметить галочкой пункт обработки персональных данных. Такое поле обычно присутствует в формах, где требуется указать персональные данные пользователя. Например, онлайн-банкинг или сайты коммунальных услуг. Ставя “галочку”, Вы тем самым подтверждаете свое согласие, что введенные Вами данные будут использованы организацией в тех или иных целях.
Почему Contact Form 7?
В кругах WordPress довольно часто используют мощный бесплатный плагин для создания контактных форм – Contact Form 7 , являющийся самым популярным в этой области. Создавать чекбокс принятия политики конфиденциальности будем на основе именно этого плагина.
Создаем поле согласия обработки персональных данных
Описывать процесс создания контактной формы в Contact Form 7 не будем, так как это уже было детально рассмотрено в одном из наших прошлых материалов. Будем считать, что контактная форма уже создана и выведена на страницу сайта.
Для добавления нужного чекбокса необходимо в админ-панели перейти Contact Form 7 -> Контактные формы и выбрать нужную нам форму. В итоге Вы попадете на страницу конструктора форм.
Видим, что в основной области экрана отображена структура нашей формы. Сюда нам нужно добавить еще один элемент, который называется принятие. Соответствующая кнопка находится выше, на панели инструментов.
Итак, для добавления нужного нам чекбокса, в области формы нужно поставить курсор мыши в место, где хотим добавить этот элемент, а затем нажать кнопку принятие. В итоге перед вами откроется окно генератора тега.
В этом окне все параметры уже выставлены. Для вставки нужного нам чекбокса достаточно просто нажать кнопку Вставить тег. Теперь наша форма выглядит следующим образом:
Дальше необходимо к чекбоксу добавить сопроводительный текст (например, “Отправляя данную форму, Вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта”). Для этого, после закрывающей квадратной скобки, вписываем нужные текстовые данные. Теперь наша форма примет следующий вид:
Для сохранения всех изменений следует нажать кнопку Сохранить, после чего проверять результат на сайте.
Contact Form 7 provides several types of form tags for representing checkboxes, radio buttons and drop-down menus. In this article, I will show you detailed information about the usage and semantics of these form tags.
Checkbox, Checkbox* and Radio
Both checkbox and checkbox* represent a group of checkboxes ( in HTML). checkbox* requires the user to check at least one of the boxes.
radio represents a group of radio buttons ( in HTML). Note that there is no required version of radio (“radio*”). The reason Contact Form 7 doesn’t provide “radio*” is because a radio button is a required field by nature. The HTML spec document explains it more in detail.
| Option | Examples | Description |
|---|---|---|
| id:(id) | id:foo | id attribute value of the wrapper element. |
| class:(class) | class:bar | class attribute value of the wrapper element. To set two or more classes, you can use multiple class: option. |
| default:(num) | default:2 default:1_2_3 |
Pre-checked options. The integer following default: is the position in the order of items. 1 is the first one. If you want to make two or more items selected, joint integers with underbar (_), as default:1_2_3 . |
| label_first | By default, a checkbox or a radio button are put first, and a label last. By adding label_first option, you can reverse them. | |
| use_label_element | Wrap each checkbox and radio button with tag. | |
| exclusive | Make checkboxes exclusive. I mean, when you check a checkbox in a group, others are unchecked, so it accepts zero checked or one checked. This is a JavaScript gimmick, so requires JavaScript. Radio button doesn’t support this option. | |
| free_text | Append a free input text field to last item. | |
| data:(name) | data:countries | Get the values from Listo. |
These types of tags have one or more values, and the values will be used as the values and labels of the checkboxes or radio buttons.
Select and Select*
Both select and select* represent a drop-down menu ( in HTML). select* requires the user to select at least one option from the menu.
| Option | Examples | Description |
|---|---|---|
| id:(id) | id:foo | id attribute value of the select element. |
| class:(class) | class:bar | class attribute value of the select element. To set two or more classes, you can use multiple class: option. |
| default:(num) | default:2 default:1_2_3 |
Pre-selected options. The integer following default: is the position in the order of items. 1 is the first one. If you want to make two or more items selected, joint integers with underbar (_), as default:1_2_3 . |
| multiple | Make drop-down menu multi-selectable. | |
| include_blank | Insert a blank item into the top of options of this drop-down menu. | |
| first_as_label | Use the first value as a label. | |
| data:(name) | data:countries | Get the values from Listo. |
These types of tags have one or more values, and the values will be used as options in the drop-down menu.
See also
Note: This is a demo. This form doesn’t send a mail practically.
Все в курсе последних требований в области обработки персональных данных. Если у вас сайт на WordPress и используете Contact Form 7 (далее CF7), то статья для вас.
Выведем чекбокс принятия политики конфиденциальности, при этом если его отключить — отправлять форма ничего не будет. Т.е. соблюдаем таким образом все правила: стоит галочка — согласен и можешь отправлять; не стоит галочка — нечего не происходит.
В самом CF7 заходим в редактор ваших форм, открываем нужную форму и добавляем вот такое:
Т.е. создаем новый элемент «Принятие» (Acceptance) и задаем ему параметр «включен по умолчанию»:
Далее все это оборачиваем в label и пишем свой текст, попутно вставляя ссылку на политику конфиденциальности и прочее.
В результате: галочка включена по умолчанию, но если ее отключат — отправить форму не смогут. Это нам и нужно, чтобы всякие «госвколесапалкивставлятели» не дали штраф.
Скорее всего понадобится поправить стили этого чекбокса и текста. Тут уже все индивидуально для каждого сайта.