Tilda

Как добавить подтверждение номера телефона в форму Tilda

Пошаговая настройка подтверждения номера в Tilda: виджет, отправка кода, проверка формы, защита от повторов и запуск без потери заявок.

Основатель VerifyBox, продукт и интеграции14 минут
Схема подключения формы Tilda к модулю подтверждения номера телефона
Содержание статьи

Подтверждение номера телефона в Tilda добавляет к обычной лид-форме проверяемое условие: заявка уходит в CRM только после того, как пользователь получил и правильно ввёл код. Это помогает отсеять опечатки, случайные номера и часть автоматических отправок до того, как менеджер начнёт обрабатывать обращение.

Для подключения не нужно переносить лендинг с Tilda или собирать отдельную форму. Виджет встраивается в существующий сценарий: Tilda собирает данные, VerifyBox создаёт и проверяет код, а выбранный канал доставляет его пользователю. Ниже — полный путь от подготовки формы до запуска на рабочем трафике.

Когда форме действительно нужно подтверждение телефона

Проверка номера оправдана там, где нерабочий контакт создаёт прямые расходы: менеджер тратит время на звонок, CRM заполняется дублями, бот отправляет сотни заявок или пользователь бронирует ограниченный ресурс. Типичные сценарии — запись на консультацию, заказ обратного звонка, регистрация на мероприятие, расчёт стоимости и получение персонального предложения.

Не стоит добавлять код в каждую короткую форму только «для надёжности». Дополнительный шаг может снизить конверсию, если посетитель ещё не понимает ценность предложения. Для подписки на новости или скачивания открытого материала иногда достаточно валидации поля и защиты от частых запросов. Сначала определите, что дороже для бизнеса: потеря части пользователей на дополнительном шаге или обработка неподтверждённых заявок.

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

Сценарий формыЦена неверного контактаРекомендация
Запись или бронированиеПотерянный слот и время менеджераПодтверждать номер до заявки
Расчёт или персональное предложениеМусор в CRM и лишние звонкиПодтверждать при высокой доле ошибок
Открытый материал или подпискаОбычно невысокаяНачать с валидации и лимитов
Массовая рекламная кампанияРиск всплеска спама и расходовСовместить проверку номера с лимитами

Как устроена интеграция Tilda и VerifyBox

В рабочем сценарии участвуют четыре стороны:

  1. Форма Tilda передаёт номер и ждёт подтверждения перед отправкой заявки.
  2. VerifyBox создаёт сессию, генерирует код, применяет лимиты и проверяет ответ.
  3. Подключённый провайдер доставляет код по SMS или звонком.
  4. Пользователь вводит полученный код в виджете и завершает отправку формы.

VerifyBox возвращает форме единый результат: номер подтверждён или проверка отклонена. Менеджеру не нужно разбираться, сколько было попыток и какой канал использовался. В CRM должна попадать уже готовая заявка с проверенным номером.

Схема пути подтверждения номера в форме Tilda
От номера в форме до подтверждённой заявки в CRM

Для Telegram модель отличается: на тарифе Business код отправляется через канал VerifyBox, стоимость одной отправки составляет 2,5 ₽. Для SMS и звонков условия доставки, баланс и ограничения зависят от провайдера клиента.

Что подготовить перед подключением

До изменения формы соберите минимальный набор:

  • опубликованную страницу Tilda, на которой находится рабочая форма;
  • доступ к настройкам сайта и пользовательскому коду;
  • проект VerifyBox;
  • отдельное поле телефона в форме;
  • тестовый номер, на который вы можете получить код;
  • доступ к CRM или почте, куда Tilda передаёт заявки;
  • провайдера доставки для рабочего режима.

Для первичной проверки подойдёт тариф Free. На нём удобно проверить расположение виджета, тексты состояний, получение тестового кода и блокировку отправки. Для рабочего сайта используются Starter или Business. Актуальные различия тарифов собраны в блоке стоимости.

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

Шаг 1. Создайте отдельный проект для сайта

Не смешивайте тестовую страницу, рабочий лендинг и другой продукт в одном проекте. Раздельные проекты упрощают лимиты, журналы и диагностику: по событию сразу видно, откуда пришёл запрос.

После создания проекта вы получите параметры интеграции. Публичную часть можно подключить на страницу, но секретные ключи нельзя вставлять в HTML-блок Tilda, передавать в браузер или публиковать в инструкции подрядчику. Если сценарий требует серверного секрета, он должен оставаться на серверной стороне.

Назовите проект так, чтобы его можно было узнать спустя несколько месяцев: например, Основной сайт — форма консультации, а не Тест 2. Зафиксируйте домен, ответственное лицо и выбранный канал доставки.

Шаг 2. Подготовьте поле телефона в Tilda

В форме должно быть одно однозначное поле телефона. Не создавайте рядом второе поле для «подтверждённого номера»: значения могут разойтись, а менеджер не поймёт, какое использовать.

