Всплывающая форма обратной связи wordpress: Всплывающая форма обратной связи wordpress: настройка за 5 минут

Содержание

Всплывающая форма обратной связи wordpress: настройка за 5 минут

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

Сейчас научимся делать всплывающие формы для отправки сообщений из форм обратной связи автору сайта. В WordPress использую связку плагинов Popup maker и Contact form 7, почему:

Они постоянно обновляются
Профессиональные разработчики
У инструментов есть интеграция друг с другом
На русском языке

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

В Contact Form 7 создадим форму обратной связи с полями ввода Имя, Почта и Вопрос. Чтобы установить плагин вводим в поиске название, устанавливаем и активируем.

Contact form 7 в поиске

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

Стандартный код

Они не нужны, единственно оставляем теги label. Нужно три поля, приведем к виду.

Заготовка под обратную связь

Оставляем submit это кнопка для отправки. В верхнем меню есть несколько кнопок нас интересует “текст”, “e-mail” и “текстовая область”. В первом пользователь будет вводить имя, во втором свою почту и в третьем вопрос. Разберем нагляднее, нажимаем вкладку Текст.

Пример создания поля Имя

Выбираем Текст
Если обязательно для заполнения то отмечаем галочкой
Уникальный идентификатор, оставляем без изменения
Значение, которое отображается по умолчанию, что нужно ввести
Если отметить чекбокс, то название поля будет внутри
Можем задать class, чтобы в дальнейшем привязать к нему CSS стили для оформления
Находим вставить тег

Переместил получившийся шорткод между тегами label, должно получится так.

Код поле добавления имени

Тоже самое делаем с остальными полями, нажимаем и перемещаем между тегами label. Нас интересуют элементы указанные на скриншоте.

Панель инструментов

Делаем по аналогии, что получилось.

Готовый код

Для текстовой области задал другой класс forma-2, потому что ее надо настраивать по другим правилам и стилям. Теперь нажимаем на Сохранить.

Сохранение настроек

Переходи во вкладку Письмо, навастриваем несколько параметров, смотрим на снимок.

Вкладка Письмо

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

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

Копируем шорткод

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

Устанавливается стандартно из админки WordPress, вводим в поиске по плагинам Popup Maker, устанавливаем и активируем.

Popup Maker

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

Название и добавление кода

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

Триггер

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

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

Прописываем класс

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

Остальные параметры

Не забываем нажать на опубликовать.

Публикуем

После публикации проверим работу всплывающей формы в WordPress. Осталось добавить класс .osnova к любому элементу на сайте. Создадим новую статью, и вставим всплывающую обратную связь по нажатию картинки.

В запись загрузил изображение с помощью медиафалов.

Редактор WordPress

Теперь переходим во вкладку текст и прописываем в поле class стиль osnova.

Добавляем class к элементу

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

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

Вкладка визуально

Открывается новая страница в браузере.

Предварительный просмотр

Жмем и появляется всплывающая форма обратной связи сделанная на WordPress. Заполните данные и отправьте для теста.

Рабочая всплывающая форма

Попап нуждается в доработке, поиграйтесь с настройками отображения (выбрал тему оформления fancybox), добавьте стили к полям (мы прописывали forma-1 и forma-2) и получиться очень симпатичный вариант.

В Gutenberg, чтобы привязать класс нужно нажать на три точки у блока и выбрать “Редактировать как HTML”, а дальше по старой схеме.

Редактирование HTML в Gutenberg

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

Плагином Easy Fancy box в форме ссылки

В поисковой выдаче есть запросы на тему всплывающей обратной связи через плагин Easy Fancy Box в форме ссылки, поэтому обязан написать обзор. Устанавливаем дополнение поиском из панели.

Fancy box

Переходим в админке Настройки > Медиафайлы. Из первого пункта убираем все отметки и оставляем Inline Content. Так отменили появление popup при нажатии на картинку.

Настройки fancybox

Берем код прописанный ниже, в разделе Внешний вид > Виджеты добавляем новый типа HTML–код, вписываем в него скопированную конфигурацию обратной связи.

<a href="#form_popup1">Отправить сообщение</a>
<div>
<div>
[contact-form-7 title="Всплывающая форма"]
</div>
</div>

Вставка кода в виджет

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

Пример исполнения

Можно менять текст, прибавлять новые div, только не меняйте ID и CLASS – они привязаны к fancy box, добавляйте стили к тем что сейчас стоят коде. Вставляйте в статьях или напрямую в код шаблона.

Чтобы сделать всплывающее окно с обратной связью в Elementor не нужно больших знаний. Переходим в Popup Maker и в тригерах (ранее разбирали) добавляем через запятую id с помощью знака решетки через запятую. Не забываем обновлять тригер формы и сам проект.

Пример исполнения:
.osnova, #form-test

Вносим ID в тригеры

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

Выводим параметры элемента в elementor

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

Показ формы связи через elementor

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

Итог

На этом закончу статью, мануал получился не маленький, давайте выведем чек–лист действий:

Устанавливаем оба плагина WordPress
В Contact form 7 создаем новую форму, настраиваем ее по инструкции
Добавляем шорткод в новый попап Popupmaker
Настраиваем отображение окна
Привязываем класс к любому элементы на сайте
Проверяем работу

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

Пожалуйста, оцените материал: Мне нравится21Не нравится3

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

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

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

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

Во вторых, всплывающий эффект достаточно интересно выглядит;

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

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

Для того чтобы создать такую форму обратной связи нам понадобится два WordPress-плагина:

Первый плагин – это Easy FancyBox, который позволит нам создать эффект всплывающего окна, т.е. эффект FancyBox.

Второй плагин который нам понадобится – это Contact Form 7. Плагин для создания формы обратной связи.

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

2. Устанавливаем Contact Form 7

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

Копируем название плагина Contact Form 7

Переходим в меню «Плагины» => «Добавить новый». Дальше вы можете либо скачать этот плагин с сайта разработчика, и затем загрузить его при помощи кнопки «Загрузить плагин»

Либо сразу в строку поиска ввести название плагина и нажать Enter.

Нажимаем на кнопку «Установить»

и теперь активируем его.

3. Устанавливаем Easy FancyBox

Точно также, копируем название, нажимаем на кнопку «Добавить новый», вводим название плагина, нажимаем «Enter» и вот он, нужный нам плагин Easy FancyBox

