Меню

Настройка easy contact forms



Модальное окно для Contact Form 7 в wordpress (Easy Modal)

Недавно для одного сайта меня попросили сделать форму обратной связи для WordPress в модальном окне. То есть при клике по ссылке «напишите нам» вместо перехода на соответствующую страницу пользователю должно открываться новое всплывающее окно, где и будет находится функция отправки сообщения. Это более интерактивное решение, хотя далеко не всем оно нравится. Я лично предпочитаю классическую реализацию со страницей контактов, однако формы на сайтах бывают разные — поэтому полезно будет рассмотреть решение данной задачи. В работе использовал 2 плагина: известный многим Contact Form 7 и модуль Easy Modal, чтобы сделать модальное окно в вордпресс.

Обновление 18.05.2017: Судя по последним отзывам в репозитории, в некоторых случаях могут наблюдаться проблемы с его работой. Если вас тоже это коснулось, попробуйте новое решение от разработчиков под названием Popup Maker. Еще в качестве альтернативы можно рассматривать Easy Fancybox.

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

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

Загрузок более 10 тысяч, оценка 4.6. Допустимые версии 3.4 — 4.0.8, хотя я успешно запустил его на WP 4.3.1. Не смотря на то, что сейчас плагин трансформировался в новое решение Popup Maker, на сайте wordpress.org и при поиске плагинов внутри админки все еще можно найти обычный Easy Modal версии 2.0.17. На его примере я и расскажу про создание модального окна обратной связи в WordPress.

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

После установки появится одноименный раздел, где есть несколько пунктов. Нам понадобится самый первый из них — Modals. Кликаете там по кнопке Add New.

Это действие создаст новое модальное окно для вашего вордпресс сайта. В настройках элемента будет 4 закладки:

  • General — общие параметры.
  • Display Options — опции отображения.
  • Close Options — настройки закрытия окна (с помощью клика или кнопки Esc).
  • Examples — примеры кода для использования.

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

Тип загрузки Load Type имеет 2 варианта:

  • Load Sitewide (для всего сайта).
  • Per Page/Post (для конкретных постов и страниц).

Весьма интересная опция. Если вам нужно всплывающее окно, которое будет выводиться на всех страницах сайта (ссылка располагается в сайдбаре, например), то выбиваете первый вариант. Во втором случае на страницах/постах сайта при редактировании появится соответствующий блок настройки:

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

Вторая закладка параметров модуля — Display Options (опции отображения).

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

Примеры отображения вывода модального окна в вордпресс с помощью плагина Easy Modal найдете в последней вкладке.

Читайте также:  Hp laserjet m1536dnf mfp настройка принтера

Вставлять этот код нужно через виджет в сайдбаре или в текстовом редакторе. Он ничем не отличается о любого другого HTML кода, единственное, что здесь указан класс конкретного модального окна (eModal-1). Для, созданного вами, второго элемента класс будет eModal-2 и т.п. Дабы не совершить ошибку при вставке кода проще всего копировать его с данной страницы.

Редактирование темы оформления модального окна

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

В данном инструменте 6 закладок:

  • General — указываете название темы;
  • Overlay — фон (тут можно выбрать цвет и прозрачность подложки формы);
  • Container — разные настройки самого модального окна (отступы, рамка, тень);
  • Title — параметры заголовка всплывающего окна (шрифт, тень);
  • Content — шрифт и цвет текстов в блоке;
  • Close — элемент закрытия формы (текст и оформление).

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

После установки всех настроек на забудьте их сохранить (кликаете по кнопке Save).

Видео добавления Contact Form 7 во всплывающем окне Easy Modal

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

Итого про модальные окна для wordpress

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

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

Что же касается задачи открытия формы обратной связи Contact Form 7 во всплывающем окне, то тут хватает базовых возможностей Easy Modal. Причем данное решение может использоваться и для вывода других модальных окон в вордпресс — полезных подсказок, дополнительной информации и т.п. Учитывая наличие редактора вставки HTML кода, во всплывающем окне можно показывать видео, формы и т.п. В общем, полезный плагин. Если будут вопросы по нему, пишите в комментариях.

Источник

Форма обратной связи для WordPress — Easy Modal

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

Он достаточно прост в обращении и имеет относительно не плохую гибкость в управлении. Следует оговориться, что работает данный плагин совместно с другим бесплатным плагином Contact Form 7.

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

После установки данных плагинов (Easy modal, Contact Form 7) все, что потребуется от Вас — это создать необходимую форму через Contact Form 7 и прописать нужный класс для вашей кнопки на сайте.

Читайте также:  Инженерные настройки philips s308

Настройка Contact Form 7

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

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

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

Рис.1

Настройка Easy Modal

Перейдя в плагин Easy Modal в раздел Modals, нам необходимо создать наше модальное окно нажатием на кнопку Add new. Где в поле content необходимо разместить скопированный раннее шорткод (рис.2).

Рис.2

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

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

Рис.3

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

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

Источник

Полное руководство по Contact Form 7

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

1. В админ-панели перейдите Плагины > Добавить новый и в строке поиска впишите название дополнения.

Установка плагина Contact Form 7 из админки WordPress

2. В найденной карточке нажмите по очереди кнопки Установить и Активировать.

Вывод на сайте

После активации в админке откройте раздел Contact Form 7.

Список форм

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

1. Кликните Страницы > Добавить новую.

Создание новой страницы на сайте WordPress

2. Укажите название (например Контакты).

3. Скопируйте шорткод.

Шорткод формы

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

Блок Шорткод

В итоге пользователь увидит:

Страница с формой CF7

Как создавать формы

Перейдите Contact Form 7 > Добавить новую.

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

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

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

  • элементы HTML (позволяют создать произвольную HTML-структуру),
  • шорткоды плагина (добавляют элементы формы).

Символом «*» отмечены обязательные к заполнению поля.

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

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

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

Тут можно использовать имена полей. Например, есть поле [text* telephone] . Если в письме вписать [telephone] , на его месте поставится номер телефона, который ввел пользователь.

В поле Кому вписывайте рабочий e-mail. На этот адрес будут приходить все уведомления.

Настройка уведомлений

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

Читайте также:  Настройки upnp для dir 300

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

Интеграция reCaptcha

В плагин уже встроена система спам-защиты от Google. Установим последнюю версию — v.3. Чтобы ее добавить, следуйте простой инструкции.

1. В браузере наберите https://www.google.com/recaptcha/admin/create

2. В опции Ярлык введите произвольное название, отметьте reCAPTCHA v3, в настройке Домены укажите имя сайта, примите Условия использования и кликните Отправить.

Добавление reCAPTCHA на сайте Google

3. Скопируйте ключи.

4. В админ-панели перейдите Contact Form 7 > Интеграция и кликните Настройки интеграции.

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

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

Для Капчи v.2 нужно вставить тег [recaptcha] . В последней версии нет дополнительных полей.

Установка целей метрики

В CF можно отслеживать конверсии для анализа поведенческих факторов. Рассмотрим как это сделать для Яндекс.Метрики.

1. В Метрике зайдите Настройка > Цели > Добавить цель.

Настройка цели в Яндекс-Метрике

2. Придумайте название цели, отметьте JavaScript-событие, укажите Идентификатор цели. Последний нужен для отслеживания действий.

Настройка цели в Яндекс-Метрике

3. Добавьте в файл functions.php активной Ворпресс-темы код

Замените 999 на ID формы, 555 — на Номер цели, а wptest_form — на идентификатор события в Метрике.

ID формы можно посмотреть, если открыть ее на редактирование.

Редактирование формы

Готовые шаблоны

Оформление в CF7 одинаковое для всех форм. Каждую из них можно видоизменить.

Плагин Contact Form 7 Style

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

Чтобы задать внешний вид форме:

  • выберите форму;
  • перейдите на вкладку Contact Form 7 Style Template;
  • используя стрелки, выберите дизайн.

Применение шаблона к выбранной форме в Contact Form 7

Решение проблем и исправление ошибок

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

Не отправляются письма

Тут может быть несколько проблем:

  • электронные письма не отправляются вообще;
  • попадают в СПАМ.
  • неправильные настройки сайта;
  • ограничения на хостинге.

Как исправить?

Чтобы заставить работать почту, есть несколько способов.

1. Стандартные настройки

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

2. WP Mail SMTP

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

Рассмотрим универсальный вариант — бесплатный WP-плагин, который использует внешний SMTP-сервер. Работать будем с почтовым ящиком от Gmail. На него будут приходить письма из формы.

  1. Создайте ящик на Gmail.com.
  2. Установите WP Mail SMTP.
  3. Откройте Настройки > WP Mail SMTP.
  4. Заполните поля От (email) и От имени. Настройка плагина WP Mail SMTP
  5. В опции Метод отправки почты отметьте Прочие SMTP.
  6. Заполните:

SMTP сервер — smtp.gmail.com
Шифрование — TLS
SMTP порт — 587
Авторизация — ВКЛ
Имя пользователя SMTP — контактный email
Пароль SMTP — пароль к ящику

  • Чтобы проверить работу почты, откройте вкладку Проверка почты и нажмите Отправить email. В ящике должно быть тестовое письмо. Отправка тестового письма в плагине WP Mail SMTP
  • Теперь о всех сообщениях, оставленных в форме, вы будете уведомлены.

    3. Код

    Использовать SMTP можно без плагина, с помощью кода в functions.php.

    В коде нужно вписать свой email-адрес и пароль.

    Источник

    Adblock
    detector