Как добавить в форму ссылку на согласие на обработку персональных данных

При сборе персональных данных через формы на сайте важно получить явное согласие пользователя на их обработку. Это требование закона о защите данных во многих странах, включая Россию (152-ФЗ). Чтобы это сделать, можно использовать чекбокс со ссылкой на политику обработки данных. Расскажем, как это сделать.

Шаг 1: Добавьте Чекбокс в форму

Выберите вашу форму на холсте — Form → Default State (состояние по умолчанию).

Добавьте в форму элемент Checkbox из панели Элементов.

Шаг 2: Настройте текст Чекбокса

Удалите название поля — элемент Field Label.

Скройте элемент Checkbox Label — в нем не получится добавить ссылку, поэтому для текста нужно будет добавить другой элемент. В правой панели: Авто-лейаут → Скрыть элемент.

Добавьте текстовый элемент в Checkbox List. Чтобы текст разместился справа от квадратика чекбокса, настройте для Checkbox List горизонтальное направление (→) и нужный отступ: Дизайн → Авто-лейаут.

Напишите в текстовом элементе нужную фразу, например: «Я согласен(а) с политикой конфиденциальности». При желании стилизуйте текст (шрифт, размер).

Шаг 3: Добавьте ссылку на политику конфиденциальности

Выделите часть текста «политикой конфиденциальности».

На правой панели откроется Встроенный текст. Вставьте вашу ссылку на политику конфиденциальности. При желании стилизуйте текст (размер, цвет).

Шаг 4: Сделайте поле обязательным

Выберите элемент Checkbox List.

На вкладке Настройки включите опцию Поле обязательно для заполнения. Это предотвратит отправку формы, если пользователь не поставит галочку согласия.

Шаг 5. Стилизуйте Чекбокс (опционально)

Стилизация Чекбокса в состоянии «По умолчанию»

Выберите элемент Checkbox Styled (квадратик).

На вкладке Дизайн настройте размеры, радиус, границы и цвет фона квадратика.

Стилизация Чекбокса в состоянии «Выбран»

Выберите элемент Checkbox Item и в Настройках переключите UI Состояние → Выбран.

Выберите элемент Checkbox Styled (квадратик) на холсте или в слоях. Вы увидите, как будет отображаться квадратик, когда галочка поставлена.

На вкладке Дизайн настройте цвет границ и фона квадратика для отмеченного чекбокса. При желании замените иконку галочки (Background Image).

Стилизация Чекбокса в состоянии «Ошибка»

Выберите элемент Checkbox Item и в Настройках выберите UI Состояние → Ошибка и UI Состояние → По умолчанию.

Выберите элемент Error Message, содержащий сообщение об ошибке. Его можно стилизовать или скрыть на вкладке Дизайн.

При желании стилизуйте квадратик чекбокса, чтобы он выделялся в случае ошибки. Выберите элемент Checkbox Styled и настройте цвет границ и фона.

Шаг 8. Проверьте работу формы

Сохраните изменения, опубликуйте страницу и откройте ее в браузере.

Проверьте, что форма работает корректно:

Резюме

Чтобы добавить в форму ссылку на согласие на обработку персональных данных, понадобится: 

Чекбокс с кастомным текстовым блоком: добавить в форму и при желании стилизовать.

Ссылка на политику: в текстовом блоке поставить ссылку у нужной части текста.

Опция «Обязательное поле»: включить для чекбокса настройку «Поле обязательно для заполнения».