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

Содержание
  1. Всплывающая форма обратной связи WordPress с помощью плагинов Contact form 7 и Popupmaker
  2. Установка Contact Form 7
  3. Установка Popup Maker
  4. Плагином Easy Fancy box в форме ссылки
  5. Popup в Elementor по кнопке
  6. Создаем всплывающую HTML-форму обратной связи с pop-up окном об успешной отправке
  7. Форма обратной связи с всплывающим окном о подтверждении отправления.
  8. CSS стили
  9. JavaScript код
  10. Ниже функция для всплывающего окна.
  11. Рабочий пример:
  12. Готовая HTML-страница c формой обратной связи с использованием куки:
  13. Комментарии (9) к “Создаем всплывающую HTML-форму обратной связи с pop-up окном об успешной отправке”
  14. Denis Creative
  15. Артём
  16. Denis Creative
  17. Евгений
  18. sterd
  19. Denis Creative
  20. Sergio
  21. Делаем форму обратной связи WordPress: плагин Contact Form 7, функции в темах и самописный код
  22. Форма обратной связи WordPress плагином Contact Form 7
  23. Добавить капчу reCaptcha
  24. Создание формы
  25. Настройка отправки письма
  26. Вставка формы на сайт
  27. Сделать поля горизонтально в строчку
  28. Всплывающая форма обратной связи
  29. Как добавить в elementor
  30. Используем настройку темы
  31. Feedback через виджеты
  32. Обратная связь без плагина
  33. Всплывающая форма обратной связи без плагинов
  34. Навигация по статье:
  35. Скрипт для создания всплывающей формы обратной связи
  36. Загружаем необходимые файлы на хостинг
  37. Подключаем скрипт всплывающей формы обратной связи к сайту

Всплывающая форма обратной связи WordPress с помощью плагинов Contact form 7 и Popupmaker

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

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

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

Установка Contact Form 7

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

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

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

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

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

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

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

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

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

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

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

Установка Popup Maker

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Как сделать белый соус с чесноком

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

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

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

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

Настройки fancybox

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Создаем всплывающую HTML-форму обратной связи с pop-up окном об успешной отправке

[vc_message color=”alert-success”]Если вам нужна всплывающая форма обратной связи для WordPress, тогда читайте эту статью:
Как сделать форму обратной связи во всплывающем окне для WordPress[/vc_message]

Будет много кода, но он будет весь рабочий, понятный и очень простой.

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

[UPD] Форму я брал с одного из рабочих сайтов, и чтобы было в ней меньше кода, взял код подписной формы. Думаю, переименовать поля в форме и добавить textarea не составит труда, поэтому из подписной формы не сложно будет сделать форму обратной связи или любую другую форму, я же оставлю код таким как он есть, иначе нужно менять еще и тексты в форме и менять стили, а мне уже лень (делаю уже, надеюсь, последний, 17-ый апдейт этого кода).

Рекомендую изучить три статьи, ссылки на которые я указал выше, весь код будет взят из них и собран в этой статье с минимальными разъяснениями.

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

В head подключаем нужные шрифты с Google Fonts, Bootstrap и FontAwesome (при необходимости, это не обязательно)

Основной HTML будет такого вида (все элементы и классы не являются обязательными у вас может быть совсем другой код, мой код взят из фрагмента рабочего сайта и немного упрощен для примера, но могут присутствовать лишние элементы):

CSS стили

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

JavaScript код

Обязательно подключаем jQuery :

Ниже функция для всплывающего окна.

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

Если вы хотите использовать куки, тогда подключайте код ниже, но не забудьте подключить скрипт jquery.cookie.min.js

Рабочий пример:

Готовая HTML-страница c формой обратной связи с использованием куки:

Комментарии (9) к “Создаем всплывающую HTML-форму обратной связи с pop-up окном об успешной отправке”

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

Denis Creative

В данной статье поп-ап выводится автоматически через время после загрузки страницы.
В этой статье есть пример попапа с вызовом по клику на кнопке Делаем попап без плагина fancybox.

Если быстро, то надо добавить кнопку

при нажатии на кнопку показываем попап

чтобы при нажатии на область вне попап-окна, попап скрывался нужно после строки

Читайте также:  Как сделать снимок экрана люмия 640

По идее, должно работать.

Артём

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

Denis Creative

Не знаю, это не мой скрипт. С этим лучше обратиться к фрилансерам или сюда https://stackoverflow.com/

Евгений

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

sterd

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

Denis Creative

Sergio

А почему не отправляется ваша форма после нажатия кнопки “Subscribe” и не отображается “Блогодарственное окно”

Источник

Делаем форму обратной связи WordPress: плагин Contact Form 7, функции в темах и самописный код

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

Форма обратной связи WordPress плагином Contact Form 7

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

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

Добавить капчу reCaptcha

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

Настроим reCaptcha от гугла, заходим в раздел интеграция, и нажимаем на ссылку google.com/recaptcha. Должны иметь аккаунт в Google.

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

Копируем данные для капчи, оба ключа.

Переходим обратно в плагин WordPress и нажимаем кнопку Настройки интеграции.

Вводим ключи скопированные на сервисе reCaptcha, записываем в соответствующие разделы и сохраняем.

Создание формы

Заходим в настройки и создаем новую форму. Стираем стандартную разметку.

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

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

Аналогично нажимаем кнопку e-mail, видим тот же интерфейс.

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

Добавляем раздел текстовой области и телефона (по желанию), принцип одинаковый.

Ранее настраивали интеграцию капчи в WordPress, в базовой версии CF7 нет кнопки для вставки captcha, для этого создан шорткод [recaptcha] помещаем под остальными элементами.

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

В результате получился такой код.

Настройка отправки письма

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

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

Вставка формы на сайт

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

Идем в любую запись и вставляем.

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

Хорошая черта у разработчиков тем на WordPress – заранее делать продукт, поддерживающий CF7, что облегчает жизнь и не нужно прописывать CSS стили в код сайта. Моя тема поддерживает плагин и выводит вполне красивую картинку. Если не устраивает, то к каждому полю прописывали class, используйте его для изменения оформления. Проверил работу темы, письма приходят быстро. Про остальные способы вставить шорткод в WordPress, читайте по ссылке.

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

Сделать поля горизонтально в строчку

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

Поле Имя, Почта и Телефон хочу выстроить в строчку. Не забываем сохранять изменения.

Заходим в админке WordPress Внешний вид > Редактор тем > style.css прописываем стили для обратной связи WordPress в конец файла.

Из стилей видно, что div с классом flex-form присвоили свойство display:flex оно задает расположение элементов в строку, без дополнительных параметров пространство делится поровну.

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

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

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

Как добавить в elementor

Для вставки формы в elementor нужно использовать раздел shortcode. Форма создана по инструкции выше, значит шорткод от CF7 есть. Переходим в создание страницы в элементоре и в поиске по элементам ищем шорткод.

Читайте также:  Как сделать бегущую строку в адоб премьер

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

Используем настройку темы

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

Feedback через виджеты

Вставить feedback в виджеты просто. Поможет виджет текст, переносим его в активную зону и прописываем шорткод в него.

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

Обратная связь без плагина

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

Открываем файл function.php для редактирования, прописываем в самый низ код, как пользоваться FTP и изменять PHP разбирали тут.

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

В гутенберге в любой текстовый блок вставляете строку.

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

Теперь настроим внешний вид, вставляем данный код в файл style.css активной темы.

Обновляем style.css на сервере и смотрим как преобразилась обратная связь на странице.

Создаем файл feedback.js и помещаем в него код. Загружаем на хостинг в папку js активной темы.

Теперь загружаем вторую часть кода в function.php.

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

Такое письмо приходит на почту с обратной связи.

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

Источник

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

Приветствую вас на сайте Impuls-Web!

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

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

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

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

Данный скрипт называется jbCallMe. Скачать архив со скриптом вы можете по этой ссылке:

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

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

postmaster.php — выполняет функцию самой отправки письма на ваш e-mail. Данный файл должен загружаться в корень вашего сайта, то есть в папку с доменом.

Так же, здесь есть еще две папки js и css.

Из папки CSS нам понадобится файл jquery.jbcallme.css. В нём находятся стили, которые отвечают за визуальное оформление всплывающей формы обратной связи.

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

Файл jquery.js представляет собой библиотеку jquery, которая подключается автоматически на большинстве сайтов, работающих на CMS, и повторно подключать ее не нужно.

Поэтому если у вас сайт работает на движке WordPress, OpenCart, Joomla, либо на каком-то другом движке, то с вероятностью 99% библиотека jquery у вас уже подключена, и повторно ее подключать не нужно.

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

Загружаем необходимые файлы на хостинг

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

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

В первом случае подключение скрипта будет выглядеть так:

Источник

Оцените статью
Как сделать своими руками
Adblock
detector