Всплывающая форма на сайт: заявки с кнопки сразу в CRM

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

Всплывающая форма — это окно с полями, которое открывается поверх страницы по нажатию на кнопку и отправляет заявку прямо в CRM. Раздел «Виджет форм на сайте» собирает такую форму за пару минут: заголовок, поля, кнопка и окно «Спасибо». На сайт ставится только ссылка на кнопке.

Посмотрите видео на две минуты, а ниже — пошаговая настройка.

Зачем бизнесу форма по кнопке

• Клиника, салон, автосервис. Кнопка «Записаться» открывает форму с полями «Имя», «Телефон», «Услуга» и «Желаемая дата». Администратор перезванивает уже с готовым предложением времени.
• Онлайн-школа. «Получить программу курса» — имя, телефон, email и поле «Курс». Голосовой бот перезванивает по свежей заявке, пока человек ещё на странице.
• Недвижимость. Под каждую кнопку своя форма: «Получить планировки», «Подобрать квартиру» с бюджетом и районом, «Записаться на просмотр».
• Юристы, ремонт, B2B. «Запросить КП» с полями «Компания» и «Комментарий», а в окне «Спасибо» — обещание перезвонить за 15 минут.
• Лендинг на Tilda или WordPress. Ссылка формы вставляется в поле ссылки кнопки конструктора, и отдельный блок формы на странице не нужен.

Как работает виджет форм на сайте

Форму открывает код кабинета на сайте — тот же, что у виджета. Его ставят один раз в «Интеграции с сайтом», а работает он, когда виджет проекта создан и не стоит на паузе.

У каждой формы своя ссылка: адрес сайта, знак «#» и название формы латиницей. Ссылка строится из поля «Название»: форма «Обратный звонок» получит адрес, который заканчивается на obratnii_zvonok. Посетитель нажимает кнопку с этой ссылкой, заполняет поля, и заявка приходит в CRM проекта, а ответы сразу ложатся в карточку лида.

Как сделать всплывающую форму на сайт: пошагово

1. 1
   Проверьте код на сайте

   «Как показать на сайте» → «Разметка форм сайта»: в «Интеграции с сайтом» статус должен быть «Код найден».
2. 2
   Создайте форму

   Нажмите «Добавить форму» и впишите «Название», например «Перезвоните мне». Посетитель его не видит.
3. 3
   Задайте тексты окна

   «Заголовок» до 80 символов и «Описание» до 150, а «Ширина окна» — от 200 до 3000 px, по умолчанию 700.
4. 4
   Соберите поля

   В «Поля формы» оставьте нужные, лишние уберите крестиком, а «+ Добавить поле» поставит поле из CRM.
5. 5
   Настройте кнопку и окно «Спасибо»

   «Текст кнопки», «Цвет кнопки», затем «Заголовок» и «Описание» в блоке «После отправки формы».
6. 6
   Сохраните и скопируйте ссылку

   Нажмите «Сохранить», затем значок копирования у ссылки в списке. Вставьте её в кнопку на сайте и отправьте тестовую заявку.

Поля из CRM и окно «Спасибо»

Кроме «Имя», «Телефон» и «Email» в форму ставятся поля карточки лида типов «Текст», «Дата», «Число» и «Список»: город, услуга, бюджет, желаемая дата. Клиент заполняет их сам, и менеджеру не нужно переспрашивать. Порядок полей меняется перетаскиванием, а «Подсказка внутри поля» — это серый текст в пустом поле. Нужного поля нет — создайте его в разделе дополнительные поля в CRM и обновите страницу форм.

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

Как поставить форму на кнопку сайта

Ссылку формы копируют в списке значком рядом со ссылкой, через меню ⚙ → «Скопировать ссылку на форму» или внизу редактора. В Tilda, WordPress и других конструкторах её вставляют в поле ссылки кнопки как обычный адрес.

Если править сайт некому, кнопку привязывают прямо из кабинета. В «Интеграции с сайтом» откройте сайт для разметки, выберите режим «Попап на кнопке», нажмите кнопку на странице и выберите форму в списке «Какую форму открывать». Как устроена разметка, рассказано в статье заявки с сайта в CRM.

Почему всплывающая форма не открывается на сайте

• На сайте нет кода или стоит код другого проекта: «Проверить код» в «Интеграции с сайтом» должен показывать «Код найден».
• Виджет проекта на паузе: при балансе ниже нуля или закончившемся тарифе код ничего не показывает.
• Ссылка на кнопке устарела: форму переименовали или удалили.
• Сайт не опубликован после правки кнопки.
• Код подгружает формы после первого движения мыши, прокрутки или касания, поэтому самое первое нажатие может не сработать — нажмите ещё раз.

Читайте также: Виджет для сайта, Заявки с сайта в CRM, Квиз для сайта