Собранние согласия пользователя на обработку персональных данных и принятие условий публичной оферты — обязательное требование законодательства (в частности, 152-ФЗ в РФ) для большинства коммерческих лендингов. В Taplink нет отдельного виджета «Чекбокс оферты», однако эту задачу легко решить с помощью стандартных блоков. В этой статье подробно разберем три основных способа реализации: от простого текстового блока до интеграции с формами заказа.

Способ 1: Через блок «Текст» (Самый простой и универсальный)

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

1. Зайдите в редактор вашего профиля Taplink.
2. Нажмите кнопку «+ Добавить блок» в нужном месте.
3. Выберите категорию «Базовые» и блок «Текст».
4. Вставьте следующий код (замените ссылку и текст на свои):

<div style="display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #333; line-height: 1.5;">
 <input type="checkbox" id="offer_agree" name="offer_agree" required 
 style="width: 18px; height: 18px; margin-top: 2px; accent-color: #007bff; flex-shrink: 0;">
 <label for="offer_agree" style="cursor: pointer; user-select: none;">
 Я соглашаюсь с <a href="https://*ваш-сайт.ru/oferta" target="_blank" style="color: #007bff; text-decoration: underline;">условиями публичной оферты</a> 
 и даю согласие на обработку персональных данных.
 </label>
</div>

6. Нажмите «ОК» или «Сохранить» в редакторе кода.
7. Настройте отступы блока в настройках (шестеренка блока → «Отступы»), чтобы он не прилипал к соседним элементам.

Важные нюансы этого способа:

• Атрибут required: Он работает только внутри тега <form>. В отдельном текстовом блоке браузер не запретит нажать кнопку заказа, если чекбокс не отмечен. Это просто визуальный элемент.
• Стиль accent-color: Меняет цвет галочки на брендовый (в примере синий #007bff). Замените на свой HEX-код.
• Ссылка: Обязательно укажите target="_blank", чтобы документ открывался в новой вкладке, и пользователь не уходил с лендинга.

Способ 2: Внутри блока «Форма» или «Заказ» (Для обязательной валидации)

Если вам нужно, чтобы кнопка «Оплатить» / «Отправить» была неактивна до установки галочки, чекбокс должен находиться внутри самой формы. В Taplink настройки форм ограничены, но есть рабочий лайфхак через «Пользовательское поле».

1. Добавьте или выберите существующий блок «Форма» (или «Заказ», «Запись» и т.д.).
2. Нажмите на шестеренку блока → вкладка «Поля».
3. Нажмите «+ Добавить поле» → выберите тип «Чекбокс» (в новых версиях Taplink этот тип появился в списке стандартных полей).

Код для поля «Название» (Label) в настройках формы:

Я принимаю условия <a href="https://*ваш-сайт.ru/oferta" target="_blank">Публичной оферты</a> и соглашаюсь на обработку ПД

5. Поставьте галочку «Обязательное поле» (Required).
6. Перетащите это поле в самый низ списка полей.
7. Сохраните настройки формы.

Самый надежный способ для продвинутых пользователей. Позволяет сделать красивый дизайн, добавить анимации и привязать логику к кнопке отправки формы через JavaScript (если вы умеете писать скрипты).

1. Вставьте полный код контейнера со стилями:

<style>
 .taplink-offer-box {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 padding: 15px;
 background: #f8f9fa;
 border-radius: 10px;
 border: 1px solid #e9ecef;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 font-size: 13px;
 color: #495057;
 line-height: 1.6;
 } .taplink-offer-box input[type="checkbox"] {
 width: 20px;
 height: 20px;
 margin-top: 2px;
 accent-color: #ВАШ_ЦВЕТ; / Ваш брендовый цвет /
 cursor: pointer;
 flex-shrink: 0;
 }
 .taplink-offer-box label { cursor: pointer; user-select: none; }
 .taplink-offer-box a { color: #ВАШ_ЦВЕТ; text-decoration: none; border-bottom: 1px dotted; transition: opacity 0.2s; }
 .taplink-offer-box a:hover { opacity: 0.7; border-bottom-style: solid; }
</style>

<div class="taplink-offer-box">
 <input type="checkbox" id="offer_consent_UNIQUE_ID" name="offer_consent" required>
 <label for="offer_consent_UNIQUE_ID">
 Нажимая кнопку ниже, я подтверждаю, что ознакомлен(а) и согласен(на) с 
 <a href="https://ваш-сайт.ru/oferta" target="_blank">Публичной офертой</a> 
 и <a href="https://ваш-сайт.ru/privacy" target="_blank">Политикой конфиденциальности</a>, 
 а также даю согласие на обработку моих персональных данных.
 </label>
</div>

Замените ВАШ_ЦВЕТ на HEX-код вашего бренда, UNIQUE_ID на любое уникальное число (чтобы не конфликтовать с другими формами на странице), а ссылки, на реальные URL ваших документов.

Юридические рекомендации по оформлению

Просто поставить галочку недостаточно — важно, как именно это сформулировано, чтобы защитить себя от штрафов Роскомнадзора и претензий клиентов.

Текст согласия (Best Practices)

• Не пишите: «Я согласен с правилами сайта».
• Пишите: «Нажимая кнопку «Оформить заказ», я подтверждаю, что ознакомлен(а) с условиями Публичной оферты и Политикой конфиденциальности, принимаю их и даю согласие на обработку своих персональных данных (ФИО, телефон, email, адрес доставки) в соответствии с 152-ФЗ».
• Ссылки на оферту и политику обязательно должны быть кликабельны и открываться в новой вкладке (target="_blank").

Принцип «Unbundled Consent» (Раздельное согласие)

Если вы собираете разные данные для разных целей (например, телефон для доставки и email для рассылок), по закону нужно две отдельные галочки:

1. Обязательная: «Соглашаюсь на обработку данных для исполнения договора/оферты (доставка, связь)».
2. Добровольная (не required): «Соглашаюсь на получение маркетинговых рассылок / новостей / скидок».

В Taplink это делается добавлением двух полей типа «Чекбокс» в блоке Формы (Способ 2), где вторая галочка не отмечена по умолчанию и не является обязательной.

Чекбокс не должен быть предварительно отмечен (Pre-ticked)

Согласно рекомендациям регуляторов и судебной практике, галочка должна быть пустой при загрузке страницы. Пользователь должен совершить активное действие (клик). В коде выше атрибут checked отсутствует — это правильно.

Чек-лист перед публикацией

• [ ] Галочка стоит перед кнопкой отправки формы/оплаты.
• [ ] Текст содержит прямые ссылки на Публичную оферту и Политику конфиденциальности.
• [ ] Ссылки открываются в новой вкладке (target="_blank").
• [ ] Галочка не стоит по умолчанию.
• [ ] В блоке «Форма» поле чекбокса отмечено как Обязательное (Required).
• [ ] При попытке отправить пустую форму с неотмеченной галочкой браузер показывает ошибку валидации (красная рамка / тултип «Заполните это поле»).
• [ ] В CRM / Email / Telegram приходят данные о том, что чекбокс отмечен (обычно приходит значение on или true).

Частые проблемы и решения

Проблема: Галочка есть, но форма отправляется без неё

Решение: Используйте Способ 2 (добавление поля типа «Чекбокс» прямо в настройках блока «Форма»). Только так работает нативная браузерная валидация required.

Причина: Taplink санитизирует (очищает) поля ввода для безопасности.

Решение:

1. Попробуйте вставить ссылку через визуальный редактор, если он есть в модалке поля (иконка цепочки).
2. Напишите в поддержку Taplink (*@taplink.ru) с просьбой добавить поддержку HTML в Label полей или добавить нативный виджет «Согласие на Оферту».

Проблема: На мобильном галочка слишком маленькая / трудно попасть пальцем

@media (max-width: 480px) {
 .taplink-offer-box input[type="checkbox"],
 /* Селектор для нативного чекбокса Taplink, уточните через инспектор браузера */
 .form-block input[type="checkbox"] { 
 width: 24px !important; 
 height: 24px !important; 
 transform: scale(1.2); 
 }
}

Настройка галочки оферты в Taplink занимает 5–10 минут, но спасает от серьезных юридических рисков. Рекомендуемый путь: используйте нативное поле «Чекбокс» внутри блока «Форма» (Способ 2) — это единственный способ гарантировать, что пользователь физически не сможет отправить заявку без согласия.

Статья подготовлена на основе актуального интерфейса Taplink на момент написания. Интерфейс может обновляться, названия кнопок и вкладок могут незначительно отличаться. При обнаружении неточностей пишите в поддержку сервиса: *@taplink.ru