4. Настраиваем всплывающее окно для формы

Для того чтобы получить доступ к настройкам плагина Easy FancyBox

Нам нужно перейти к стандартным настройкам медиафайлов WordPress.

Заходим в пункт меню «Настройки» => «Медиафайлы».

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

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

Теперь нам необходимо установит галочку возле пункта «Inline content»

И теперь нажимаем на кнопку «Сохранить изменения».

В плагине Easy FancyBox помимо этих настроек есть еще множество различных других интересных настроек с которыми вы можете поэкспериментировать.

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

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

Я буду выводить в виджете. Переходим в меню «Внешний вид» => «Виджеты» => выбираем виджет «Текст»

И в поле «Текст» вставляем следующий фрагмент кода:

<div><a href=»#contact_form_pop_up»>Отправить сообщение</a></div> <div> <div> [contact-form-7 title=»Контактная форма 1″] </div> </div>

<div><a href=»#contact_form_pop_up»>Отправить сообщение</a></div>

<div>

[contact-form-7 title=»Контактная форма 1″]

</div>

Теперь нам нужно получить шоткод для вывода нашей формы обратной связи. Для этого переходим в меню «Contact Form 7» => «Формы». По умолчанию здесь уже есть одна форма со стандартными полями «Ваше имя», «Ваш e-mail», «Тема» и «Сообщение». Для начала мы не будем в ней ничего убирать или исправлять. О том как править поля, делать плэйс-холдеры, добавлять и генерировать новые поля различной сложности и делать защиту от ботов и т.д. я расскажу в отдельной статье.

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

6. Редактируем фрагмент кода вывода формы обратной связи.

Вставляем этот шоткод в код виджета вместо [ВАШ ШОТКОД] Вместо ОТПРАВИТЬ СООБЩЕНИЕ вы можете написать любой другой текст. Это текст высветится на кнопке, по щелчку на которой будет открываться всплывающая форма обратной связи. Сохраняем настройки, переходим на наш сайт, обновляем страниц, и нажимаем на нашу ссылку. Вот что у меня получилось:

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

7. Стилизация кнопки

Для того чтобы наша ссылка для открытия формы обратной связи была больше похожа на кнопку предлагаю приписать её немного стилей. Заходим в файл style.css вашей темы и в самом конце приписываем следующие стили:

/***Стили для формы обратной связи****/ .contact-us a{ border:1px solid #ccc; /*цвет границы*/ background:#2674C8; /*цвет фона*/ padding:10px 20px; /*внитренние отступы*/ display:block; text-align:center; /*выравнивание текста по центру*/ color:#fff; /*цвет текста*/ text-decoration:none; /*убрать подчёркивание у ссылки*/ width:200px; /*ширина кнопки*/ margin:auto; /*выравнивание кнопки по центру*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } /**Плавное появление тени у кнопки при наведении**/ .contact-us a:hover{ -moz-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000; box-shadow:0 0 6px #000; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; }

/***Стили для формы обратной связи****/

.contact-us a{

border:1px solid #ccc; /*цвет границы*/

background:#2674C8; /*цвет фона*/

padding:10px 20px; /*внитренние отступы*/

display:block;

text-align:center; /*выравнивание текста по центру*/

color:#fff; /*цвет текста*/

text-decoration:none; /*убрать подчёркивание у ссылки*/

width:200px; /*ширина кнопки*/

margin:auto; /*выравнивание кнопки по центру*/

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

transition: all 0.5s ease;

}

/**Плавное появление тени у кнопки при наведении**/

.contact-us a:hover{

-moz-box-shadow: 0 0 6px #000;

-webkit-box-shadow: 0 0 6px #000;

box-shadow:0 0 6px #000;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

transition: all 0.5s ease;

}

Посмотрим, что у нас получилось:

Я оставила в коде пояснения, какое свойство за что отвечает. Так что вы сможете изменить эти стили на своё усмотрение.

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

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

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

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

С уважением Юлия Гусарь

10 плагинов всплывающих окон и форм обратной связи для WordPress

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

ConvertPlus

Это практически идеальный плагин, создающий всплывающее окно для WordPress буквально за минуты. Помимо стандартных всплывающих окон, ConvertPlus предоставляет массу вариантов расположения pop-up окна на странице. Плагин поставляется с сотней готовых шаблонов, которые удобно настраиваются с помощью WordPress Customizer. ConvertPlus обладает следующими преимуществами:

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

Ninja Popups

Следующий предложенный к ознакомлению плагин является удобным конструктором всплывающих форм обратной связи в WordPress. С данным инструментом можно разрабатывать собственную форму или использовать более 73-х готовых шаблонов и более 74-х анимационных эффектов. Для оптимизации предусмотрена интеграция с сервисом статистики Google Analytics.

Bloom

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

OptinMonster

С таким универсальным инструментом легко можно создавать всплывающее окно на сайте WordPress со своим дизайном или же прибегнуть к использованию предложенных разработчиками готовых шаблонов. С использованием технологии Exit-intent можно показать pop-up окно в момент, когда посетитель уже собирается покинуть ресурс. При желании используется планировщик окон для их запуска в строго запланированное время.

Elementor Pro

Elementor — это один из самых популярных плагинов для создания страниц. Вместе с дополнением Elementor Pro, можно получить доступ к инструменту под названием Popup Builder, в котором используется один и тот же интерфейс конструктора страниц для создания всплывающих окон. Для удобства, разработчики представили более сотни стандартных шаблонов, но при желании, можно создавать свой уникальный дизайн. Минус данного плагина – отсутствие встроенного сервиса статистики.

Layered Popups

Помимо стандартного набора параметров Layered Popups обладает и собственной уникальной изюминкой в виде огромной библиотеки из более 200 шаблонов pop-up окон. Плагин разрешает интегрировать форму входа во всплывающем окне. Разработчикам понравятся такие фишки, как планировка запуска окон в заданное время, сервис встроенной аналитики. Особенностью Layered Popups является прорисовка всплывающих «слоистых» окон по аналогии с многослойным слайдером или слоями в Photoshop. Можно создавать отдельные настраиваемые слои для кнопок «отправить» или «закрыть», для поля формы электронной почты, для фона и др.

Icegram

Плагин Icegram поставляется как в бесплатной, так и в premium-версии. Free версия отлично подходит для типичных всплывающих окон, в ней pop-up окна можно создавать исключительно из предложенных разработчиками шаблонов. Pro-версия включает в себя побольше триггеров, аналитику и др., позволит отобразить pop-up окно в таких случаях:

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

Popup Maker

Плагин Popup Maker для WordPress превосходит конкурентов в области таргетинга и запуска окна по определенному действию. Благодаря простому интерфейсу не возникает проблем в настройке показа pop-up окон. Кроме того Popup Maker в WordPress разрешает создавать собственные уникальные cookie-файлы, настраивая всплывающие окна для групп посетителей. Это позволит проявить творческий подход к показу — например, настроить таргетинг на всплывающие окна для постоянных посетителей, которые уже что-то заказывали ранее.

WP Subscribe Pro

С помощью WP Subscribe Pro вы сумеете отображать во всплывающих окнах собственный HTML-код, формы подписки, стандартные сообщения. Этот плагин пусть и не славится гибкостью, но он удобен для тех, кто не любят возиться со сложными настройками. Встроенные в WP Subscribe Pro триггеры разрешают выводить окна в следующем случае:

с задержкой;
немедленно;
после скрола до конца страницы;
в момент выхода.

PopUp Domination

Это дополнение является больше SaaS инструментом, чем полноценным плагином. Управление окнами здесь осуществляется непосредственно из панели PopUp Domination. При его использовании вы столкнетесь с особенным ценообразованием! Плата взимается от количества просмотров pop-up окон, поэтому она может варьироваться от 9 до 29 долларов в месяц. PopUp Domination предоставляет отличный набор функций – подборку шаблонов, доступ к тестированию и аналитике, расширенные настройки таргетинга, работа практически со всеми типами всплывающих окон.

Как создать всплывающую форму контактов в WordPress

Существует множество плагинов для WordPress для создания форм обратной связи на вашем блоге или сайте. Contact Form 7 самый примечательный из них, он позволяет встраивать контактную форму прямо в записи и страницы WordPress (в то время как многие плагины заставляют применять пользовательский шаблон к странице, тем самым ограничивая ее редактирование).

Внедрения формы в страницу обычно достаточно, однако что если вы захотите, чтобы форма появлялась во всплывающем окне, когда пользователь кликнет на ссылку Contact Us? Для реализации такого желания необходимо использовать два плагина WordPress одновременно: Easy FancyBox и Contact Form 7.

1. Первым делом устанавливаем плагины Contact Form 7 и Easy FancyBox.

Установка плагина WordPress

2. Для простоты мы будем использовать форму Contact Form 7, уже созданную самим плагином при установке для примера. На странице настроек Contact Form берем код формы, который нужно скопировать и вставить в редактор WordPress для создания формы.

Contact Form 7

3. Создаем новую страницу в WordPress. Для того, чтобы добавить контактную форму вам нужно вставить код, находящийся в квадратных скобках со страницы настроек Contact Form 7, на вашу страницу. Убедитесь, что вставили код корректно, ровно также как его отображает плагин.

Правим страницу в WordPress

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

4. Теперь на вашем WordPress есть контактная форма. Мы решили сделать её всплывающей, в модальном окне после клика пользователем на ссылку. В дело вступает плагин Easy FancyBox. С его помощью можно заставить любой элемент страницы отображаться во всплывашке. Открываем редактирование станицы, кликаем на вкладку ТЕКСТ и добавляем следующий HTML-код:


<a href="#contact_form_pop">Contact Us</a>

<div>
    <div>
        [contact-form 1 "Contact form 1"]
    </div>
</div>

Easy FancyBox HTML

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

Всплывающая форма контактов в WordPress

VN:F [1.9.22_1171]

Rating: 2.7/5 (12 votes cast)

Как создается контактная форма для WordPress?

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

Для создания формы потребуется:

Плагин для создания всплывающих окон;
Плагин для создания форм.

Для создания контактной формы мы рекомендуем использовать WPForms. Он позволяет создавать практически любые формы менее чем за 5 минут.

Для создания всплывающих окон мы используем плагин OptinMonster.

Установите и активирйте оба плагина. Для активации OptinMonster необходимо создать учетную запись в системе OptinMonster.

Чтобы создать форму обратной связи, в панели администрирования WordPress перейдите в раздел WPForms > Add New.

На следующей странице выберите шаблон Simple contact form и задайте ей имя.

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

Сохраните внесенные изменения. После этого созданная форма будет готова к работе. Затем перейдите на вкладку Embed и скопируйте код формы.

Чтобы создать модальное всплывающее окно, в административной панели WordPress перейдите в раздел OptinMonster > Create New Campaign.

На следующей странице выберите тип кампании Simple contact form.

В качестве шаблона установите Canvas. Это пустой холст, куда можно вставить любой код HTML, CSS, JavaScript.

На следующей странице введите название кампании.

Затем перейдите на вкладку Start building. После этого вы будете перенаправлены в конструктор. Чтобы создать всплывающее окно, используйте параметры, расположенные на вкладке Design.

Нажмите на кнопку Add Blocks и прокрутите вниз, чтобы найти варианты блоков. Под ними вы увидите HTML-блок. Перетащите его в область проектирования.

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

<h4>Do you have any questions?</h4>
<p class=»tagline»>Want to ask more about our service? Simply fill out the form and we’ll get back to you as soon as possible.
<!— код вашей формы WPForms —>

Сохраните внесенные изменения. После этого перейдите на вкладку Display rules и установите время на ноль.

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

Нажмите на кнопку Yes/No, расположенную в верхней части экрана и перейдите на вкладку Activate.

На вкладке Publish переключите статус в режим live.

После этого перейдите в раздел OptinMonster > Campaigns. Здесь вы увидите свою кампанию. Нажмите на кнопку Edit output settings и становите флажок Enable the campaign on site.

Нажмите кнопку Save settings, расположенную в конце страницы.

Сначала скопируйте ключ вашей кампании OptinMonster, который указан рядом с ее названием.

Создайте новую страницу в WordPress. Затем перейдите в текстовый редактор WordPress и добавьте приведенный ниже код. Не забудьте вставить ваш ключ.

<a href=»#» class=»manual-optin-trigger» data-optin-slug=»ваш ключ здесь»>Contact us</a>

После этого нажмите кнопку Publish, расположенную справа. Теперь созданная вами форма работает.

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

Сергей Бензенкоавтор-переводчик статьи «How to Create a Contact Form Popup in WordPress – Step by Step»

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

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

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

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

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

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

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

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

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

Contact Form 7

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

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

Easy FancyBox

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Щелкнув в правом меню «Внешний вид», а затем по опции «Редактор». В открывшемся окне в самом конце пропишите исходный код и нажмите на кнопку «Обновить файл»
Выбрав «Внешний вид» -> «Настроить» -> «Дополнительные стили». Сюда также можно добавить ваши 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) и настроить форму. Процесс настройки довольно простой я упущу эту часть урока, если он необходим напишите мне в комментариях и я дополню этот урок. После создания формы плагин предложит вам шорткод для вставки в статью. Выглядеть это будет вот так:

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

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

Форма обратной связи wordpress с плагином и без, всплывающая форма

Форма обратной связи – один из важнейших элементов на сайте или блоге на WordPress

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

Что необходимо для создания обратной связи на WordPress?

Обратная связь может быть создана различными способами. Лучшее решение – с помощью плагина. Самыми востребованными являются:

Contact Form 7;
Usernoise;
SimpleModal Contact Form;
Custom Contact Forms;
Slick Contact Forms.

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

Contact Form 7 – быстрая контактная связь и простота настроек

Плагин CF 7 дает возможность легко и просто создавать и настраивать обратную связь. Он очень легкий, совершенно не грузит сайт, а также считается самым простым в настройке. Многие выбирают именно его, работая с ВордПресс. Contact Form полностью русифицирован, что весьма удобно, и имеет интуитивно понятные настройки, разобраться с которыми очень легко. При этом, он полностью бесплатный и гибкий. Есть как простая установка – для всех, кому нравится простота, так и много глубины и сложности – для всех, кто любит углубиться. Поддерживает самые различные формы в окне, отправку через AJAX, интеграцию с Akismet, загрузку файлов, а также оснащен защитой от спама с помощью капчи и текстового вопроса. Многие признали его одним из лучших плагинов для системы управления контентом. CF 7 позволяет создавать на сайте на WordPress самые разнообразные сложные формы. В списке сразу же отображаются шорткоды, необходимые для вставки на страницу.

Usernoise – всплывающая и красивая форма обратной связи

Usernoise имеет весьма широкий функционал, позволяя сделать красивую и простую в понимании всплывающую форму в окне. Но есть некоторый минус – полная часть его возможностей представлена в платной версии. Однако многим достаточно функций, которые представлены в бесплатном варианте. По умолчанию Usernoise для WordPress уже настроен как нужно, все что нужно – просто его включить. Дальнейшие настройки, по желанию владельца сайта, осуществляются тоже незатруднительно. Можно изменять расположение кнопки, изменить ее цвет и фон текста, добавить иконку к кнопке, поменять шрифт и поменять стандартные надписи. Все это легко настраивается из админки. С его помощью кнопка станет уникальной. Плагин полностью русифицирован, что максимально облегчает работу с ним. Идеально подходит для блогов. Usernoise поддерживается практически всеми знаменитыми браузерами – Opera, Firefox, Safari, IE7 (от 7 версии). Главным преимуществом данного плагина является его высокая производительность, он не оказывает влияния на скорость загрузки.

SimpleModal Contact Form – быстрая всплывающая форма в модальном окне

SimpleModal Contact Form (SMCF) представляет собой обратную связь, которая интегрирована в модальное всплывающее окно. Работает на WordPress при помощи jQuery. Плагин русскоязычный, благодаря Николаю Мясникову и другим «народным умельцам», принимающим участие в его русификации. Перевод на русский язык выполнен максимально грамотно, учитываются все малейшие детали. Всплывающее окно, которое выводит SMCF внешне напоминает окно плагина Lightbox. Это очень удобная вещь для всех, кто хочет дать возможность пользователям написать письмо, просто во всплывающем окне где угодно – в конце поста, на отдельной странице либо в Сайдбаре. Все работает очень быстро и удобно. Установка осуществляется самым традиционным способом. Также обратная форма проверяет правильность заполнения полей ввода. В опциях есть возможность сделать автоматическую подстановку заголовка страницы в теме письма, что является довольно весомым достоинством, когда он используется для заказа к описанию товаров. Тема письма позволит сразу увидеть какой товар заказан.

Custom Contact Forms – обратные формы любой сложности

Плагин Custom Contact Forms (CCF) очень популярен на сегодня. С его помощью можно сделать формы любой сложности на WordPress. Но, стоит отметить, что CCF не имеет русской локализации. Хотя это не играет особой роли, поскольку разобраться в нем проще простого, даже тем, кто не знает английский язык. Созданные формы вставляются в любые страницы, материалы и отдельные записи. Для создания простой формы не нужно копаться в настройках, все, что потребуется – вписать код [customcontactform=1] в любую статью, а дальше уже все делается автоматически. Есть также специальный виджет, который можно вставить в боковую панель, либо же в любые иные места на сайте, отведенные под виджеты. Никаких особых знаний CSS для настройки при этом не требуется, а настраивается практически любой аспект: цвета, размеры, границы, отступы. Управление стилями осуществляется прямо в админке WordPress, там же, где настраиваются все поля ввода значений. Работает на современных технологиях Ajax и jQuery.

Slick Contact Forms – простое добавление нескольких обратных связей

Плагин для ВордПресс Slick Contact Forms создает виджет, который может быть применен для добавления нескольких форм контакта на странице. С ним обратную можно сделать плавающей, выпадающей и выезжающей. Появляется при клике по ссылке в виде раскрывающейся панели. Вид очень аккуратный и красивый. Вставлять ее в блог достаточно просто, особенно если использовать виджет. Виджет уже содержит все необходимые параметры и настройки – скорость разворачивания и сворачивания, ширину, общее название и название полей, количество полей, положение на экране, обратный электронный адрес, расположение текстовых полей. Есть также несколько вариантов оформления. Можно сделать и с использованием шорткода, но это уже сложнее. Это один из самых дружественных и надежных инструментов WordPress.

Все плагины, перечисленные выше, заслуживают внимания и имеют свои достоинства. Однако выбор будет зависеть от личных предпочтений. Например, если необходимо встроить обратную связь в страницу, то лучше выбирать первые плагины, в частности Contact Form 7. Если же всплывающие окна больше нравятся – лучше остановить выбор на SMCF и Usernoise.

Как легко создать всплывающую форму WordPress (шаг за шагом)

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

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

Зачем нужна всплывающая форма WordPress?

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

Кроме того, вы также можете использовать всплывающую форму WordPress для:

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

Итак, теперь, когда вы знаете, почему вы хотите использовать всплывающую форму WordPress, давайте перейдем к тому, как именно ее создать!

Как создать всплывающую форму WordPress

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

Если вы предпочитаете письменные инструкции, вы можете прочитать ниже:

Шаг 1. Установите необходимые плагины WordPress

Для начала вам нужно установить и активировать 2 плагина.

Во-первых, вам понадобится Popup Maker. Хотите знать, бесплатен ли создатель всплывающих окон? Да, вы можете использовать бесплатную версию этого руководства и с WPForms.

Нажмите синюю кнопку загрузки и узнайте, как установить плагин в WordPress.

Далее вам также понадобится плагин WPForms. Вот простое руководство по установке плагина WPForms.

Шаг 2. Создайте простую контактную форму

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

Чтобы создать форму, перейдите в WPForms »Добавить новый и выберите шаблон. В этом примере мы воспользуемся простой формой обратной связи. Рекомендуется упростить работу со всплывающими формами WordPress, чтобы вы могли максимизировать коэффициент конверсии форм.

После загрузки формы в ней будет все необходимое для начала работы, включая:

Имя
Фамилия
Электронная почта
Комментарий

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

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

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

Шаг 3. Создайте всплывающее окно в Popup Maker

Отлично, ваши плагины установлены и активированы.Затем мы перейдем к плагину Popup Maker, чтобы создать ваше всплывающее окно. Этот бесплатный плагин WordPress позволяет легко создавать всплывающие окна с нуля.

Перейдите в панель управления WordPress и перейдите к Popup Maker » Добавить всплывающее окно , и вы увидите, что появляется всплывающий экран редактирования.

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

А теперь пора вставить форму во всплывающее окно. Нажмите кнопку «Добавить форму», чтобы выбрать форму.

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

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

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

Отличная работа. Давайте настроим некоторые параметры всплывающих окон, прокрутив вниз и начав с триггеров.

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

В появившемся окне параметров триггера откройте раскрывающийся список и выберите Time Delay / Auto Open . Это приведет к тому, что всплывающее окно откроется после того, как посетители вашего веб-сайта будут находиться на странице в течение определенного времени.

Вы можете установить время как угодно, но мы рекомендуем начинать с 5 секунд (5000 миллисекунд).Когда будете готовы, нажмите кнопку Добавить , чтобы продолжить.

По умолчанию это всплывающее окно будет отображаться на каждой странице вашего веб-сайта WordPress и для всех на всех устройствах. Вы можете настроить эти параметры для таргетинга на определенных людей, устройства, места (например, публикацию или страницу) и многое другое в разделе «Таргетинг». Фактически, чтобы узнать о дополнительных настройках, обратитесь к документации Popup Maker.

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

В раскрывающемся списке «Тема всплывающего окна» выберите тему для всплывающего окна.

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

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

Прокрутите страницу вверх и нажмите кнопку Опубликовать , чтобы активировать всплывающую форму WordPress.

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

Чтобы сделать больше всплывающих окон контактной формы, вы можете повторить этот процесс и настроить параметры и правила отображения, чтобы они отображались в разных сообщениях или страницах и т. Д. Или вы можете проявить творческий подход и сделать всплывающий опрос WordPress.

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

Кроме того, если вы настроили Google Analytics на своем веб-сайте, вы можете отслеживать Popup Maker с помощью пользовательского отслеживания событий.

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

Заключение

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

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

И если вам понравилась эта статья, подпишитесь на нас в Facebook и Twitter, чтобы получить больше бесплатных руководств по WordPress.

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

Вы ищете простой способ отобразить всплывающее окно контактной формы на своем веб-сайте WordPress?

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

В этой статье мы покажем вам, как добавить всплывающее окно контактной формы в WordPress.

Зачем нужно всплывающее окно с контактной формой?

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

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

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

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

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

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

Как создать контактную форму WordPress

Во-первых, вам нужно выбрать плагин для контактной формы WordPress.

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

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

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

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

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

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

После этого WPForms попросит вас ввести имя для вашей формы и выбрать шаблон. Идите вперед и выберите шаблон «Простая контактная форма».

Затем вы можете добавить поля в форму с помощью конструктора перетаскивания.

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

WPForms также позволяет настраивать каждое поле в контактной форме.

Например, если вы нажмете на поле «Имя», вы получите различные варианты, такие как изменение метки и формата. Вы даже можете добавить описание или пометить любое поле по мере необходимости.

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

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

Далее вы можете перейти к параметру «Настройки уведомлений».По умолчанию уведомления отправляются на адрес электронной почты администратора, настроенный на вашем веб-сайте WordPress.

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

В строке темы электронного письма WPForms использует имя формы, которое вы ввели ранее. Однако вы можете отредактировать текст строки темы по своему усмотрению.

После этого нажмите кнопку «Подтверждения».

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

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

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

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

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

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

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

Мы рекомендуем использовать OptinMonster, так как это лучший плагин для генерации лидов и оптимизации конверсии для WordPress.Более 1,2 миллиона веб-сайтов используют этот мощный инструмент.

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

Сначала вам нужно будет зарегистрировать учетную запись, перейдя на сайт OptinMonster.

Затем установите и активируйте бесплатный плагин OptinMonster на своем веб-сайте. Для получения более подробной информации следуйте нашему руководству по установке плагина WordPress.

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

Для этого просто перейдите к OptinMonster »Настройки на панели инструментов WordPress и нажмите кнопку« Подключить существующую учетную запись ».

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

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

Вы можете начать с перехода на OptinMonster »Кампании и затем нажать кнопку« Создать свою первую кампанию ».

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

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

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

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

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

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

После этого вам нужно будет ввести шорткод контактной формы WPForms в свой HTML-блок.

Чтобы найти код, вернитесь к настройкам внедрения WPForms и скопируйте шорткод.

Теперь введите скопированный шорткод в свой блок HTML в OptinMonster, где написано «Добавьте сюда HTML».

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

Это нормально, и ваша контактная форма появится после публикации кампании.

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

По умолчанию OptinMonster устанавливает его, когда время на странице составляет 5 секунд, и всплывающее окно появляется на любой странице.

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

Мы предлагаем использовать таргетинг MonsterLink (по клику). Таким образом, ваше всплывающее окно появится, когда посетитель щелкнет ссылку или кнопку.

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

Ваш код MonsterLink в HTML будет выглядеть так:

 Подпишитесь сейчас!

Однако, чтобы встроить ссылку в сообщение или страницу блога WordPress, вам просто нужен URL-адрес из кода.

https: //app.monstercampaigns.com / c / ep6f5qtakxauowbj8097 /

Например, вы хотите добавить на свой сайт кнопку «Связаться с нами». Вы можете начать с редактирования любой страницы или сообщения и перейти в редактор WordPress. Затем нажмите значок плюса (+) вверху и добавьте блок «Кнопки».

После этого введите текст для кнопки и щелкните значок ссылки. Теперь добавьте URL-адрес MonsterLink к вашей кнопке.

Как только вы это сделаете, опубликуйте свой пост или страницу WordPress. Теперь ссылка MonsterLink будет добавлена к вашей кнопке «Связаться с нами».

Затем вернитесь в свою кампанию OptinMonster, чтобы завершить настройку.

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

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

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

Теперь вы готовы запустить свою кампанию и опубликовать всплывающее окно контактной формы. Для этого перейдите на вкладку «Опубликовать» вверху.

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

Если вас устраивает внешний вид вашей кампании, измените «Статус публикации» с «Черновик» на «Опубликовать».

Вы можете выйти из конструктора кампаний OptinMonster и проверить статус своей кампании также на панели инструментов WordPress.

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

Затем перейдите к кнопке «Связаться с нами», которую вы создали ранее с помощью MonsterLink, и просмотрите всплывающее окно контактной формы в действии.

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

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

Popup contact form — плагин для WordPress

Описание

Посетите официальный сайт для живой демонстрации http://www.gopiplus.com/work/2012/05/18/popup-contact-form-wordpress-plugin/

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

Преимущество плагина

Простота настройки.
Подача Ajax.
Неблокируемый.

Конфигурация плагина

Перетащите виджет
Вставьте php-код в желаемое место шаблона
Сокращенный код страниц и сообщений

Переводчики

Скриншоты

Передний экран.http://www.gopiplus.com/work/2012/05/18/popup-contact-form-wordpress-plugin/
Экран администратора. http://www.gopiplus.com/work/2012/05/18/popup-contact-form-wordpress-plugin/

FAQ

Q1) Как изменить / обновить стиль формы?

Q2) Как изменить / обновить форму проверки клиента?

Q3) Как изменить изображение кнопки «Связаться с нами»?

Ответ

Отзывы

Мне нужно больше возможностей, чтобы удовлетворить мои потребности.

Я использую всплывающую контактную форму на своем веб-сайте. Я проверил свой веб-сайт с помощью https://validator.w3.org/ и получаю сообщение об ошибке в «id». Я не могу найти, где это изменить, так как я разработчик. У меня есть приложил снимок экрана с этим для справки. http://www.awesomescreenshot.com/image/1682816/74fc219f68e79cf23ecbae0866d608ce

Прочитать 5 отзывов

Авторы и разработчики

«Всплывающая контактная форма» — это программное обеспечение с открытым исходным кодом.Следующие люди внесли свой вклад в этот плагин.

авторов

История изменений

1,0

Первая версия

2,0

JavaScript, загружаемый с помощью ловушки wp_enqueue_scripts (вместо ловушки инициализации)
Параметр сокращенного кода для страниц и сообщений

3,0

Новая демонстрационная ссылка

4,0

Проверено до 3.4.2

4,1

Проверено до 3.5

5,0

Проверено до 3.6
Добавлено несколько функций безопасности.

5,1

Проверено до 3.8
Теперь этот плагин поддерживает локализацию (или интернационализацию). т.е. возможность перевода на другие языки.
Плагин * .po файл (popup-contact.po) доступен в папке языков.

5,2

Проверено до 3.9

5,3

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

5,4

Протестировано до 4.0

5,5

Проверено до 4.1

5,6

Протестировано до 4.2.2

5,7

Проверено до 4.3

5,8

Проверено до 4.4
Text Domain.

5,9

Проверено до 4.5
Санация добавлена для всех входных значений.
После отправки формы всплывающее окно закроется автоматически.

6,0

Проверено до 4.6

6,1

Проверено до 4,7

6,2

Протестировано до 4.8

6,3

Проверено до 4,9

6,4

Проверено до 5.1

6,5

Протестировано до 5.2
Добавлена опция удаления. Все ссылки на подключаемые модули и таблица подключаемых модулей будут удалены во время удаления.

6,6

Проверено до 5,3

6,7

Протестировано до 5.4

6,8

Проверено до 5,5

6,9

Протестировано до 5,7

7,0

Проверено до 5,8
Использовать сокращенный код плагина в виджете.

Popup Message Contact Form 7 — плагин для WordPress

Описание

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

🔸 Демо

Возможности плагина
Создать всплывающее окно для любой формы Contact Form 7
Предварительно заданный шаблон всплывающего окна успеха
Используйте разные всплывающие окна успеха для разных форм
Показывает всплывающее окно при успешной отправке формы
Настроить содержимое всплывающего окна успеха
Настроить цвет фона всплывающего окна успеха
Настроить цвет шрифта всплывающего окна успеха
Настроить текст кнопки всплывающего окна успеха
Настроить цвет всплывающей кнопки успеха
Настроить длительность всплывающего окна успеха
Фоновое изображение всплывающего окна настройки успеха
Настроить цвета градиента всплывающего окна успеха
Всплывающее окно полностью реагирует
Совместимость со всеми основными браузерами

🔸 Купить Pro

Plugin Pro Возможности
Создать всплывающее окно для любой формы Contact Form 7
Предварительно заданный шаблон всплывающего окна «Успех и сбой»
Использовать разные всплывающие окна «Успех» и «Не удалось» для разных форм
Показывает всплывающее окно «Успех» и «Ошибка» при успешной отправке формы
Настроить содержимое всплывающих окон успешно и неудачно
Настроить цвет фона всплывающего окна «Успех» и «Ошибка»
Настроить цвет шрифта успешного и неудачного всплывающих окон
Настроить текст кнопки всплывающего окна «Успех» и «Ошибка»
Настроить цвет всплывающих кнопок «Успешно» и «Неудачно»
Настроить длительность успешного и неудачного всплывающего окна
Настроить фоновое изображение всплывающего окна «Успешно и не удалось»
Настроить цвета градиента для всплывающих окон «Успешно» и «Не удалось»
Всплывающее окно полностью реагирует
Совместимость со всеми основными браузерами
Быстрая поддержка клиентов

Conatct Form 7 Всплывающее сообщение после отправки формы для настройки большей части способов, которые вы можете сделать через настраиваемое всплывающее окно, а также один плагин, также доступный для него Контактная форма всплывающего сообщения 7.которые предоставляют большую часть функций, доступных для плагина всплывающих сообщений , контактная форма 7, модальное сообщение об успешном сообщении . в этом плагине используется sweetalert js с Contact Form 7 Response Message Popup

👉 Некоторые из наших других бесплатных плагинов WooCommerce:

Мин. Максимальное количество для Woocommerce
Часто покупают вместе для Woocommerce
Плавающая тележка Woocommerce

Отзывы

Здравствуйте, вместе со всплывающим окном также отображается ответ по умолчанию, два сообщения не нужны.Даже если в форме нет тега [response], ответ все равно отображается на экране. Теперь есть только один класс ответа для обеих ошибок успеха n в cf7, что затрудняет даже скрытие с помощью css. Пожалуйста, помогите с этим

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

Pro 12 $ хорошая цена, но бесплатно бесполезно

Он устанавливается правильно, но при активации веб-сайт не работает и выдает ошибку 500.

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

Прочитать 5 отзывов

Авторы и разработчики

«Контактная форма 7 для всплывающих сообщений» — это программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

авторов

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

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

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

В этом уроке я покажу, как использовать плагин контактной формы WordPress, а также всплывающий инструмент.Хотя есть несколько способов создания всплывающих контактных форм, я собираюсь рассмотреть бесплатный метод с использованием Popup Maker и Ninja Forms.

Использование Ninja Forms

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

Перейдите в область «Плагины» и нажмите «Добавить».”

Установите и активируйте плагин« Ninja Forms ». Вы можете найти его, используя поле поиска в правой части экрана.

Ninja Forms может перенаправить вас прямо на свою панель управления. Если нет, вы можете выбрать опцию «Формы ниндзя» в левом столбце администратора.

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

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

Как видите, Ninja Forms содержит множество дополнений, которые можно перетаскивать прямо в форму. Допустим, нам нужна отметка даты сообщения. Перетащите поле «Дата» в форму.

Теперь щелкните поле даты, чтобы открыть его свойства справа.

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

Нажмите кнопку «Опубликовать» в правом верхнем углу, чтобы активировать форму.

Через некоторое время Ninja Forms покажет неактивную кнопку публикации. Нажмите «X» в правом верхнем углу, чтобы закрыть редактор.

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

Хотя мы могли бы просто разместить эту форму на веб-сайте, мы хотим сделать ее всплывающим окном. Теперь нам нужен плагин Popup Maker.

Использование Popup Maker

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

Откроется новое окно с функциями безопасности. Нажмите кнопку «Пропустить». Вы всегда можете установить плагины безопасности позже.

Появится панель управления Popup Maker с пустым списком всплывающих окон. Если вам понадобится доступ к ним в будущем, они будут именно здесь.

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

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

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

Щелкните поле редактора и нажмите кнопку «Добавить форму».

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

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

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

Когда вы будете готовы к запуску формы, нажмите кнопку «Опубликовать» во всплывающем окне.

Теперь у вас есть всплывающая контактная форма.

Настройка всплывающего окна

Между Ninja Forms и Popup Maker у вас есть доступ ко многим доступным параметрам настройки. Возможно, вам придется немного поэкспериментировать с формой, например, отрегулировать время, если вы хотите, чтобы она открывалась автоматически или где вы хотите, чтобы форма отображалась на вашем сайте.

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

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

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

Могу ли я использовать любой плагин для создания всплывающих окон с Ninja Forms?

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

Будет ли Popup Maker работать с контактной формой 7?

Popup Maker работает с большинством популярных плагинов для создания форм. Фактически, разработчик конкретно указывает, что Contact Form 7 входит в число поддерживаемых плагинов.Из-за того, как создатели форм обрабатываются в WordPress, Popup Maker должен работать с очень большой их частью.

Множество возможностей

Ninja Forms и Popup Maker открывают двери для всех видов возможностей для повышения функциональности вашего сайта. Например, вы можете настроить опросы или поделиться важным контентом с посетителями при входе на свой веб-сайт. Думайте об этом как о выпуске новостей, в котором рассказывается важная информация, имеющая отношение к вашей странице.

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

Какие элементы вы бы поместили во всплывающее окно для своего веб-сайта? У вас есть контактная или другая целевая страница, готовая для ваших посетителей?

Получите отзывы клиентов с помощью этих плагинов WordPress

Хотите получать отзывы клиентов с помощью плагина WordPress?

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

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

Зачем собирать отзывы?

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

Заставить посетителей заполнять анкеты может быть сложно, поэтому важно составить правильный тип вопроса и показать его в нужное время.

Какие отзывы вы можете собирать?

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

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

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

Формы ниндзя + Holler Box

Ninja Forms — это плагин для бесплатных форм, а Holler Box — бесплатный плагин для всплывающих окон.Вместе они могут помочь вам создавать опросы и анкеты для сбора отзывов.

Создайте форму обратной связи

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

Активируйте и установите Ninja Forms, выбрав Плагины => Добавить в админке WordPress. Найдите Ninja Forms, установите и активируйте.

Посетите пункт меню «Формы ниндзя» и нажмите «Добавить». Выберите пустую форму и добавьте свои поля.

Как должна выглядеть форма?

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

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

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

Если вы не знакомы с тем, как создать форму с помощью Ninja Forms, это видео поможет.

Как только ваша форма будет заполнена, сохраните ее.

Добавить форму на страницу или всплывающее окно

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

Если вам нужно более сложное размещение, используйте всплывающий плагин, например Holler Box.

Установите и активируйте Holler Box в админке WordPress в разделе Plugins => Add New, найдите Holler Box.Активируйте, затем перейдите в пункт меню Holler Box и нажмите Добавить.

Создайте свое всплывающее окно по своему усмотрению, затем добавьте шорткод Ninja Forms для отображения формы во всплывающем окне.

Это основы, давайте рассмотрим несколько примеров.

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

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

Затем создайте новый Holler Box и добавьте в него шорткод Ninja Form.

Нажмите, чтобы посмотреть

Настройки Holler Box должны быть типом окна уведомлений по умолчанию, вы можете выбрать в расширенных настройках, на каких страницах он будет отображаться.

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

Всплывающая форма о намерении выхода

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

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

Чтобы настроить этот тип всплывающего окна, создайте новый Holler Box и добавьте свой шорткод Ninja Form. Выберите «Всплывающее окно» в качестве типа поля, затем выберите пользовательский шаблон .

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

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

Кнопка с раскрывающимся меню

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

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

Вы можете использовать это для запроса расценки, спросить «Что-нибудь отсутствует на этой странице?» И т. Д.

Чтобы создать этот тип формы, создайте новый Holler Box и выберите «Popout» в качестве типа.

Введите свой вопрос в главном редакторе, например «Что-то отсутствует на этой странице?»

Прокрутите вниз до мета-поля «Всплывающее окно», затем добавьте шорткод «Форма ниндзя».

Настройте место отображения в расширенных настройках и опубликуйте.

Щелкните ссылку, чтобы открыть модальную форму

Последний тип формы, который мы рассмотрим, — это щелчок по ссылке, чтобы открыть форму в модальном окне.

Это может быть полезно, если у вас длинная форма и вы не хотите занимать ценное место на странице для ее отображения. Для этого типа формы вам понадобится функция обновления контента, доступная в Holler Box Pro.

Создайте новый Holler Box, выберите Popup в качестве типа вместе с настраиваемым шаблоном.

Добавьте шорткод Ninja Forms в редактор так же, как вы это сделали для других блоков.

В разделе «Дополнительные настройки» выберите «щелчок по ссылке / обновление содержимого»:

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

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

Заключение

Ninja Forms и Holler Box — два бесплатных плагина WordPress, которые отлично подходят для сбора отзывов.

Используя мощный конструктор форм в Ninja Forms, наряду с настраиваемыми всплывающими модальными окнами в Holler Box, вы можете начать получать больше форм, чем когда-либо прежде.

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

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

Приблизительное время чтения: 6,5 минут

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

У вас есть сайт на WordPress? Идеально! Все, что вам сейчас нужно, это лучший плагин для формы обратной связи WordPress . Есть много вариантов. Но в этом руководстве мы познакомим вас с конструктором форм, который поможет вам бесплатно создать форму обратной связи с пользователем!

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

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

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

Отзывы клиентов

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

👉 Подробнее: Как добавить отзывы на свой сайт WordPress

Отзывы клиентов

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

👉 Подробнее: Как добавить отзывы на свой сайт WordPress

Исследование Net Promoter Score (NPS)

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

👉 Протестируйте нашу демонстрацию обзора NPS

Опрос удовлетворенности сотрудников

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

👉 Попробуйте нашу демонстрацию опроса удовлетворенности сотрудников или узнайте больше о том, как создать опрос вовлеченности сотрудников.

Опрос службы поддержки клиентов

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

👉 Посмотрите нашу демонстрацию опроса по работе с клиентами в действии

Исследование интересов студентов

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

Нужно вдохновение? Ознакомьтесь с несколькими примерами вопросов для опросов студентов.

👉 Посмотрите, как работает наш опрос интересов студентов

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

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

Если вы когда-либо добавляли контактную форму на свой сайт WordPress, вы определенно сможете это сделать! Вот шаги:

Установите плагин обратной связи клиента WordPress
Создайте форму обратной связи
Добавить поля формы обратной связи
Настройте форму обратной связи
Добавьте форму обратной связи на свой сайт
Upgrade Formidable для премиум-функций

1.Установите плагин обратной связи клиента WordPress

Сколько плагинов у вас в библиотеке? Для пользователей WordPress слишком легко получить слишком много плагинов на своем сайте. Вот почему мы собираемся показать вам плагин, который может легко объединить несколько плагинов в один: конструктор форм WordPress.

Хотя есть несколько отличных бесплатных плагинов для форм WordPress, не все они одинаковы. Беглый взгляд на каталог плагинов на WordPress.org покажет одну вещь: выбрать правильный плагин непросто.

Мы собираемся предложить простое (хотя и предвзятое) решение: используйте наш плагин WordPress: Formidable Forms ! Наш плагин совершенно бесплатный, если вы хотите создавать контактные формы WordPress, анкеты, формы обратной связи и многое другое.

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

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

2. Создайте форму обратной связи

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

Перейдите в Formidable → Forms и нажмите + Добавить новый вверху страницы.

Нажмите кнопку + пустая форма . Назовите форму как хотите, а затем нажмите Create .

3. Добавьте поля формы обратной связи

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

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

Текстовое поле вопроса
Абзац Поле вопроса
Раскрывающееся поле
Флажки и радиокнопки

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

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

4. Настройте форму обратной связи

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

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

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

Настроить электронную почту в Formidable очень просто. Внутри формы нажмите Настройки → Действия и уведомления . По умолчанию будет готово уведомление по электронной почте.

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

Если вам нужно устранить какие-либо неполадки, ознакомьтесь с нашей справочной документацией по уведомлениям по электронной почте в базе знаний Formidable Forms .

5. Добавьте форму обратной связи на свой сайт

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

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

Не знаете, куда его поставить? Вот несколько идей:

Сделайте специальную страницу обратной связи

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

Вы также можете использовать такой плагин, как All in One SEO pack, чтобы скрыть эту страницу от поиска Google. Таким образом, вы можете контролировать, кто будет заполнять вашу форму обратной связи.

Добавьте форму обратной связи на боковую панель или нижний колонтитул

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

6. Обновление Formidable для премиум-функций

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

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

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

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

Завершение

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

Как всегда, держите его в блоге Formidable обо всем, что касается WordPress. Спасибо, что зашли!

Ознакомьтесь с нашими советами по обратной связи с клиентами

Если вы еще не используете Formidable Forms , почему бы не попробовать. У Formidable есть множество функций, помимо форм обратной связи.Попробуйте наш бесплатный плагин WordPress, чтобы начать работу, или нажмите здесь, чтобы попробовать Formidable бесплатно в течение 14 дней.