Проверьте четыре настройки:

  • поле имеет тип «Телефон» и понятную подпись;
  • оно обязательно для заполнения;
  • маска не блокирует реальные номера вашей аудитории;
  • в форме нет другого скрипта, который самовольно меняет значение перед отправкой.

После этого назначьте форме CSS-класс, по которому интеграция определит нужный блок. Точное имя класса и актуальный код подключения берите в открытой документации VerifyBox: параметры могут меняться, поэтому не копируйте фрагмент из старого чата или чужого проекта.

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

Шаг 3. Добавьте код интеграции

Скрипт размещается в настройках сайта или страницы Tilda в соответствии с документацией. После сохранения страницу нужно именно опубликовать: предпросмотр внутри редактора не всегда воспроизводит загрузку внешних скриптов и поведение реального домена.

При корректном подключении интеграция:

  • находит форму по заданному классу;
  • отслеживает значение телефона;
  • показывает действие для получения кода;
  • блокирует отправку заявки до успешной проверки;
  • открывает ввод кода внутри виджета;
  • возвращает форме подтверждённый результат.

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

Оценить сам сценарий до подключения можно в демо на лендинге VerifyBox.

Шаг 4. Настройте понятные состояния виджета

У пользователя не должно возникать вопроса, что произошло после нажатия. Минимальный набор состояний выглядит так:

  1. Номер не заполнен. Кнопка получения кода недоступна или сопровождается подсказкой.
  2. Код отправляется. Видно состояние загрузки, повторный клик заблокирован.
  3. Код отправлен. Появляется ввод кода и маскированный номер получателя.
  4. Код неверный. Сохраняется возможность исправить ввод, показывается число оставшихся попыток.
  5. Время истекло. Старый код больше не принимается, доступен понятный повторный запрос.
  6. Номер подтверждён. Виджет показывает устойчивое успешное состояние, форма разрешает отправку.
СостояниеЧто показать пользователюОсновное действие
Номер не готовПодсказку о формате или незаполненном полеИсправить номер
Код отправляетсяИндикатор процесса и заблокированный повторПодождать
Код отправленМаскированный номер, поле кода и таймерВвести код
Код отклонёнПричину и оставшиеся попыткиИсправить ввод
Срок истёкПонятное объяснение без общего слова «ошибка»Запросить новый код
Номер подтверждёнУстойчивый успешный статусОтправить форму

Текст «Произошла ошибка» без причины почти бесполезен. Если сработал таймер, покажите, сколько ждать. Если исчерпаны попытки, объясните следующий шаг. Если провайдер не принял сообщение, не изображайте успешную отправку.

Шаг 5. Проверьте полный пользовательский путь

Открытие виджета ещё не доказывает, что интеграция работает. Пройдите весь сценарий на опубликованной странице:

  1. Введите корректный номер.
  2. Запросите код и дождитесь состояния отправки.
  3. Нажмите повторно до завершения таймера.
  4. Введите неполный и затем неверный код.
  5. Введите правильный код.
  6. Измените номер после подтверждения и убедитесь, что результат сбросился.
  7. Подтвердите номер заново.
  8. Отправьте форму.
  9. Проверьте, что в CRM появилась одна заявка с ожидаемыми полями.

Отдельно попробуйте обновить страницу на каждом этапе, вернуться назад в браузере и открыть форму в приватном окне. Такой тест ловит ошибки, которые не видны при одном «идеальном» прохождении.

Матрица проверки перед запуском

СценарийОжидаемый результат
Пустой или некорректный номерКод не запрашивается, форма объясняет ошибку
Двойной клик по получению кодаСоздаётся один запрос, кнопка временно блокируется
Неверный кодЗаявка не отправляется, попытка учитывается
Истёкший кодПроверка отклоняется, предлагается новый запрос
Изменение номера после успехаПодтверждение сбрасывается
Верный кодФорма становится доступной для отправки
Повторный клик по отправке формыВ CRM не создаются дубли

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

Шаг 6. Проверьте мобильную версию

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

Также убедитесь, что после закрытия клавиатуры пользователь видит основную кнопку формы. Частая ошибка — успешное подтверждение произошло, но человек не понимает, что теперь нужно завершить отправку заявки ниже по странице.

Тестируйте хотя бы на iPhone/Safari и Android/Chrome. Эмуляция в десктопном браузере полезна, но не показывает все особенности реальной клавиатуры и автоматической подстановки из SMS.

Шаг 7. Подключите рабочий канал доставки

В рабочем режиме SMS и звонки отправляет провайдер клиента. Проверьте баланс, разрешённые направления, имя отправителя, шаблон сообщения и статус тестовой доставки. Статус «запрос принят» у провайдера не всегда означает, что сообщение уже доставлено абоненту.

