Как создать форму для всплывающих окон (POP-UP)

Любая форма поп-ап собрана из трёх основных частей: 

1. Заголовок. Он должен быть содержательным и понятным. Рекомендуем использовать простые фразы и короткие предложения. Пользователь должен быстро понять, что ему предлагают, и без труда заполнить форму. Хорошими вариантами будут «Подпишись на новинки!», «Получи промокод!». 
2. Содержание. Это часть поп-апа подробно раскрывающая его смысл и назначение, она может быть, как в виде текста, так и в виде заполняемой формы. В тексте можно разместить информацию об актуальных акции, свежих предложениях или розыгрыше подарков. Форма нужна, чтобы собрать данные по лиду: его имя, номер телефона или e-mail. 
3. Призыв к действию. Чаще всего это активная кнопка или ссылка. Этот элемент поп-апа призывает пользователя совершить заданное действие, например, оставить заявку на обратный звонок, подписаться на рассылку, получить купон, скачать файл и т.п. 

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

Внешний вид поп-апа 

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

Всплывающее окно должно легко восприниматься пользователем и не вызывать вопросов как с ним взаимодействовать. 

Вот 5 рекомендаций по правильному оформлению поп-апа:

1. Простой интерфейс. Используйте легко читаемый шрифт в тексте, широкие поля и крупные кнопки - пользователь должен сходу понять о чем поп-ап. 
2. Адаптивность. Поп-ап должен качественно отображаться на экранах любых устройств, в том числе на мобильных телефонах и планшетах, кроме того, не должно возникать проблем с закрытием такого всплывающего окна.
3. Уместность. Правильно настройте время показа поп-апа согласно логике просмотра и релевантности действий пользователя на сайте - не нужно по нескольку раз собирать его e-mail, постоянно показывая ему форму подписки, или сразу предлагать перейти на целевую страницу, если пользователь только начал знакомство с вашим сайтом. 
4. Не навязчивость. Не дублировать поп-апы, которые пользователь уже ранее закрывал, не нужно предлагать несколько раз одно и то же – для этого используйте в форме надписи, типа «Уже подписан», «Больше не показывать». 
5. Призыв к действию. Пользователь должен сразу понимать каких действий от него ожидают. Используйте кнопки и ссылки с побуждающими фразами «Подпишись на рассылку!», «Получи скидку!», «Зайди к нам в блог!» и т.п.

Создание поп-апа 

Создать форму всплывающего окна можно использовав шаблоны на различных сервисах, как платных, так и бесплатных – чаще всего и в тех и других вышеуказанные 5 рекомендаций соблюдены, но, если вы хотите уникальный поп-ап, не забудьте учесть их при разработке ТЗ для верстальщика. 

Также нужно учесть, что всплывающие окна (pop-up) считаются формой рекламы и поэтому при их создании необходимо придерживаться требований Coalition for Better Ads (Коалиция за лучшую рекламу), которыми руководствуется в том числе Google Chrome.

Нельзя: 
• добавлять в поп-апы видео с автозапуском и звуком 
• запускать обратный отсчет без возможности закрыть поп-ап вручную 
• применять агрессивные эффекты, типа мигания 
• использовать поп-апы, закрывающие более 30% площади экрана.