contact form 7 чекбокс - Ок! Компьютер

На многих сайтах, как Вы могли заметить, заполняя ту или иную контактную форму, нужно отметить галочкой пункт обработки персональных данных. Такое поле обычно присутствует в формах, где требуется указать персональные данные пользователя. Например, онлайн-банкинг или сайты коммунальных услуг. Ставя “галочку”, Вы тем самым подтверждаете свое согласие, что введенные Вами данные будут использованы организацией в тех или иных целях.

Содержание

Почему Contact Form 7?
Создаем поле согласия обработки персональных данных
Checkbox, Checkbox* and Radio
Select and Select*
See also

Почему 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.

Available options for checkbox, checkbox* and radio

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.

Available options for select and select*

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.

Почему Contact Form 7?

Создаем поле согласия обработки персональных данных

Checkbox, Checkbox* and Radio

Select and Select*

See also