Разделяйте два класса ошибок:

  • сообщение не пришло — проверяем номер, провайдера, оператора и ограничения канала;
  • сообщение пришло, но код не принимается — проверяем сессию, срок действия, число попыток и соответствие кода последнему запросу.

Так поддержка не будет искать проблему в VerifyBox, когда сообщение отклонено провайдером, или наоборот.

Защита от повторов и расходования баланса

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

Не полагайтесь только на неактивную кнопку в браузере: интерфейс можно обойти. Ограничения должны применяться внутри контура проверки. Одновременно не делайте правила слишком жёсткими — пользователь мог ошибиться цифрой или получить сообщение с задержкой.

После подтверждения добавьте дедупликацию в CRM. Один и тот же человек может несколько раз нажать финальную кнопку или вернуться на страницу. В зависимости от процесса повтор должен обновлять существующий контакт, создавать новую активность или отклоняться в коротком временном окне.

Какие данные передавать в CRM и аналитику

Менеджеру нужен подтверждённый номер и контекст заявки, а не сам одноразовый код. Не сохраняйте код в CRM, веб-аналитике, URL или открытых логах.

Полезно передавать:

  • нормализованный телефон;
  • результат проверки;
  • идентификатор проекта или формы;
  • страницу и рекламный источник;
  • время успешного подтверждения;
  • идентификатор сессии для внутренней диагностики.

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

Частые ошибки при подключении

Форма отправляется до подтверждения

Значит, интеграция не управляет реальным действием отправки или подключена не к той форме. Исправление CSS-состояния кнопки недостаточно: проверка должна быть частью логики отправки.

Код вводится в самой форме, а не в виджете

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

После изменения номера остаётся зелёная отметка

Подтверждение относится к конкретному номеру. Любое редактирование значения должно сбрасывать успешное состояние и требовать новую проверку.

На тесте всё работает, а на домене — нет

Проверьте, опубликована ли страница, разрешён ли домен проекта, не блокирует ли скрипт политика безопасности и не конфликтует ли он с оптимизатором загрузки. Сравните консоль браузера и сетевые запросы на тестовой и рабочей странице.

В CRM появляются одинаковые сделки

Верификация доказывает доступ к номеру, но не запрещает повторные заявки. Настройте правило дублей в CRM и защитите финальную отправку от нескольких кликов.

Как выбрать тариф для Tilda

Free подходит для знакомства с пользовательским сценарием. Рабочее подключение Tilda предлагается на год: целевое действие в тарифном блоке — оформить подключение за 9 900 ₽. Если нужна серверная интеграция, собственная логика или несколько продуктовых сценариев, сравните API-тарифы в актуальном разделе стоимости.

Перед оплатой оцените не только количество кодов. Важны канал доставки, нужные лимиты, число проектов и способ поддержки. Если конфигурация нестандартная, обсудите её с VerifyBox до переноса формы на рабочий трафик.

Короткий чек-лист запуска

  • форма найдена по правильному CSS-классу;
  • номер нормализуется одинаково в виджете и CRM;
  • заявка невозможна до успешного подтверждения;
  • изменение номера сбрасывает результат;
  • повторный запрос ограничен таймером;
  • неверный и истёкший коды обработаны разными сообщениями;
  • рабочий провайдер принимает и доставляет сообщение;
  • мобильная клавиатура не перекрывает виджет;
  • код не попадает в аналитику и открытые логи;
  • после отправки в CRM создаётся одна корректная запись.

Вопросы о подтверждении номера в Tilda

Можно ли подключить виджет без переноса сайта с Tilda?

Да. Интеграция добавляется к существующей форме на опубликованной странице. Переносить лендинг на другой конструктор не требуется.

Кто отправляет SMS с кодом?

VerifyBox создаёт и проверяет код, а SMS или звонок доставляет подключённый клиентом провайдер. Telegram через канал VerifyBox доступен на тарифе Business за 2,5 ₽ за отправку.

Можно ли сначала проверить всё бесплатно?

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

Что произойдёт, если пользователь изменит телефон после проверки?

Успешный результат должен сброситься. Новый номер считается неподтверждённым, пока пользователь не получит и не введёт новый код.

Подтверждение телефона полностью уберёт спам?

Нет. Оно отсекает часть ботов, опечаток и чужих номеров, но для полноценной защиты нужны лимиты, контроль дублей, мониторинг аномалий и корректная серверная или штатная проверка результата.

Итог

Надёжное подтверждение номера в Tilda — это не просто поле для четырёх цифр. Рабочий контур должен связать форму, сессию проверки, доставку сообщения и итоговую запись в CRM. Если последовательно пройти тестовую матрицу, мобильный сценарий, лимиты и обработку дублей, пользователь увидит понятный дополнительный шаг, а менеджер получит меньше заявок с нерабочими контактами.

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

Следующий шаг

Проверьте сценарий на своём сайте

Войдите в кабинет, чтобы продолжить работу с проектом, или посмотрите варианты подключения.

Читайте дальше