При создании форм обратной связи, фильтров на сайте и т.д. часто используют чекбоксы. Этот простой элемент играет важную роль в UX, позволяя посетителю в один клик выбрать нужные опции или подтвердить согласие с условиями обработки персональных данных. Если вы создаете сайт на Tilda, стоит разобраться, как создать чекбокс и какие функции он выполняет.
Что такое чекбокс и зачем он нужен на сайте
Чекбокс — элемент пользовательского интерфейса, который также нередко называют галочкой или флажком. Визуально он выглядит как небольшое квадратное поле, рядом с которым идет текст. Чекбоксы в основном применяются в различных формах и фильтрах.
Зачем добавлять чекбокс в форму обратной связи
Если говорить конкретно о формах обратной связи, то чекбокс необходим для соблюдения закона ФЗ-152, который регулирует процессы сбора и обработки персональных данных. Компании активно используют чекбокс, потому что он позволяет:
- Явно подтвердить согласие.
- Обеспечить сохранность факта согласия через логи.
Способы добавить чекбокс на Тильде: от простого к продвинутому
Веб-разработчики на Tilda добавляют чекбоксы 3 способами. Кратко рассмотрим особенности каждого из них.
Добавление чекбокса стандартными средствами Tilda
Конструктор имеет встроенный инструмент для добавления чекбоксов. Он не нравится многим веб-разработчикам из-за низкой гибкости, но зато его можно добавить в пару кликов.
Данный инструмент прост и удобен в использовании. Единственный недостаток — ограничения в плане дизайна. Разработчики Tilda предусмотрели мало вариантов оформления и неудобное позиционирование. Например, в горизонтальных формах чекбокс находится снизу, что может портить дизайн страницы.
Добавление кастомного чекбокса через Zero Block
Добавление кастомного чекбокса через Zero Block в Тильде позволяет гибко настроить внешний вид и поведение элемента под фирменный стиль сайта. В отличие от стандартного чекбокса формы, в Zero Block можно задать собственные цвета обводки и активного состояния, шрифт, а также оформить ссылку внутри текста, например на согласие обработки персональных данных. Элемент создается через HTML-блок с индивидуальным стилем и подключением JavaScript, который проверяет, установлена ли галочка перед отправкой формы. Такой подход делает дизайн формы единым с остальными элементами сайта и усиливает доверие пользователей.
Данный вариант удобнее, но требует определенных навыков и базового понимания CSS и HTML.
Продвинутый способ: чекбокс через HTML-код на Тильде
Самый сложный и гибкий вариант — создание собственного чекбокса с нуля. Такой вариант значительно сложнее конструкторов и зерокод-решений, но зато предоставляет практически безграничные возможности.
Единственный нюанс — необходимость не только в HTML, но и в CSS. Вам нужно знать оба языка, чтобы сделать качественный чекбокс. HTML отвечает за структуру страницы, т.е. расположение элементов, а CSS — за цвета, отступы, шрифты, анимации и т.д.
Если вас не удовлетворяют возможности редактора Tilda и даже конструктора Zero Block, стоит разработать чекбокс вручную. Данный вариант лучше доверить специалисту, чтобы новый фрагмент кода правильно работал и негативно не повлиял на надежность и безопасность всего сайта.
Пошаговая инструкция: создаем чекбокс на Тильде своими руками
По шагам рассмотрим, как создать чекбокс на сайт с помощью стандартных средств редактора.
Шаг 1. Создайте новую форму на странице Tilda
В Tilda есть много готовых блоков с простыми формами. Они собраны в 2 разделах библиотеки:
- «Форма».
- «Обложка».
Доступные формы позволяют размещать до 100 различных полей, включая чекбоксы, строки для ввода текста и т.д.
Шаг 2. Добавьте элемент «галочка» в список полей
Откройте редактор в редакторе полей формы и в меню выберите тип «Галочка».
Шаг 3. Настройте внешний вид и условия согласия
Вы можете легко настраивать текст и визуальный стиль для полей. Для этого нажмите на чекбокс, после чего сбоку появится меню. Подробно опишите в нем условия согласия. Чтобы не раздувать блок, стоит просто сделать ссылку на «Политику конфиденциальности». Также не забудьте настроить цвет, добавить бордюр и анимации.
Шаг 4. Подключите форму к CRM или email
Для подключения сторонних сервисов не потребуется работать с кодом. В настройках блока найдите пункт «Подключенные сервисы» и нажмите на клавишу «Подключить». Затем просто выполните пошаговые инструкции, которые будут отображаться на экране.
Опубликуйте сайт и проверьте работу формы, оставив одну заявку.
Как сделать кастомный дизайн чекбокса на Тильде (без программиста)
Наиболее простой вариант — использовать TiCode. Это библиотека модификаций для платформы Tilda, которая позволяет значительно расширить стандартные возможности сайта без необходимости писать код самостоятельно. Единственный недостаток TiCode — платная подписка. Для использования модификаций придется потратить 400 рублей в месяц или 2900 в год.
В ней есть готовое решение для создания уникальных чекбоксов без программирования. Вы настраиваете внешний вид и функционал под свои нужды (например, выбираете цвета, тип чекбокса и другие параметры), а генератор выдает готовый код. Затем его останется только вставить в «T123 (HTML-блок)».
Как чекбокс влияет на SEO и конверсию сайта
Пока нет подтвержденных кейсов или статистики, которые бы показывали влияние чекбоксов на SEO. Обычно данный элемент добавляют на сайт для правильного оформления форм заказа и обратной связи, чтобы случайно не нарушить ФЗ-152.
Если же в целом рассматривать механизм анализа поведенческих факторов роботами Яндекса и Google, то клики по любым кнопкам, в том числе по чекбоксам, должны положительно оцениваться. Активность пользователя показывает заинтересованность в контенте.
Почему важно добавить чекбокс для согласия с политикой конфиденциальности
Согласно Федеральному закону № 152-ФЗ «О персональных данных», перед сбором любых персональных данных сайт должен получить на это согласие посетителя. Чекбокс является допустимой формой такого согласия, но только если система фиксирует, что его отметил сам пользователь, и он имел возможность ознакомиться с текстом соглашения.
Чтобы чекбокс считался законным, важно соблюсти три ключевых правила:
- Не проставлен по умолчанию. Пользователь должен сам нажать на чекбокс, поэтому изначально он должен быть пустым.
- Ссылка на политику. Рядом необходимо разместить ссылку, ведущую на документ, где подробно расписано, какие данные собираются, зачем и как они защищаются.
- Право на отзыв. В тексте рядом с чекбоксом следует указать, что согласие можно отозвать. Например: «Вы можете отозвать своё согласие в любой момент, связавшись с нами по (адрес email)».
Если вы не добавите чекбокс. то получите штраф до 300 000 рублей. Эта мера предусмотрена для юрлиц и ИП.
Когда стоит обратиться к специалистам: настройка чекбокса под ключ
Мы рассмотрели несколько способов создания чекбокса. Самый гибкий из них — самостоятельное написание кода. Однако для этого вам нужны глубокие знания в HTML, CSS и веб-дизайне.
Если вас не удовлетворяют простые решения, но навыков программирования нет, стоит обратиться к специалистам. Они создадут кастомный чекбокс с учетом требований 152-ФЗ, настроят интеграции и проверят работу блока.
Заключение
Если вы создаете форму обратной связи, не забудьте о чекбоксе. Чтобы компания точно не получила штраф за нарушение 152-ФЗ, нужна именно кнопка для дачи согласия. Просто написать, что при отправке данных клиент соглашается с условиями, нельзя. Поэтому обязательно изучите доступные методы добавления чекбокса или обратитесь к специалистам.