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

Всплывающее окно, или попап, это форма, которая открывается поверх страницы: сразу после загрузки, через несколько секунд, при попытке закрыть вкладку или по нажатию кнопки. Сделать его можно без программиста. Форму собирают в конструкторе, выбирают способ публикации POPUP и вставляют код на сайт перед закрывающим тегом body.

Сложнее решить, когда окно открывать и сколько раз показывать. Мы посмотрели настройки форм stepFORM, которые открываются сами и получали ответы за последний год. 63% из них выскакивают сразу при загрузке страницы, 70% показываются каждый раз. Это самые навязчивые варианты из возможных, а при попытке уйти срабатывает всего 7% таких окон.

Попап или форма на странице

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

Одну и ту же форму можно показать обоими способами: блоком на странице контактов и окном по кнопке в шапке сайта. Заявки из обоих мест придут в один кабинет и в одни уведомления, отдельную форму для попапа заводить не обязательно. А если форма уже стоит на первом экране лендинга, окну при уходе лучше предложить другое: подборку или расчёт вместо того же звонка.

Когда открывать попап

Способов четыре, и от выбора зависит, увидит человек окно как помощь или как помеху.

Среди окон с паузой чаще других ставят 20 секунд. Для длинной страницы это разумная отправная точка: человек успевает прочитать начало и понять, нужно ли ему ваше предложение. Пауза в пять секунд почти ничем не отличается от показа сразу. Сверьтесь и со средним временем на странице в Метрике: если оно меньше паузы, окно увидят единицы.

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

У окна по кнопке два варианта. Можно поставить кнопку stepFORM сбоку экрана, слева или справа, и написать на ней свой текст. А можно открывать окно своей кнопкой на сайте, например «Заказать звонок» в шапке или «Рассчитать стоимость» рядом с ценой.

Как часто показывать попап

Вторая настройка решает, сколько раз окно увидит один человек. Можно показывать его каждый раз, раз за сессию или реже, например раз в день или раз в месяц. 70% автопопапов на stepFORM стоят на варианте «каждый раз», и для большинства сайтов это перебор.

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

Что предложить в попапе

Человек закрывает окно, если не видит в нём выгоды для себя. Предложение зависит от того, что продаёт сайт:

• Интернет-магазин. Скидка или бесплатная доставка на первый заказ, в окне при уходе.
• Услуги с выездом или замером. Обратный звонок по кнопке и расчёт стоимости через паузу на странице цен.
• Онлайн-школа. Пробный урок или короткий тест уровня, после которого человек получает программу.
• Сложные услуги для бизнеса. Подборка кейсов или чек-лист на страницах блога. Звонок тут просить рано, а почту за полезный материал оставить проще.
• Мероприятия. Регистрация по кнопке «Записаться» с датой и местом в заголовке окна.

Окно при уходе может и ничего не продавать. Один вопрос «Что помешало оформить заказ?» с вариантами «дорого», «не нашёл нужное», «просто смотрю» подскажет, что чинить на сайте. Такое окно тоже собирается в конструкторе форм, просто без поля контакта.

Что спросить во всплывающем окне

Попап читают за секунду, поэтому в нём одно предложение и одно поле. 91% автопопапов на stepFORM спрашивают телефон или почту, и это нормально: ради контакта окно и показывают. Хуже другое: у половины таких окон 10 полей и больше, и только у каждого десятого не больше трёх. Окно, которое человек сам не открывал, лучше держать коротким: контакт и одно уточнение, остальное спросите в разговоре.

• Предложение. «Пришлём 5 проектов кухонь с ценами», «Скидка 10% на первый заказ», «Перезвоним за 15 минут». Слово «Подпишитесь» само по себе ничего не обещает.
• Одно поле. Телефон или почта, смотря как вы ответите. Для телефона включите маску ввода, тогда номер придёт в одном формате.
• Согласие на обработку данных. Галочка со ссылкой на политику, она включается в настройках кнопки отправки. Какие ещё поля и тексты нужны форме, мы писали в статье про форму обратной связи.
• Кнопка с результатом. «Получить подборку», «Забрать скидку», «Перезвоните мне».
• Заметный крестик. Если окно трудно закрыть, человек закроет вкладку целиком.

Примеры для разных задач:

Квиз во всплывающем окне уместен, если человек открыл его сам, по кнопке «Рассчитать стоимость». Как построить такой квиз, разобрано в статье про квиз-сайт.

Попап на телефоне

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

Для мобильных посетителей удобнее кнопка: «Заказать звонок» или «Рассчитать стоимость» на видном месте открывает форму по нажатию. Если окно должно открываться само, дайте паузу. Окон, которых требует закон, например согласия на cookie или проверки возраста, эти рекомендации не касаются.

Перед запуском откройте сайт с телефона и проверьте четыре вещи:

• Окно помещается на экран без прокрутки
• Крестик виден сразу и в него легко попасть пальцем
• Поле телефона открывает цифровую клавиатуру и принимает номер без ошибок
• Кнопка отправки не уезжает за край экрана

Как сделать всплывающее окно в stepFORM

1. Соберите форму в конструкторе, с нуля или из шаблона. Для попапа хватит заголовка, одного-двух полей и кнопки.
2. Во вкладке «Публикация» выберите способ «POPUP».
3. Решите, как окно откроется: само, сразу или через паузу, при закрытии вкладки или по нажатию кнопки. Для окна при уходе в пункте «Когда открывать» включите «При закрытии вкладки».
4. В пункте «Как часто открывать» задайте, сколько раз окно увидит один человек.
5. Скопируйте код и вставьте его на сайт перед закрывающим тегом body. Если окно нужно на всём сайте, код ставят в общий подвал.
6. Отправьте себе тестовую заявку с телефона и с компьютера.

На Тильде код вставляется блоком «Другое» → «HTML-код», его удобно поставить в самый низ страницы. Как это выглядит в редакторе, показано в инструкции для Тильды. В WordPress код добавляют в подвал темы перед закрывающим тегом body или через плагин для вставки кода.

Заявки из попапа приходят так же, как из обычной формы: письмом на любом тарифе, в Telegram на «Профи». А что показать человеку после отправки, есть в статье про страницу благодарности.

Как понять, что попап работает

Считайте заявки из окна отдельно от остальных форм. Номер счётчика Яндекс Метрики вводится в настройках формы, а цель на отправку создаётся в Метрике как JavaScript-событие с идентификатором из stepFORM. Тогда в отчётах будет видно, сколько людей оставили контакт через попап. Интеграция с Метрикой работает с тарифа «Новичок».

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

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

Частые ошибки

• Окно сразу при загрузке. Человек ещё не понял, где оказался, а его уже просят оставить почту.
• Показ каждый раз. Закрыл окно на одной странице и встретил его на следующей.
• Длинная форма в окне, которое никто не открывал. Десять полей уместны в квизе по кнопке, для окна, которое открылось само, это слишком много.
• «Подпишитесь на рассылку» без обещания. Непонятно, что человек получит и как часто вы будете писать.
• Крестик мелкий или спрятан. Окно, которое не закрывается с первого раза, раздражает сильнее любого предложения.
• На телефоне окно во весь экран с первой секунды. Страницы не видно, и Google такие окна не любит.
• Два окна подряд. Окно через паузу и окно при уходе на одной странице: человек, который уже закрыл первое, получает второе. Одной странице хватает одного попапа.
• Один и тот же попап на всех страницах. На странице цен уместен расчёт стоимости, в блоге подборка или чек-лист. Одинаковая скидка везде быстро примелькается.
• Нет цели в Метрике. Попап показывается месяцами, а работает ли он, никто не знает.

Частые вопросы