Как скрыть номер телефона на сайте Tilda с проверкой капчи

При создании сайта на Tilda часто возникает задача защитить контактные данные от автоматического сбора ботами. Особенно это актуально для страниц с объявлениями, где номер телефона необходимо показывать только после подтверждения, что пользователь - человек. В этой статье мы подробно разберём, можно ли реализовать такую защиту только средствами платформы Tilda, или потребуется использование внешнего сервера.

Почему важно скрывать номер телефона от ботов

Публикация открытого номера телефона на сайте приводит к его быстрому сбору поисковыми роботами и парсерами. Это чревато спам-звонками, рассылками и утечкой данных. Решение с кнопкой "Показать номер" и капчей позволяет:

• Защитить контакты от автоматического копирования
• Снизить количество нежелательных обращений
• Сохранить удобство для реальных пользователей

Стандартный алгоритм защиты номера

Идеальная схема выглядит так: на странице отображается маскированный номер (например, +7-999-СКРЫТО) и кнопка "Показать". При нажатии открывается форма с капчей. После успешного прохождения проверки на сервер отправляется запрос с идентификатором объявления, и сервер возвращает полный номер для отображения. Полный номер хранится в защищённом месте и недоступен без проверки капчи.

Можно ли реализовать это в Tilda без сервера

Ответ: только частично. Tilda - это конструктор с ограниченными возможностями для серверной логики. Вы не сможете хранить номер в скрытом поле и проверять капчу, используя только Zero Block или стандартные блоки. Основные ограничения:

• Невозможно выполнить серверную проверку капчи (например, reCAPTCHA v2/v3) без внешнего API
• Все данные, загруженные на страницу (даже в скрытых элементах), доступны в исходном коде HTML
• Нет встроенного механизма для условного отображения контента после проверки

Какой вариант выбрать для Tilda

Вариант 1: Использование внешнего сервера (рекомендуется)

Создаёте отдельный сервер (например, на Node.js или PHP), который:

• Принимает запрос с идентификатором объявления и токеном капчи
• Проверяет капчу через Google reCAPTCHA
• В случае успеха возвращает номер телефона в формате JSON
• При неудаче возвращает ошибку

На стороне Tilda через Zero Block вы встраиваете HTML/JS код, который отправляет запрос на ваш сервер и подставляет номер в DOM. Это надёжный способ, полностью защищающий данные.

Вариант 2: Лёгкая маскировка без сервера

Если полная защита не требуется, можно скрыть номер с помощью JavaScript-переключателя. Номер хранится в зашифрованном виде (например, base64) прямо в коде страницы. При нажатии кнопки "Показать" выполняется простое дешифрование. Минус: любой опытный пользователь может открыть консоль браузера и получить номер без капчи. Этот способ подходит только для защиты от самых простых ботов.

Пошаговая инструкция: внешний сервер + Tilda

1. Создайте серверный скрипт с эндпоинтом /get-phone. Скрипт должен принимать POST-запрос с параметрами: id (номер объявления) и token (токен капчи).
2. Настройте проверку капчи через Google reCAPTCHA Secret Key.
3. В ответе верните JSON: {"phone": "+7-999-123-45-67"} или {"error": "captcha_failed"}.
4. В Tilda создайте Zero Block. Добавьте HTML-разметку: блок с маскированным номером и кнопку.
5. Напишите JavaScript: при клике на кнопку открывайте reCAPTCHA виджет, получайте токен и отправляйте fetch-запрос на ваш сервер.
6. При успешном ответе заменяйте текст в блоке на полученный номер.

Заключение

Полноценная защита номера телефона с капчей на Tilda требует использования внешнего сервера. Только так можно гарантировать, что номер не будет украден ботами. Если сервер недоступен, используйте простую маскировку через JavaScript - но помните о её ограничениях. Выбирайте способ в зависимости от требуемого уровня безопасности и технических возможностей.