Налаштування модального вікна для сайту

Модальне вікно — елемент (форма підписки в eSputnik), що знаходиться поверх головного вікна сайту.

Розміщуйте модальні вікна на будь-якій сторінці свого сайту, не змінюючи код.

Створення pop-up форми для сайту

Тип форми

1. Перейдіть до вкладки “Сайт” — “Форми”: 
2. У розділі “Власні форми” натисніть кнопку “Створити власну форму”: 
3. У меню, що відкриється, виберіть “Модальне вікно”: 
4. Надайте формі назву. Зверніть увагу, що ім'я форми використовується для пошуку в системі eSputnik, відвідувачі сайту його не побачать.
5. Виберіть поля контакту, які необхідно зібрати: 
6. Натисніть "Далі".

Створення форми в стилі сайту

1. Щоб вибрати кольори основного заголовка, фону та кнопки, клікніть потрібний елемент і виберіть необхідний колір: 
2. Щоб вибрати стиль модальної форми, натисніть шаблон, який вам сподобався. Усього доступно п'ять стилів: класичний, мінімалізм, м'який, декоративний і сучасний. Після цього натисніть "Далі": 
3. Виберіть зовнішній вигляд форми і натисніть “Далі”. Усього їх чотири:

• Вертикальна із зображенням:

• Вертикальна із фоном: 
• Вертикальна з зображенням зліва:  
• Вертикальна мінімалістична: 

  Оформлення та контент форми

  Вкладка “Оформлення”

1. У вкладці "Оформлення" ви зможете попрацювати зі стилем тексту. Стандартний шрифт — Arial, але можна вибрати будь-який інший. Його має бути завантажено на сайт: 
2. У розділі "Адаптивність" вкажіть ширину екрану, починаючи з якої відображення форми перебудовується на мобільну версію. За замовчуванням це менше ніж 576 пікселів:  

Панель “Базові компоненти”

Ця панель складається з базових компонентів і полів контакту. Їхні налаштування залежать від вибраного типу форми. Щоб додати до форми компонент або поле, перетягніть елемент у потрібну область. 

1. Клікнувши головний текст, ви побачите редактор із налаштуваннями. Тут можна встановити розміри контейнера, стиль тексту, внутрішні та зовнішні відступи: 
2. За кліком зображення відкриються його налаштування. Тут можна завантажити потрібну картинку або знайти її у внутрішніх джерелах. А також задати її розмір та позиціонування: 
3. Перейдіть до структури, що складається з полів для заповнення (просто натисніть лівою кнопкою миші на будь-якій вільній від елементів зоні форми). Встановіть для неї потрібні налаштування. Крім стандартних розмірів та відступів, ви можете вибирати розміщення елементів: 

Можна встановити для структури фон, додати тіні або обведення, закруглити кути: 

4. У полях для заповнення теж можна встановити всі налаштування: розміри, відступи, фон, текст і т.ін. Якщо в полі є номер телефону, виберіть код країни за замовчуванням: 

Вкажіть, які поля мають бути обов'язковими (наприклад, ім'я та email, або ж усі поля):  

5. Після того, як ви встановили всі налаштування, для кнопки “Підписка” можна увімкнути ховер-ефект (при наведенні на кнопку вона буде мінятися відповідно до заданих налаштувань):  

6. Загальні налаштування форми стандартні: виберіть фон, виберіть розміщення, задайте розміри та відступи: 

7. Для станів форми “Успішна підписка”, “Повторна підписка” та “Помилка” слід також задати актуальні параметри (так само як для форми підписки): 

8. У вкладці “Контент” у розділі “Мобільні налаштування” ви зможете побачити, як форма виглядатиме на телефоні, та зробити необхідні налаштування: 

Верхня панель налаштувань

1. Стрілки “Назад” і “Вперед” дозволяють скасувати або повернути внесені до форми зміни.
2. Налаштування мультимовності:

• налаштування зовнішнього вигляду форми здійснюються тільки для основної мови, звідки копіюються до інших мовних версій;
• у мовних версіях можна змінити лише текст;
• форма відображається мовою сайту, яка визначається за значенням атрибута lang у тегу html; якщо його немає – за мовою браузера.

1. Кнопки переходу на мобільну або десктопну версію форми.
2. Попередній перегляд форми.
3. Закрити редагування.
4. Далі.

Параметри

Параметри форми

Для налаштування умов показу вікна натисніть “Редагувати” навпроти цього пункту: 

Тут можна:

• Вибрати частоту показу: 
• Коли буде показано форму: 
• Кому показувати: 
• Вибрати сторінки, на яких відображатиметься форма. Або виключити непотрібні: 
• Можна управляти показом форми за допомогою API, показувати її за кліком елемента на сайті. Для цього треба вставити CSS-селектор елемента виклику: 

Або показувати за допомогою JavaScript: 

Дії після заповнення форми

1. За бажанням виберіть групу, до якої будуть додаватися контакти: 

Додавати можна або тільки нові, або також існуючі контакти: 

2. Підтвердження email-адреси через відправлення повідомлення. Для чого потрібен Double Opt-In, читайте тут. 

3. Виберіть лист, що підтверджує підписку: 

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

5. За бажання вибудовуйте власний welcome-ланцюжок: 

6. Зберігши всі налаштування, перевірте, як форма відображатиметься на сайті. Для цього натисніть кнопку "Переглянути на сторінці": 

7. Введіть посилання на сайт і натисніть "Переглянути на сторінці":  

8. При успішному виконанні всіх кроків pop-up відобразиться у вас на веб-сайті відповідно до заданих умов.

9. Після тестування форми відкрийте її, натиснувши кнопку “Можуть бачити відвідувачі сайту”, і після цього натисніть “Зберегти”: 

10. Щоб зупинити показ форми, натисніть кнопку "Бачите тільки ви", і після цього — "Зберегти": 

11. У вкладці “Статистика” можна побачити результати форми: