Налаштування модального вікна для сайту
Модальне вікно — елемент (форма підписки в eSputnik), що знаходиться поверх головного вікна сайту.
Розміщуйте модальні вікна на будь-якій сторінці свого сайту, не змінюючи код.
Зверніть увагу!
Для роботи модальної форми на вашому сайті необхідно встановити скрипт eSputnik. Щоб його отримати, перейдіть до вкладки "Сайт" — "Форми" і натисніть "Отримати код". Після цього вкажіть домен вашого сайту і додайте скрипт у код сайту перед закриваючим тегом. Скрипт має бути встановлений на всіх сторінках.
Створення pop-up форми для сайту
Тип форми
- Перейдіть до вкладки “Сайт” — “Форми”:
- У розділі “Власні форми” натисніть кнопку “Створити власну форму”:
- У меню, що відкриється, виберіть “Модальне вікно”:
- Надайте формі назву. Зверніть увагу, що ім'я форми використовується для пошуку в системі eSputnik, відвідувачі сайту його не побачать.
- Виберіть поля контакту, які необхідно зібрати:
- Натисніть "Далі".
Створення форми в стилі сайту
- Щоб вибрати кольори основного заголовка, фону та кнопки, клікніть потрібний елемент і виберіть необхідний колір:
- Щоб вибрати стиль модальної форми, натисніть шаблон, який вам сподобався. Усього доступно п'ять стилів: класичний, мінімалізм, м'який, декоративний і сучасний. Після цього натисніть "Далі":
- Виберіть зовнішній вигляд форми і натисніть “Далі”. Усього їх чотири:
- Вертикальна із зображенням:
- Вертикальна із фоном:
- Вертикальна з зображенням зліва:
- Вертикальна мінімалістична:
Оформлення та контент форми
Вкладка “Оформлення”
- У вкладці "Оформлення" ви зможете попрацювати зі стилем тексту. Стандартний шрифт — Arial, але можна вибрати будь-який інший. Його має бути завантажено на сайт:
- У розділі "Адаптивність" вкажіть ширину екрану, починаючи з якої відображення форми перебудовується на мобільну версію. За замовчуванням це менше ніж 576 пікселів:
Панель “Базові компоненти”
Ця панель складається з базових компонентів і полів контакту. Їхні налаштування залежать від вибраного типу форми. Щоб додати до форми компонент або поле, перетягніть елемент у потрібну область.
- Клікнувши головний текст, ви побачите редактор із налаштуваннями. Тут можна встановити розміри контейнера, стиль тексту, внутрішні та зовнішні відступи:
- За кліком зображення відкриються його налаштування. Тут можна завантажити потрібну картинку або знайти її у внутрішніх джерелах. А також задати її розмір та позиціонування:
- Перейдіть до структури, що складається з полів для заповнення (просто натисніть лівою кнопкою миші на будь-якій вільній від елементів зоні форми). Встановіть для неї потрібні налаштування. Крім стандартних розмірів та відступів, ви можете вибирати розміщення елементів:
Можна встановити для структури фон, додати тіні або обведення, закруглити кути:
4. У полях для заповнення теж можна встановити всі налаштування: розміри, відступи, фон, текст і т.ін. Якщо в полі є номер телефону, виберіть код країни за замовчуванням:
Вкажіть, які поля мають бути обов'язковими (наприклад, ім'я та email, або ж усі поля):
5. Після того, як ви встановили всі налаштування, для кнопки “Підписка” можна увімкнути ховер-ефект (при наведенні на кнопку вона буде мінятися відповідно до заданих налаштувань):
6. Загальні налаштування форми стандартні: виберіть фон, виберіть розміщення, задайте розміри та відступи:
7. Для станів форми “Успішна підписка”, “Повторна підписка” та “Помилка” слід також задати актуальні параметри (так само як для форми підписки):
8. У вкладці “Контент” у розділі “Мобільні налаштування” ви зможете побачити, як форма виглядатиме на телефоні, та зробити необхідні налаштування:
Верхня панель налаштувань
- Стрілки “Назад” і “Вперед” дозволяють скасувати або повернути внесені до форми зміни.
- Налаштування мультимовності:
- налаштування зовнішнього вигляду форми здійснюються тільки для основної мови, звідки копіюються до інших мовних версій;
- у мовних версіях можна змінити лише текст;
- форма відображається мовою сайту, яка визначається за значенням атрибута lang у тегу html; якщо його немає – за мовою браузера.
- Кнопки переходу на мобільну або десктопну версію форми.
- Попередній перегляд форми.
- Закрити редагування.
- Далі.
Параметри
Параметри форми
Для налаштування умов показу вікна натисніть “Редагувати” навпроти цього пункту:
Тут можна:
- Вибрати частоту показу:
- Коли буде показано форму:
- Кому показувати:
- Вибрати сторінки, на яких відображатиметься форма. Або виключити непотрібні:
- Можна управляти показом форми за допомогою API, показувати її за кліком елемента на сайті. Для цього треба вставити CSS-селектор елемента виклику:
Або показувати за допомогою JavaScript:
Дії після заповнення форми
- За бажанням виберіть групу, до якої будуть додаватися контакти:
Додавати можна або тільки нові, або також існуючі контакти:
2. Підтвердження email-адреси через відправлення повідомлення. Для чого потрібен Double Opt-In, читайте тут.
3. Виберіть лист, що підтверджує підписку:
4. Виберіть, куди направити користувача після кліку в листі. Можна створити сторінку подяки за підписку, можна перенаправити на сторінку сайту:
5. За бажання вибудовуйте власний welcome-ланцюжок:
6. Зберігши всі налаштування, перевірте, як форма відображатиметься на сайті. Для цього натисніть кнопку "Переглянути на сторінці":
7. Введіть посилання на сайт і натисніть "Переглянути на сторінці":
8. При успішному виконанні всіх кроків pop-up відобразиться у вас на веб-сайті відповідно до заданих умов.
9. Після тестування форми відкрийте її, натиснувши кнопку “Можуть бачити відвідувачі сайту”, і після цього натисніть “Зберегти”:
10. Щоб зупинити показ форми, натисніть кнопку "Бачите тільки ви", і після цього — "Зберегти":
11. У вкладці “Статистика” можна побачити результати форми: