Форма обратной связи в модальном окне: Форма обратной связи в модальном окне на PHP и Ajax

Leave a Comment / Разное / By /

Содержание

Popup Maker + форма обратной связи

Автор Юрий Савченко На чтение 6 мин Опубликовано Обновлено

После того как вы установили плагин, в боковом меню вашей админки появится новый раздел с одноимённым названием.

В этом разделе будут дополнительные разделы:

  • Создать всплывающее окно,
  • Посмотреть все созданные всплывающие окна, которые вы уже сделали на этом сайте
  • Обновить
  • Подписчики
  • Темы для всплывающих окон
  • Настройки
  • Инструменты
  • Помощь и поддержка по работе с плагином

Давайте детальней взглянем не на меню, а на интерфейс создания нового модального окна. Тут нам предлагают заполнить следующие поля:

  1. Название модального окна: необходимо для идентификации модального окна в списке прочих. Называйте его так, что бы из названия было понятно для чего оно на сайте и какую информацию выводит.
  2. Заголовок всплывающего окна: этот заголовок показывается в верхней части модального окна на страницах вашего сайта. Тут следует вставить заголовок, который описывает информацию, размещённую в модальном окне — озаглавливаем контент.
  3. Поле для добавления контента — тут все как мы привыкли — область ввода любой нужной нам информации, которая должна содержаться в модалке: картинки, списки, таблицы, формы обратной связи, шорткоды и прочее.

Под полем для добавления контента располагается блок с настройками всплывающего окна — эти настройки предназначены исключительно для того окна, которое вы создаете и не содержат глобальных параметров.

Блок персональных настроек модального окна.

Настройка НАЦЕЛИВАНИЕ (странный перевод опции)

Позволяет настроить опции показа модального кона — указать на каких страницах, в каких записях или категориях записей нужно выводить это модальное окно.

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

  • Основные
    • Главная страница
    • Страница результатов поиска
    • Страница ошибки 404
  • Страницы
    • Все Страницы
    • Страницы: Выбранный
    • Страницы: ID
    • Страницы: Дочерний из
    • Страницы: Исходный из
    • Страницы: С шаблоном
  • Сообщения
  • WooCommerce
    • Все WooCommerce
    • Страница магазина
    • Страница корзины
    • Страница оформления заказа
    • Страница аккаунта
    • Является конечной точкой
  • Записи
    • Все Записи
    • Записи: Выбранный
    • Записи: ID
    • Записи: С Рубрика
    • Записи: С Метка
    • Записи: С Формат
  • Медиафайлы
    • Все Медиафайлы
    • Медиафайлы: Выбранный
    • Медиафайлы: ID
  • Товары
    • Товары Архив
    • Все Товары
    • Товары: Выбранный
    • Товары: ID
    • Товары: С Тип товара
    • Товары: С Видимость товара
    • Товары: С Категория
    • Товары: С Метка
    • Товары: С Класс доставки
  • Рубрики
    • Рубрики: Все
    • Рубрики: Выбранные
    • Рубрики: IDs
  • Форматы
    • Форматы: Все
    • Форматы: Выбранные
    • Форматы: IDs
  • Метки
    • Метки: Все
    • Метки: Выбранные
    • Метки: IDs
  • Категории товаров
    • Категории товаров: Все
    • Категории товаров: Выбранные
    • Категории товаров: IDs
  • Метки товаров
    • Метки товаров: Все
    • Метки товаров: Выбранные
    • Метки товаров: IDs
  • Классы доставки товаров
    • Классы доставки товаров: Все
    • Классы доставки товаров: Выбранные
    • Классы доставки товаров: IDs

Это реально удобно, потому что можно запрограммировать опцию показа модального окна под любые задачи разработчика.

Обращаю ваше внимание, что при создании модального окна и настройки параметров «подключения» это модальное окно подключается к соответствующим страницам и выводится в разметке страницы в самом низу, перед скриптами и закрывающим тегом </ body>.

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

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

Теперь по поводу настроек ОТОБРАЖЕНИЕ

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

Настройки отображения модального окна.

Лично я выбираю такие параметры внешнего вида:

тему Light Box

автоматический размер окна, который подстраивается под содержимое.

Анимацию — Затухание

ставлю звук Сигнал, что бы тыдынькало каждый раз когда окошко открывается,

Позиция — середина Центр

И всё!

У Popup Marker есть еще продвинутые надстройки внешнего вида, но я их не трогаю, так как не было необходимости.

Блок статистики модального окна

блок статистики показывает количество взаимодействий посетителей с вашим модальным окном.

блок статистики показывает количество взаимодействий посетителей с вашим модальным окном. А еще он позволяет отслеживать успешные отправки данных из формы (если в модальном окне есть форма). Кому то эта опция покажется интересной, хотя, как по мне — фигня. Проще глянуть в Яндекс метрике (при условии что вы настроили цели на сайте).

Триггеры и Cokie

Для начала стоит внести ясность в то что такое триггеры и что такое cokie.

Что такое триггеры и зачем они нужны

Триггеры — это разные события происходящие на странице сайта, целью которых является удержание или захват внимания посетителя. Я писал отдельную статью в которой рассказывал о самых популярных триггерах на сайтах. Почитайте её, если интересны механизмы продаж через сайт.

Триггеры на сайте — это всевозможные фишки и приемы, которые приковывают внимание посетителей и мотивируют их совершить полезное для владельца сайта действие.

К ярким и часто встречающимся примерам триггеров можно отнести такие фишки как :

Exit Pop—up — показ всплывающего окна при попытке уйти с сайта,

Заказ обратного звонка с сайта через форму,

Показ предложения с акцией, при попытке закрыть какой ни будь блок на сайте.

Зачем нам Cookie и где они хранятся

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

К примеру, всякий раз, когда вы заходите с вашего компьютера в социальную сеть, ваш веб-браузер подгружает из cookie-файла информацию — регистрационные данные и прочие сохраненные ранее настройки для этого сайта. Благодаря этому вам не нужно по 100500 раз регистрироваться в соц. сети и перенастраивать интерфейс под себя с нуля.

Как осуществляется настройка триггеров и cookie в опциях модального окна

Теперь про наш плагинчик с модальными окнами. Как я говорил ранее, есть в настройках модального окна блок с настройками триггеров и cookie. Эти опции позволяют настраивать показ и закрытие модального окна в зависимости от действий посетителя на сайте. На данный момент плагин позволяет запрограммировать ДО ТРЁХ триггеров на одну форму. Т е по сути вы можете показывать одно и то же модальное окно в трёх случаях:

  • При нажатии на кнопку или ссылку на странице,
  • Автоматически после того как прошёл определённый промежуток времени с момента перехода на сайт,
  • А так же в случае успешной отправки заявки с сайта.
Три типа триггеров в настройках модального окна.Опции настройки прекращений показа модального окна в настройках.

А с cookie еще проще. Вы можете управлять сохранением записей cookie и в дальнейшем показывать посетителям те или иные модальные окна на ваш выбор. Думаю из скриншота ниже вам все понятно без лишних слов.

Php форма обратной связи без перезагрузки

Всем — привет. Сегодня решил взяться за переработку статьи об ajax форме, которая открывалась в модальном окне. Статья достаточно популярна, но имела некоторые проблемы. Дело в том, что после отправки данных, выводилось сообщение об успешной отправке и не позволяло больше отправлять письма до перезагрузки страницы. Многие из вас спрашивали, как сделать так, чтобы сообщение не заменяло форму и позволяло повторно отправлять письма. В этой статье мы это исправим и не только.

Еще, у прошлой статьи был, наверное, недостаток в том, что сложно было подключить несколько форм, а именно, нужно было дублировать скрипт, обрабатывающий форму, что не очень красиво. В этой статье поправим и этот момент. Кроме того, форма будет работать и без модального окна.

Ах да, приведу в порядок айдишники и классы, чтобы легче понималось что и зачем. Изменю дизайн формы, так интереснее.

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

Как сделать форму обратной связи в модальном окне

Давайте приступим. Так как модальное окно будет вызываться при помощи jQuery плагина Remodal, то перед закрывающимся тегом

Обратная связь на сайте, перезагружающая страницу после каждой успешной отправки — мелочь, которая легко портит впечатление о сайте. Качественный сайт подобных «дырок» содержать не должен, потому разберём простой пример формы с асинхронной отправкой данных (без перезагрузки страницы) через AJax и JQuery.

Отправка формы без перезагрузки страницы:

  • не дезориентирует пользователя ненужной перезагрузкой страницы или редиректом,
  • позволяет ему продолжить навигацию по текущей странице,
  • снижает нагрузку на сервер,
  • работает приятней и «плавнее».

Как отправить форму без перезагрузки всей страницы? Просто отправлять нужные данные на сервер отдельными запросами, не затрагивая html.

AJAX + PHP + JQuery

Обычно «фидбэк» состоит из HTML-разметки, простенького скрипта, отправляющего данные на сервер и PHP-обработчика этих данных. В случае с фоновой отправки нам понадобится настроить ассинхронную отправку данных к обработчику. Самая простая связка для форм без перезагрузки страницы это PHP + Ajax.

Итак, чтобы отправить форму без перезагрузки дополнительно понадобится:

  • ajax-запрос — функция JavaScript, делающая асинхронную отправку введённых в форму данных к обработчику.
  • PHP-обработчик на сервере, который асинхронно обрабатывает переданные ему Ajax’ом данные. После обработки посылает скрипту ответ с результатом, Вам — заявку.
  • JQuery — библиотека для работы с JavaScript. При создании ajax-формы удобнее пользоваться ей, как и при работе с JS во многих других случаях.

Функцию Ajax можно использовать не только создания форм, но и для других задач, например для динамической подгрузки новостей на странице.

Готовая схема выглядит так:

Пользователь нажатием кнопки отправляет данные

файл JS отправляет их в PHP через Ajax, функцию JQuery

обработчик.PHP проверяет данные и возвращает пользователю через тот же скрипт сообщение об ошибке или успехе

в первом случае владелец сайта также получает готовую заявку.

Если необходимо исключить вероятность повторной отправки формы, ее можно скрыть.

Инструкция по созданию формы без перезагрузки

Прежде всего подключаем JQuery — вставляем строку в конце head сайта (перед тегом ).

Делаем простую форму (в тегах закрыты комментарии к коду, их желательно удалить):

Если вывод формы нужен на одной странице, просто вставляем в код . Если вывод нужен по всему сайту или на многих страницах — вышеописанный код вставляется в шаблон.

Собираем Java-Script. Его, можно добавить вместе с HTML кодом выше или загрузить отдельным файлом без первой или отдельной строки.

Обработчик, в JS элементе выше мы уже назвали его formx.php:

Файл formx.php закидываем в корневой каталог сайта (или прописываем соответствующий путь в url: нашего скрипта. JS-код размещается либо в head страницы, либо вместе с html.

Как видите, всё довольно просто — сделав всё в точности по инструкции, Вы получите простую, но рабочую форму на JQuery без перезагрузки страницы. Если что-то не получилось — задавайте вопросы в комментариях ниже, мы поможем.

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

Зато всё это делается в нашем конструкторе форм буквально в пару кликов и совершенно бесплатно (да, бывает и так).

Я много видел разных мудреных реализаций форм обратной связи в Интернете и думаю, что даже заядлый программист не сразу разберется в работе такого кода. А зачем, собственно говоря, усложнять работу, если все можно сделать как никогда просто, не так ли?

Сегодня я хотел бы показать самую простую и на 100% рабочую реализацию формы обратной связи без перезагрузки страницы с использованием технологии AJAX (jQuery) и обработки/отправки данных на PHP.

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

Технология AJAX, если вы еще не знаете, позволяет без перезагрузки страницы передать значения в PHP-скрипт (и не только), где, уже приняв эти данные, можно произвести необходимые операции.

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

Простой пример формы обратной связи без перезагрузки страницы

Поскольку для отправки формы мы будем использовать PHP, то не стоит делать акцент на том, что на вашем хостинге должна быть его поддержка.

1. Первым делом сверстаем форму с нашими полями. CSS-стили мы упустим, так как сейчас нам это не так важно. В качестве полей сделаем «Имя», «E-mail» и поле для ввода сообщения:

Обратите внимание на элемент с классом «result» – в него мы будем выводить сообщения об ошибках или успешном отправлении сообщения.

2. Далее пишем скрипт, который соберет все данные с формы и отправит их в наш PHP-обработчик:

Скрипт вставляем перед закрывающим тегом

Вордпресс всплывающая форма обратной связи

Приветствую вас дорогой читатель, в этой статье я покажу вам как создать форму обратной связи во всплывающем окне на вашем сайте WordPress. Часто при разработке собственного сайта или блога необходимо установить возможность оперативной связи с посетителями интернет-ресурса. В этом случае как раз и пригодится всплывающая форма обратной связи для wordpress, которая поможет наладить быстрый контакт с пользователями.

Для чего нужна всплывающая форма обратной связи для wordpress

Причины использования

Рассмотрим, для чего нужна такая форма

  1. Экономия свободного места на сайте. Контактная форма может быть размещена где угодно: в подвале или шапке, в основном контенте страницы, в виде плавающей кнопки и т.д.
  2. Эффективное появление. Анимация возникновения нового окна выглядит интересно и необычно
  3. Доступность. Оставить записи в этой форме можно с любого места сайта, пользователям не нужно возвращаться на главную страницу.

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

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

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

Contact Form 7

Данный плагин используется непосредственно для конструирования формы. Для его установки выполните следующие действия:

  1. Выберите опции меню «Плагины», а затем «Добавить новый»
  2. Вбейте в поисковую строку наименование плагина и нажмите на клавиатуре Enter
  3. Щелкните по кнопке «Установить»
  4. Активируйте плагин
Easy FancyBox

Данный плагин пригоден для разработки эффекта всплывающего окна. Последовательность установки Easy FancyBox аналогична установке предыдущего плагина.

Настройка плагинов

Настроить параметры дополнения Easy FancyBox можно через медиафайлы. Воспользуйтесь опциями меню «Настройки» -> «Медиафайлы».

В открывшемся блоке чуть ниже стандартных настроек будут расположены параметры самого плагина. Здесь обычно стоит галочка напротив пункта «Images», которая указывает на активирование выплывающего окна при клике по изображению. Желательно ее снять, так как при наличии других дополнительных инструментов создания всплывающей анимации будет происходить двойное открытие изображений.

Но это еще не все. Поставьте галочку напротив пункта «Inline content»

И обязательно щелкните по кнопке «Сохранить изменения»

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

Совет: если вы хотите, чтобы форма всегда была открыта, тогда снимите в настройках Easy FancyBox галочку напротив опции «Close FancyBox when overlay is clicked», выполняющей функцию закрытия окна при клике мышкой за его пределами.

Пошаговая инструкция

Ну вот, со «скучной» предварительной подготовкой покончено, теперь перейдем к самой «вкусной» части – как, собственно, разрабатывается всплывающая форма обратной связи wordpress.

Обработка окна формы

С чего начнем? Конечно же, с предварительной настройки самой формы. Выберите в правом меню пункт «Contact Form 7», а потом опцию «Добавить новую».

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

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

Выведение формы

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

Теперь щелкните по кнопке «Добавить виджет»

Вставьте в поле ввода «Содержимое» следующий программный код:

Вот так будет выглядеть получившийся результат:

Учитывайте, что вместо указанного в примере шорткода вам надо будет указать тот, который образовался у вас в результате создания новой формы.

Дополнительно форму можно отредактировать: добавить или убрать поля ввода, ввести начальный и/или конечный текст до и после формы, преобразовать текст в заголовок или вывести его отдельным блоком, использовать различные стили, плэйсхолдеры и т.д. Были бы время и желание!

Стилизация ссылки

Рассмотрим также два способа преобразования ссылки в кнопку для улучшения ее визуального отображения.

1 способ – использование дополнительных стилей темы.

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

  1. Щелкнув в правом меню «Внешний вид», а затем по опции «Редактор». В открывшемся окне в самом конце пропишите исходный код и нажмите на кнопку «Обновить файл»
  2. Выбрав «Внешний вид» -> «Настроить» -> «Дополнительные стили». Сюда также можно добавить ваши CSS-стили

Сам программный код выглядит так:

Получилась такая кнопка:

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

2 способ – использование изображения в виде кнопки. Сначала загрузите на сайт необходимую картинку (любую по вкусу, не обязательно в виде кнопки, — это не имеет особого значения). Для этого щелкните на «Медиафайлы» -> «Добавить новый» и выберите нужный рисунок. Справа от изображения появится постоянная ссылка на файл (в данном примере http://www.sait.ru/wp-content/uploads/2017/04/depositphotos_2169498-E-mail-internet-icon.jpg), скопируйте ее и добавьте в код (кавычки не удалять):

Полученный код добавьте в основной код вывода формы вместо текста «Написать письмо».

На моем сайте отобразилась кнопка, приведенная на скриншоте ниже:

А вот так будет выглядеть кнопка, если оставить дополнительный стиль, описанный в первом способе:

Добавление в меню

Чтобы всплывающая форма обратной связи для wordpress могла вызываться прямиком из меню, необходимо воспользоваться следующим кодом

Сначала нужно разобраться, куда именно необходимо вставить этот код. Зайдите в «Редактор» через «Внешний вид» и среди шаблонов выберите «Заголовок (header.php)»

Теперь отыщите то место, где расположен код меню. Найдите следующую информацию:

Ниже вставьте ваш код как раз перед закрывающим тегом.

В итоге ссылка «Написать письмо» станет частью меню и послужит средством вызова контактной формы.

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

В этом уроке, я хочу использовать две формы обратной связи: самописную на Ajax и Contact Form 7 на плагине.

В идеале, я покажу вам как создать всплывающую форму обратной связи, она же popup contact form 7 или любая другая произвольная форма обратной связи в модальном окне.

Эта статья подойдет как начинающим программистам, которым нужна всплывающая форма обратной связи у виде готового кода, так и более продвинутым.

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

Навигация по странице:

Не бойтесь нажимать, вы перейдете сразу к просмотру нужной информации

За все время работы WEB – программистом я создал и повидал не одну сотню всплывающих форм: как самописных так и на базе готовых модальных окон типа fancybox, lightbox и тому подобное. По этому, опираясь на свой опыт я вывел для себя самый удобный и простой вид всплывающих модальных окон, белая форма на полупрозрачном черном фоне, им я с вами и хочу поделиться.

Форма обратной связи в модальном окне

к менюДля более продвинутых пользователей я сейчас опишу 3 составляющих кода (яваскрипт, хтмл, цсс) для создания и работы модального окна. Далее, я покажу как этот код интегрировать в CMS WordPress для пользователей, которые не сильно разбираются в программировании. Перейти сразу к интеграции всплывающей формы на сайт вордпресс для начинающих можно нажав на этот линк.

Если вы хотите просмотреть код и скопировать его к себе на сайт нажимайте по очереди вкладки Html, CSS, Javascript ниже:

Всплывающая форма Html код

Это хтмл код для вставки в произвольное место родительского тега body. Лучше всего вставлять в конец страницы, перед закрывающимся тегом

Уроки разработки из собственного опыта

Автор: Николаенко Максим · Опубликовано Февраль 7, 2013 · Обновлено Август 4, 2019

Недавно один из посетителей задал вопрос, как создать всплывающую контактную форму? Предлагаю вам создать такую форму при помощи двух плагинов Contact Form 7 и Easy FancyBox.

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

После создания формы необходимо создать страницу и вставить в нее шорткод формы:

Итак, форма у нас есть, осталось заставить появляться ее во всплывающем окне, для этого подменяем шорткод формы на следующий код.

Битрикс — Продуманная форма обратной связи на Bootstrap 3

Установка стандартная.

После установки доступен компонент «Форма обратной связи — SLAM».
На вкладке «сервисы» появится раздел модуля с таблицей общих результатов формы.

Если в визуальном редакторе вы не видите компонента — то вам необходимо обновить кеш в редакторе вот так https://s.mail.ru/Mm8i/nkwPYrdLM

Одна из самых частых проблем это создание дополнительных полей у формы. Делается это правильно вот так https://s.mail.ru/DHj8/8zn8ymXaZ

У формы предусмотрено 4 события:
OnBeforeFieldsValue($code, &$val) — перед первичной обработкой всех полей
OnBeforeIBlockElementAdd(&$arLoadProductArray, &$arParams, &$arPostFields, &$arServiceFields, &$file_id) — перед добавлением в ИБ (если включена такая опция в параметрах компонента)
OnAfterIBlockElementAdd($idElement, &$arParams, &$arPostFields, &$arServiceFields, &$file_id) — после добавления в ИБ (если включена такая опция в параметрах компонента)
OnAfterAdditionalMessage(&$arAdditionalMessage, &$arParams, $idElement, $arPostFields) — после отправки письма

Инструкция по работе с событиями в Битрикс https://dev. 1c-bitrix.ru/learning/course/index.php?COURSE_ID=43&LESSON_ID=3493&LESSON_PATH=3913.4619.3493

Для тонкой настройки валидации используйте поле «Дополнительные параметры валидации» в настройках каждого отдельного поля. Параметры могут быть следующими:
data-bv-notEmpty=»true» — проверка является ли поле пустым
data-bv-notEmpty-message=»сообщение»  — выводит заданное сообщение при пустом поле

data-bv-stringlength=»true» — вкл валидацию по кол-ву символов — при использовании HTML, в HTML5 не требуется
data-bv-stringlength-min=»6″ — мин значение длины
data-bv-stringlength-max=»30″ — макс значение длины
data-bv-stringlength-message=»сообщение» — сообщение при невалид

data-bv-numeric=»true» — вкл валидацию чисел
data-bv-numeric-separator=»,» — десятичный разделитель, может быть либо «.» (точка, по умолчанию), либо «,»(запятая)
data-bv-numeric-message=»сообщение» — сообщение при невалид

data-bv-lessthan=»true» — сравнение введёного значения с заданным, введёное должно быть меньше
data-bv-lessthan-value=»значение» — задание макс. [a-zA-Z0-9_\.]+$» — задание регулярного выражения
data-bv-regexp-message=»»- сообщение при невалид

data-bv-uri=»true» — вкл валидацию uri адреса
data-bv-uri-allowlocal=»true» — учитывать частную или локальную сеть
data-bv-uri-message=»сообщение» — сообщение при невалид

data-bv-emailaddress=»true» — вкл валидацию e-mail
data-bv-emailaddress-message=»сообщение» — сообщение при невалид
data-bv-emailaddress-multiple=’true’ —  Разрешить несколько адресов электронной почты, разделенных запятой или точкой с запятой.
data-bv-emailaddress-separator=»» — регулярное выражение для символа или символов, ожидаемых в качестве разделителя между адресами. По умолчанию это / [,;] /, то есть запятая или точка с запятой

data-bv-phone=»true» — вкл валидацию номера телефона
data-bv-phone-country=»CODE» — CODE — SO-3166 код страны, которой пренадлежит проверяемый номер, по умолчанию US
data-bv-phone-message=»сообщение» — сообщение при невалид

data-bv-hexcolor=»true» — вкл валидацию цвета в формате HEX
data-bv-hexcolor-message=»сообщение» — сообщение при невалид

data-bv-identical=»true» — вкл валидацию на идентичность полей
data-bv-identical-field=»field» — Название поля, которое будет использоваться для сравнения с текущим полем
data-bv-identical-message=»сообщение» — сообщение при невалид

data-bv-greaterthan=»true» — сравнение введёного значения с заданным , введёное должно быть больше
data-bv-greaterthan-value — задание мин. значения для сравнения
data-bv-greaterthan-inclusive — при значении true введённое число должно быть больше либо равно заданому числу, при false строго больше
data-bv-greaterthan-message=»сообщение» — сообщение при невалид

data-bv-date=»true» — вкл валидацию даты
data-bv-date-format — формат даты, по умолчанию MM/DD/YYYY
data-bv-date-message=»сообщение» — сообщение при невалид
data-bv-date-separator=».» — устанавливат разделитель день.месяц.год

data-bv-ip=»true» — вкл валидацию ip
data-bv-ip-ipv4=»true» — вкл валидацию IPv4
data-bv-ip-ipv6=»true» — вкл валидацию IPv6
data-bv-ip-message=»сообщение» — сообщение при невалид

Форма обратной связи

Написал призыв к действию для формы обратной связи Девхаба и решил призывом не ограничиваться, а сочинить весь диалог пользователя с feedback-формой мечты. Расскажу, как бы она могла себя вести и что уметь, а потом попробую объяснить, почему такую сложно сделать.

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

Выбор способа общения с пользователем зависит от задач сайта. Для срочных и быстрых вопросов пользователю удобнее заказать звонок или открыть чат с оператором, но нужно, чтобы кто-то дежурил на линии. Форма обратной связи работает как почта, просто с ней удобнее: не нужно копировать адрес, открывать почтовый сервис и нажимать лишние кнопки.

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

Взаимодействие с формой состоит из четырёх этапов:

  1. Пользователь замечает кнопку обратной связи и решает посмотреть, что там.
  2. Страница проматывается на форму или открывается модальное окошко. Пользователь читает-заполняет или уходит с формы и дальше ничего не происходит.
  3. Форма отправляет сообщение.
  4. Пользователь читает подтверждение об отправке, диалог завершается.

Совсем хорошо, если форма запоминает введённые данные. Пользователю будет приятно, если он случайно закроет заполненную форму и решится вводить всё заново. Особый шик — помнить, что пользователь уже писал и менять текст кнопки на что-то вроде «Написать ещё».
Способ показа формы зависит от сценария взаимодействия. Форму совсем необязательно прятать в модальное окно. Ей можно отвести отдельный этаж и проматывать страницу по нажатию кнопки в меню. Это уместно на лендингах, но не подходит, когда на странице уже есть форма или когда мы не хотим усложнять структуру.

Я предпочитаю формы в модальных окнах: они понятно переключают внимание, не мешают на страницах не про продажу, их проще закрывать щелчком за пределами окна. Поэтому дальше я пишу про формы в модальных окнах.

Элементы формы

  1. Модальное окошко с подложкой, которая затеняет страницу. Если форма большая, её можно разворачивать на весь экран с анимацией. Окошко должно влезать в экран и блокировать прокрутку страницы, чтобы после закрытия формы пользователь оказался там же, где начал диалог.
  2. Заголовок, чтобы было понятно, чего форма хочет от пользователя.
  3. Призыв к действию, объясняющий что и зачем писать, какая от этого будет польза, кто ответит и когда.
  4. Поля ввода, которых должно быть как можно меньше. Согласно модным представлениям о психической энергии, мозг охотнее выделит энергию на простое действие с понятным смыслом.
  5. Кнопка «Отправить». Неактивна, пока обязательные поля пусты.
  6. Подтверждение об отправке. Если отправка занимает полсекунды, показываем спиннер, чтобы пользователь не подумал, что всё сломалось.
  7. Крестик, закрывающий форму. Кнопка «Закрыть» не нужна, форма закрывается по крестику или клику за пределами окошка.
  8. Предупреждение со ссылкой на политику конфиденциальности. Если юрист разрешит, её можно её убрать в подвал.

Кнопка, открывающая форму, должна быть заметной, доступной и с понятной формулировкой. В то же время она не должна навязчиво лезть в глаза, повисая при прокрутке в углу экрана и пульсируя. Ну, если только мы не продаём курсы по продажам курсов продаж.

В идеале кнопка обратной связи живёт в навигационном меню, которое сжимается или прячется при прокрутке.

Надпись на кнопке, заголовок и призыв зависят от наших ожиданий и целей. Если мы делаем сайты и предлагаем заполнить бриф, пишем на кнопке «Заполнить бриф» или «Оставить заявку». Если занимаемся разработкой и ищем проект — «Предложить проект».

Бывают случаи сложнее. Например, мы — технологический партнёр для стартапов, продаём рабочие часы специалистов, делаем всё сами или собираем инхаус-команды, консультируем, проводим бизнес-анализ. Что-то одно не напишешь, вся надежда, что пользователь заинтересуется и решит посмотреть. Вот тут-то мы ему и расскажем самое важное.

Кнопка про всё сразу на странице вымышленной компании

Вот как вся эта красота может выглядеть у компании с широким профилем:

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

Можно было бы оставить одно поле для телефона или почты и разбирать его регулярными выражениями, но есть гипотеза, что для переговоров по проектам нам понадобится и то и другое. Чтобы не путать пользователя вводом в одно поле, разносим их на отдельные.

Телефон и почта — традиционные каналы связи в деловой среде, но если целевая аудитория предпочитает мессенджеры, уместнее спрашивать логин в Телеграме/Скайпе или аккаунт ВК/ФБ.

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

Форму можно научить полноценному диалогу, прописав подсказки для разных ситуаций. Указан телефон — предлагаем указать почту, чтобы не диктовать её. Пользователь ввёл почту, предлагаем указать телефон, чтобы позже обсудить детали.

Чтобы пользователь заполнил побольше, мотивируем его разумными объяснениями: укажите почту, чтобы не диктовать её по буквам, мы вышлем вам презентацию.

К обработке формы можно прикрутить CRM и квалифицировать заявки по заполненным полям. Например, если пользователь указал имя, почту, сообщение и приложил файлы, ставить заявку в приоритетные лиды. Заявки с одним номером телефона — как запрос звонка, а в ответ на имя и почту автоматически высылать презентацию. А потом подключить нейронную сеть, чтобы она определяла вес лида по тексту сообщения и отвечала на типовые вопросы.

Для начала можно научить форму определять день недели и выводить корректную подпись под полем телефона:

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

Телефонный номер приводим к нужному формату после ввода, чтобы не сбивать пользователя и не мешать вставлять номер автоподстановкой или по Ctrl + V.

Поле сообщения меняет размер, чтобы пользователь видел весь текст без прокрутки. Если форма не помещается в один экран, она вытягивается целиком, без полос прокрутки внутри модального окна. Так удобнее скроллить и понятно, что внизу ещё что-то есть.

Если страница короче получившегося окна, можно скролить само окно относительно неподвижной страницы.

Ничего не мешает изложить дело обстоятельно

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

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

Фрагмент формы с недопустимым файлом

После отправки показываем подтверждение и кнопку с утвердительной формулировкой, которая закрывает окно. Я за то, чтобы подтверждение появлялось в том же модальном окне. Размер окна можно плавно менять, но окно должно оставаться тем же, чтобы не сбивать с толку.

Форма может понимать, что именно пользователь сообщил, и показывать соответствующее подтверждение. Указал почту — когда напишем, для телефона — когда ждать звонка. А если указал всё и приложил файлы, расскажем, что будет дальше.

Мы позвоним вам на этой неделе до 17:00 по Москве.

Мы позвоним вам в понедельник с 10:00 по Москве.

Мы изучим материалы и напишем вам в начале следующей недели.

А теперь немного прагматичного реализма.

Почему такую форму сложно сделать. Причины две: конечность ресурсов и ограничения движков и виджетов.

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

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

Разработчикам остаётся отдавать допил формы в качестве испытательного задания, а остальным — ждать виджета или плагина. Но если ваша форма активно продаёт, то делать её, конечно же, стоит на все деньги.

Обращайтесь к нам ;3

Как установить форму обратной связи

В этом материале будут детально описана установка, настройка и использование формы обратной связи Joomly Contactus.

 

Откройте в панели администратора раздел «Расширения -> Менеджер расширений» («Extensions -> Extensions manager») на вкладке «Загрузить файлы пакета». Выберите архив  «contactus.zip» и установите его. Скачать форму обратной связи можно по этой ссылке.

В разделе «Расширения -> Менеджер модулей» («Extensions -> Module manager») откройте модуль под названием Contactus. Вам будут доступны две вкладки с настройками формы — основная («Модуль») и «Аналитика» (предназначенная для настройки целей в Google Analytics и Яндекс Метрике). В премиум версии появляется вкладка «Создание полей», в которой вы можете создать свою собственную форму.

Вкладка модуль разбита на 3 блока. В первом блоке вы сможете задать почту для получения сообщений, заголовок сообщений, цветовое решение, определить отображаемые поля и обязательность их заполнения (в базовом и стандартных вариантах), а также задать способ выравнивания формы. В случае подключения капчи, вам будет предложено заполнить два поля с sitekey и secret key. Оба этих ключа вы можете получить абсолютно бесплатно на подсайте google после регистрации вашего сайта.

 

Во втором блоке находятся настройки всплывающей формы обратной связи, для случаев когда вам необходимо показывать форму в модальном окне. Здесь вы можете выбрать тип формы (обычная или всплывающая), задать заголовок формы, сообщение об отправке, текст на кнопке вызова. Также  указать каким элементов вызывать форму. Вариант «Без элемента» предназначен для случая, когда форма вызывается каким-то вашим элементом (картинкой, ссылкой и тп), он описан в этой статье. «Кнопка» — вызов формы происходит по клику на обычную кнопку, «Прилипающая кнопка» — кнопка будет закреплена в нижней части экрана и будет отображаться всегда, в том числе при скроллинге.

 

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

На вкладке «Аналитика» вы можете задать цели для Google Analytics и Яндекс Метрики. Это позволит вам отслеживать отправки формы в вашей системе аналитики.

Владельцы премиум версии имеют возможность создать свою собственную форму на вкладке «Создание полей».  


Вы можете создать свои элементы (поле, список, email, чекбокс, текст и тп), указывать обязательность их заполнения а также связи, на этом вопросе я остановлюсь чуть подробнее.Бывают случаи, когда какое-то поле должно отображаться в зависимости от содержимого другого поля или элемента. Для реализации этих ситуаций в конструкторе предусмотрен столбец под названием «Зависимое поле». В нем через двоеточие указывается порядковый номер «родительского» элемента и его значение, при котором искомый элемент должен отображаться. Если родительским элементом является чекбокс, то в нажатом состояние его значение равно единице, в ненажатом нулю. Для списка указывается номер выбранного варианта. Для текстового поля просто его значение.

Рассмотрим пример со скриншота выше, когда поле «Название модуля» у нас отображается только в том случае, если в списке с типом проблемы был выбран вариант «Технические проблемы». Для этого в инпуте «Зависимое поле» мы ввели порядковый номер «родительского» элемента (в нашем случае списка под номер #3, номер можно посмотреть в первом столбце) и через двоеточие номер варианта (в нашем случае #1 вариант) при котором поле будет отображаться.

На вклдаке SMS вы можете настроить sms-оповещения о полученных сообщениях. Чтобы воспользоваться этой функцией вам будет необходимо зарегистрироваться по адресу joomly.sms.ru и вставить свой номер телефона и API id, который вы найдете в профиле после регистрации в соответствующие поля настроек. Замечу что услуга отправки смс платная, на момент написания статьи пользователю предоставлялось 5 бесплатных смс в день, каждое следующее стоило 80 копеек. Все тарифы определяются поставщиком услуги — sms.ru.

Если вы хотите добавить форму связи на какую-то определенную страницу, например страницу с контактами, откройте в редакторе этот материал и добавьте в нужное место следующую конструкцию: {loadmodule mod_contactus} — это код загрузки модуля в Joomla.

 

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

Если вы хотите вызывать форму «Прилипающей кнопкой», задайте ей любую используемую позицию шаблона.

Если вы хотите вызывать форму по клику на пункт меню, прочитайте эту статью.

Если хотите вызывать по клику на свой элемент (картинку, ссылку и тп), прочитайте эту.

О том, как добавить несколько форм на сайт, читайте здесь.

 

 

 

15 примеров всплывающих окон для эффективного сбора отзывов

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

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

Кто может лучше помочь вам стать лучше, чем ваши клиенты?

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

В этой статье мы собираемся показать 15 реальных примеров всплывающих окон, используемых для запроса обратной связи. Каждое всплывающее окно / боковая панель имеет свои преимущества и недостатки; всем этим мы поделимся с вами. Прочитав этот список, вы сможете узнать, что работает; или работал на других; и что это нехорошо.

1.Flip.hu

Что хорошо делает это всплывающее окно:

  • У него очень красивый дизайн , который соответствует эстетике веб-сайта.
  • Есть только один вопрос, , поэтому люди с большей вероятностью ответят.

Что можно было оптимизировать или протестировать A / B:

  • Сам вопрос слишком длинный, стоило бы проверить это с , более короткой и простой версией , т.е.ж .: Почему вы не заказали пакет Flip?
  • Цвет кнопки может иметь больший контраст , поэтому он будет более привлекательным.

2. Hittedzes.hu

В чем хорошо разбирается это всплывающее окно:

  • Это отличная идея, чтобы спросить клиентов, когда они хотят тренировать ! Таким образом, есть гарантия, что тренажерный зал будет заполнен.
  • Заголовок «Ваше мнение имеет значение» привлекает внимание

Что можно оптимизировать или провести A / B-тестирование:

  • Всплывающее окно стиль не соответствует веб-сайту .С небольшими изменениями, например, перекрашиванием, это можно легко исправить.

3. Tfsloans.co.uk

Что это всплывающее окно хорошо работает:

  • У него уникальный дизайн , который совпадает с сайтом.
  • С помощью одного простого вопроса они узнают много о том, где их посетители слышали о них

Что можно было оптимизировать или протестировать A / B:

  • Всплывающее окно появляется сразу после посетителя появляется на странице , было бы лучше, если бы оно появилось через несколько секунд, чтобы посетители не нажимали кнопку X автоматически.Позвольте нашим посетителям сначала ознакомиться с нашим выбором.
  • Если покажет наиболее частые ответы , у них будет больше людей, ответивших на вопрос.

4. Hajoutkell.hu

Что хорошо делает это всплывающее окно:

  • Они используют красивые, привлекающие внимание цвета.
  • Заголовок; «Ваше мнение важно для нас, помогите, пожалуйста!» заголовок привлекает внимание.
  • Короткий простой текст помогает понять вопрос и увеличивает количество ответов.

Что можно оптимизировать или провести A / B-тестирование:

  • Несмотря на то, что дизайн хорош, он менее соответствует внешнему виду веб-сайта.
  • Действительно, знать, нашел ли покупатель то, что искал, дает отличную обратную связь; стоит предоставить вариант, в котором они могут сказать, что еще им было бы интересно.

5

. Physio-vit.net

Что хорошо делает это всплывающее окно:

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

Что можно было оптимизировать или протестировать A / B:

  • Цвет кнопки может быть более контрастным.
  • Стоит затемнить фон за всплывающим окном , чтобы ваше сообщение было легче увидеть.

6. Zenmountaingear.com

Чем хороша эта боковая панель:

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

Что можно оптимизировать или протестировать A / B:

  • Цвет боковой панели может быть более контрастным, — для привлечения внимания.
  • Также стоит изменить цвет кнопки — побуждая посетителей заполнять форму.

7. Cncpart.hu

Чем хорошо это всплывающее окно:

  • Боковая панель соответствует дизайну веб-сайта .
  • К тому времени, как запрашивает адрес электронной почты , их список рассылки тоже растет.

Что можно оптимизировать или провести A / B-тестирование:

  • При сборе отзывов стоит задать конкретный вопрос . Потому что это расплывчато; покупатель может не знать, о чем оставить отзыв.
  • При запросе адреса электронной почты рекомендуется предоставить стимул, например скидку, для повышения ставки.
  • Описание под заголовком должно состоять максимум из 2 строк; это позволяет посетителю быстрее найти основные моменты.

( Примечание: Хотите узнать, как создавать приятные впечатления от покупок для каждого покупателя? Нажмите здесь и загрузите нашу бесплатную электронную книгу, которая содержит более 70 страниц советов и передовых методов.)

8. Mojshop .rs

Чем хорошо это всплывающее окно:

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

Что можно оптимизировать или провести A / B-тестирование:

  • Желтый цвет привлекает внимание, поэтому стоит использовать в других местах , например в заголовке.

9.

Tiendabvc.com

Чем хорошо это всплывающее окно:

  • Заголовок мгновенно привлекает внимание уходящих посетителей : Погодите!
  • Это всплывающее окно предназначено для посетителей, покидающих корзину, поэтому владелец интернет-магазина может принять во внимание все отзывы и уменьшить количество отказов, оставленных корзиной.

Что можно оптимизировать или протестировать A / B:

  • Изображение на заднем плане делает всплывающее окно туманным и не влияет на общую цель всплывающего окна.Поэтому мы бы посоветовали протестировать это всплывающее окно с другим фоном .
  • Для более целостного вида рекомендуется использовать один вид выравнивания текста (только по центру, только слева).
  • С более контрастным цветом кнопки можно увеличить рейтинг кликов.

10. Mygeekgalaxy.com

Что хорошо делает это всплывающее окно:

  • Заголовок «Прежде чем вы уйдете…» привлекает внимание.
  • Когда запрашивает адрес электронной почты , список рассылки растет одновременно.

Что можно было оптимизировать или протестировать A / B:

  • Всплывающее окно не соответствует дизайну веб-сайта, это можно исправить с помощью нескольких модификаций.
  • Скидка со скидкой 10% повысит вероятность обратной связи, потому что это своего рода мотивация, на которую люди хорошо реагируют.

11.Mygeekgalaxy.com

Что делает эта боковая панель хорошо:

  • Она использует привлекающих внимание цветов , но не мешает работе пользователей.

Что можно было оптимизировать или протестировать A / B:

  • Отображая наиболее частые ответы, больше людей будут давать обратную связь.

12. Viebelles.com

Чем хороша эта боковая панель:

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

Что можно оптимизировать или провести A / B-тестирование:

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

13. Tsfloans.co.uk

Чем хорошо это всплывающее окно:

  • Уникальный дизайн, соответствует сайту.
  • Они нацелены на уходящих клиентов, чтобы иметь возможность улучшить свои услуги и веб-сайт.

Что можно оптимизировать или провести A / B-тестирование:

  • Фоновое изображение не соответствует содержимому всплывающего окна и отвлекает; лучше бы без картинки на фоне .
  • Когда есть варианты выбора, всегда хорошо, чтобы также включал опцию «Другое».

14. Allinpackages.co.uk

Что хорошо делает это всплывающее окно:

  • Как и предыдущее, это также появляется после покупки , когда клиенты наиболее заинтересованы и более вероятны поделиться своим мнением
  • Он показывает , чего нам ожидать : ответьте на 3 вопроса.
  • Скидка 10% служит мотивацией для покупателя.

Что можно было бы оптимизировать или протестировать A / B:

  • Стоит предоставить на больше белого пространства со всех 4 сторон, чтобы сценарий боковой панели было легче читать.
  • Так как это сообщение появляется после покупки, мы ни в чем не мешаем посетителю. Итак, в этом случае, возможно, всплывающее окно даст более высокие результаты.
  • стоит не использовать столько жирного текста .

15. Allinpackaging.hu

Чем хороша эта боковая панель?

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

Что можно было оптимизировать или протестировать A / B:

  • Поскольку это сообщение появляется после покупки, мы ни в чем не мешаем посетителю.Итак, в этом случае, возможно, всплывающее окно даст более высокие результаты.
  • Слишком много полужирного текста , что затрудняет чтение боковой панели; он не может быть прочитан правильно за 1-2 секунды.

Вот почему так важны всплывающие опросы

Запрашивая отзывы посетителей, вы даете им возможность поделиться тем, что бы они изменили на вашем сайте. Рядом с этим вы можете получить ответы на вопросы, почему они уходят, не купив. И сообщения на месте помогают нам в этом!

В этой статье мы показали вам 15 кампаний обратной связи, все из которых были созданы пользователями OptiMonk, чтобы дать вам практический совет, если вы хотите собрать отзывы самостоятельно.

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

Модальная форма Bootstrap 4 — примеры и руководство. Базовое и расширенное использование

Компиляция и настройка

Чтобы еще больше уменьшить вес пакета MDBootstrap, вы можете скомпилировать свой собственный пакет, содержащий только эти компоненты и функции, которые вам нужны.

Если вам нужна дополнительная помощь в компиляции вашего пользовательского пакета, воспользуйтесь нашим руководством по компиляции и настройке.

Руководство по компиляции и настройке

Карта зависимостей файлов SCSS в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все бесплатные и профессиональные файлы требуют файлов из каталога 'core'

    'none' означает 'этот компонент не требует ничего, кроме файлов ядра'

    Файл, завернутый в ``, означает, что этот файл делает базовый компонент красивее, но это не обязательно для правильной работы.

    Все компоненты PRO требуют 'pro / _variables.scss 'файл

    scss /
    |
    | - ядро ​​/
    | |
    | | - бутстрап /
    | | | - _functions.scss
    | | | - _variables.scss
    | |
    | | - _colors.scss
    | | - _global.scss
    | | - _helpers.scss
    | | - _masks.scss
    | | - _mixins.scss
    | | - _typography.scss
    | | - _variables.scss
    | | - _waves.scss
    |
    | - бесплатно /
    | | - _animations-basic.scss -> нет
    | | - _animations-extended.scss -> _animations-basic.scss
    | | - _buttons.scss -> нет
    | | - _cards.scss -> нет
    | | - _dropdowns.scss -> нет
    | | - _input-group.scss -> _forms.scss, _buttons.scss, _dropdowns.scss
    | | - _navbars.scss -> нет
    | | - _pagination.scss -> нет
    | | - _badges.scss -> нет
    | | - _modals.scss -> _buttons.scss, _forms.scss (PRO -> _tabs.scss)
    | | - _carousels.scss ->
    | | - _forms.scss -> нет
    | | - _msc.scss -> нет
    | | - _footers.scss нет (PRO :)
    | | - _list-group.scss -> нет
    | | - _tables.scss -> нет (PRO: _material-select.scss, pro / _forms.scss, _checkbox.scss, pro / _buttons.scss, pro / _cards.scss, _pagination.scss, pro / _msc.scss )
    | | - _depreciated.scss
    |
    | - pro /
    | |
    | | - сборщик /
    | | | - _default.scss -> нет
    | | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss
    | | | - _default-date.scss -> _default.scss, бесплатно / _forms.scss
    | |
    | | - разделы /
    | | | - _templates.scss -> _sidenav.scss
    | | | - _social.scss -> бесплатно / _cards.scss, бесплатно / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss,
    | | | - _team.scss -> бесплатно / _buttons.scss, pro / _buttons.scss, free / _cards.scss, pro / _cards.scss
    | | | - _testimonials.scss -> бесплатно / _carousels.scss, pro / _carousels.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _magazine.scss -> _badges.scss
    | | | - _pricing.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _contacts.scss -> бесплатно / _forms.scss, pro / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | |
    | | - _variables.scss
    | | - _buttons.scss -> бесплатно / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss
    | | - _social-buttons.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | - _tabs.scss -> _cards.scss
    | | - _cards.scss -> бесплатно / _cards.scss
    | | - _dropdowns.scss -> бесплатно / _dropdowns.scss, бесплатно / _buttons.scss
    | | - _navbars.scss -> бесплатно / _navbars.scss (PRO :)
    | | - _scrollspy.scss -> нет
    | | - _lightbox.scss -> нет
    | | - _chips.scss -> нет
    | | - _msc.scss -> нет
    | | - _forms.scss -> нет
    | | - _radio.scss -> нет
    | | - _checkbox.scss -> нет
    | | - _material-select.scss -> нет
    | | - _switch.scss -> нет
    | | - _file-input.scss -> бесплатно / _forms.scss, бесплатно / _buttons.scss
    | | - _range.scss -> нет
    | | - _input-group.scss -> free / _input-group.scss и то же, что и свободная группа ввода, _checkbox.scss, _radio.scss
    | | - _autocomplete.scss -> бесплатно / _forms.scss
    | | - _accordion.scss -> pro / _animations.scss, бесплатно / _cards.scss
    | | - _parallax.scss -> нет
    | | - _sidenav.scss -> бесплатно / _forms.scss, pro / _animations.scss, разделы / _templates.scss
    | | - _ecommerce.scss -> бесплатно / _cards.scss, pro / _cards.scss, бесплатно / _buttons.scss, pro / _buttons.scss, pro / _msc.scss
    | | - _carousels.scss -> бесплатно / _carousels.scss, бесплатно / _cards.scss, бесплатно / _buttons.scss
    | | - _steppers.scss -> бесплатно / _buttons.scss
    | | - _blog.scss -> нет
    | | - _toasts.scss -> бесплатно / _buttons.scss
    | | - _animations.scss -> нет
    | | - _charts.scss -> нет
    | | - _progress.scss -> нет
    | | - _scrollbar.scss -> нет
    | | - _skins.scss -> нет
    | | - _устарело.scss
    |
    `- _custom-skin.scss
    `- _custom-styles.scss
    `- _custom-variables.scss
    `- mdb.scss

Карта зависимостей модулей JavaScript в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все файлы требуют jQuery и bootstrap.js

    js /
    ├── dist /
    │ ├── buttons.js
    │ ├── cards.js
    │ ├── character-counter.js
    │ ├── chip.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── раскрывающийся список.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src /
    │ ├── buttons.js
    │ ├── карты.js
    │ ├── character-counter.js
    │ ├── chip.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── dropdown.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    └── продавец /
        ├── аддоны /
        │ ├── datatables.js
        │ └── datatables.min.js
        ├── chart.js
        ├── extended-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js -> vendor / jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js -> vendor / hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js -> vendor / picker.js
        ├── picker.js
        ├── picker-time.js -> vendor / picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js

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

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

Чтобы упростить задачу, мы создали видеоурок о том, как добавить всплывающее окно контактной формы, которое вы можете посмотреть ниже.

Подписаться на WPBeginner

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

Шаг 0: Начало работы

Для этого урока вам необходимо установить и активировать два плагина.

Во-первых, вам нужен профессиональный план OptinMonster, который поставляется с типом формы Canvas. OptinMonster — лучший плагин для всплывающих окон WordPress на рынке, который помогает конвертировать посетителей сайта в подписчиков и клиентов.

Далее вам понадобится плагин контактной формы, такой как WPForms, Gravity Forms, Contact Form 7 и т. Д.

Для этой статьи мы будем использовать бесплатную версию нашего любимого плагина для контактной формы: WPForms Lite.

Мы предполагаем, что вы установили и активировали оба плагина. Если вам нужна помощь, ознакомьтесь с нашим пошаговым руководством по установке плагина WordPress.

Отказ от ответственности: WPForms и OptinMonsters созданы основателем WPBeginner Сайедом Балхи.

Сказав это, перейдем к созданию контактной формы в WordPress.

Шаг 1. Создание контактной формы с помощью WPForms

Сначала вам нужно создать новую контактную форму с WPForms. Если у вас уже есть контактная форма, созданная с помощью WPForm, вы можете пропустить этот шаг.

Щелкните меню WPForms на боковой панели администратора WordPress, а затем нажмите кнопку «Добавить».

Это запустит конструктор форм. Просто введите имя для своей формы, например, «Свяжитесь с нами» и затем щелкните шаблон «Простая контактная форма», чтобы продолжить.

Конструктор форм перенесет вас в редактор полей. Вы можете добавлять или удалять поля из формы или изменять их порядок простым перетаскиванием.

Когда вы закончите, вам нужно нажать кнопку «Сохранить», чтобы сохранить изменения.Ваша контактная форма готова.

Вам необходимо посетить страницу WPForms »Все формы . Здесь вы найдете свою контактную форму. Рядом с ним вы найдете шорткод. Этот шорткод понадобится вам на следующем шаге.

Если вам нужны более подробные инструкции, ознакомьтесь с нашим пошаговым руководством о том, как создать контактную форму в WordPress.

Теперь, когда у нас готова контактная форма, перейдем к следующему шагу и создадим всплывающее окно лайтбокса в WordPress.

Шаг 2. Создание всплывающего окна WordPress с помощью OptinMonster

Первое, что нам нужно сделать, это создать модальное всплывающее окно с помощью OptinMonster.

Вам необходимо создать новую подписку, щелкнув OptinMonster в меню администратора WordPress, а затем нажав кнопку «Создать новую подписку».

Это приведет вас на сайт OptinMonster, где вы создадите свое всплывающее окно. Сначала вам нужно указать название своей кампании. Вы можете назвать его как хотите, например, «Всплывающее окно контактной формы».

Далее вам нужно выбрать свой веб-сайт из выпадающего меню. Нажмите на холст под опцией «Выберите свой дизайн».

OptinMonster покажет вам доступные шаблоны. В настоящее время для Canvas доступен только шаблон доски. Щелкните шаблон, чтобы продолжить.

Это приведет вас к экрану Optin Customizer. Вы заметите, что холст пустой по дизайну. Это сделано таким образом, поэтому вы можете добавить практически все, что захотите, используя возможности OptinMonster.Вы можете добавить форму регистрации, Facebook-лайк, опросы, коды купонов или контактную форму, как мы делаем в этом примере.

На вкладке дизайна вы можете выбрать высоту и ширину вашего холста. По умолчанию это 700 x 350 пикселей. Давайте установим высоту не менее 520 мм.

В поле «Custom HTML» вы вводите короткий код контактной формы вместе с любым другим настраиваемым HTML-кодом, который вы, возможно, захотите добавить.

Вот образец HTML, который мы использовали для создания модального всплывающего окна для этого руководства.

 
 У вас есть вопросы? 
 

 Хотите узнать больше о наших услугах? Просто заполните эту форму, и мы свяжемся с вами в ближайшее время. 

[wpforms]

Обратите внимание, что мы также встроили туда шорткод WPForms. Если вы используете другую контактную форму, просто замените шорткод шорткодом своей контактной формы.

После пользовательского HTML следующий вариант — ввести свой собственный CSS.Под пользовательским полем CSS вы увидите строку случайного текста, которая выглядит следующим образом: html div # om-mw7pzo63ch6wpfzi . Это префикс CSS, который вы будете использовать в своем пользовательском CSS.

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

html div # om-mw7pzo63ch6wpfzi div # om-canvas-whiteboard-optin {
цвет фона: # f8f8f8;
}
html div # om-mw7pzo63ch6wpfzi h4 {
выравнивание текста: центр;
}
html div # om-mw7pzo63ch6wpfzi .tagline {
стиль шрифта: курсив;
}
html div # om-mw7pzo63ch6wpfzi.wpforms-container-full .wpforms-form .wpforms-field {
    отступ: 10 пикселей 0;
    ясно: оба;
}
html div # om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-label {
    дисплей: блок;
    font-weight: 700;
    размер шрифта: 16 пикселей;
    float: нет;
    высота строки: 1,3;
    маржа: 0 0 4px 0;
    отступ: 0;
    }

html div # om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-hp {
    дисплей: нет! важно;
    позиция: абсолютная! важная;
    слева: -9000px! важно;
}

Не беспокойтесь, если вы не видите предварительный просмотр сейчас, вы можете настроить CSS позже.Вы сможете использовать инструмент своего браузера Inspect Element, чтобы узнать, на какие классы CSS и селекторы вы хотите настроить таргетинг, а затем добавить собственный CSS, отредактировав подписку.

Теперь, когда мы закончили с дизайнерской частью. Перейдем на вкладку конфигурации в настройщике.

Измените для параметра «Продолжительность файла cookie» и «Длительность cookie успешной настройки» на 0. Это остановит установку OptinMonster длительности файла cookie.

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

Поскольку наше всплывающее окно появляется только тогда, когда пользователь нажимает ссылку или кнопку, это означает, что нам нужно включить ручной запуск. Установите флажок под опцией «Загрузить при ручном срабатывании?».

Нажмите кнопку «Сохранить», чтобы сохранить настройки подписки, затем нажмите кнопку «Закрыть», чтобы выйти из настройщика.

Шаг 3. Добавление всплывающего окна на ваш сайт WordPress

Вернитесь в админку WordPress и нажмите OptinMonster.Вы увидите свой список опционов. Если вы не видите свое согласие, нажмите кнопку «Обновить подписку».

Нажмите на ссылку «Изменить настройки вывода» под своим согласием. Это приведет вас к настройкам вывода для всплывающего окна.

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

Прокрутите страницу вниз, и вы увидите опцию «Анализировать содержимое на наличие коротких кодов» .Убедитесь, что он установлен, иначе OptinMonster не будет анализировать короткие коды внутри вашего всплывающего окна.

Затем вам нужно ввести шорткод, который вы включили во всплывающее окно. Это короткий код вашей контактной формы.

Щелкните по параметрам сохранения, чтобы сохранить изменения.

Добавление ссылки или кнопки для запуска всплывающего окна контактной формы

Сначала вам понадобится слизняк вашего OptinMonster optin. Щелкните значок OptinMonster на боковой панели WordPress. Вы увидите ярлык подписки рядом с названием подписки.

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

 свяжитесь с нами

Не забудьте заменить data-optin-slug своим собственным optin slug.

Сохраните изменения и посетите свой пост / страницу. Щелкните ссылку, чтобы увидеть всплывающее окно контактной формы в действии.

Вы можете использовать эту ссылку в любом месте вашего сайта WordPress. Вы можете добавить его в сообщения или страницы, в текстовые виджеты и даже в свои шаблоны WordPress.

Вот и все. Мы надеемся, что эта статья помогла вам повысить коэффициент конверсии с помощью всплывающего окна контактной формы в WordPress. Вы также можете узнать, как OptinMonster помог нам увеличить количество подписчиков на электронную почту на 600%.

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress.Вы также можете найти нас в Twitter и Facebook.

Бесплатная контактная форма WordPress, которая просто работает

сайтов WordPress всегда нуждаются в хорошей форме для связи. Вы ищете форму обратной связи / обратной связи, которая работает сразу после установки, имеет привлекательный внешний вид и простую, но полнофункциональную форму? Не ищите ничего, кроме бесплатного плагина Usernoise Modal Feedback Contact Form.

Почему Usernoise?

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

Проще говоря, Usernoise «просто работает».

Просто загрузите и активируйте. Вам даже не нужно изменять настройки, если вы не хотите изменить его цвета или отключить дополнительные поля, такие как тип отзыва и заголовок. Usernoise готов к работе из коробки. К тому же выглядит великолепно! С момента его выпуска в прошлом месяце он был загружен почти 1500 раз и получил десять пятизвездочных оценок.Вот как это выглядит:

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

Usernoise также записывает все сообщения, отправленные через ваш сайт:

Параметры

включают в себя возможность легко изменять форму и содержимое кнопок из области администрирования, возможность отключать поля, которые вам не нужны, и поддержку в IE7, Firefox, Chrome, Safari, Opera и Safari на iPad.Благодаря гибкой типографике текст даже автоматически соответствует стилю вашего сайта.

А как насчет спама?

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

Предоставление вашим читателям возможности оставить отзыв — не просто хорошая идея. Это абсолютная необходимость. С помощью контактной формы вы можете узнать, что работает, а что не работает, что нравится людям, что им интересно и что им действительно не нравится в вашем веб-присутствии.Если вашему сайту WordPress не хватает надежной точки контакта для сбора ценных сообщений от ваших читателей, установите плагин Usernoise сегодня и посмотрите, насколько легко на самом деле может быть завязать разговор.