Авг
29
4

Всплывающая форма подписки Contact Form 7 с отправкой файла и сохранением Email

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

Почему выбрал именно этот модуль, а не другие решения? Во-первых, работал с ним чаще всего, во-вторых, как минимум уже когда-то реализовывал отображение модального окна для Contact Form 7 и передачу параметра Get в форму. Жаль, но в этот раз данные публикации мне не пригодились, и я использовал совсем другие решения.

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

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

Введите ваш email, и робот сразу же вышлет ссылку на выбранный файл.
[hidden your-link id:url-link]
<label> Ваш E-mail (обязательно)
[email* your-email] </label>
[recaptcha]
[submit class:btn "Отправить"]
Вы соглашаетесь на рассылку, от которой в любой момент можете отписаться.

Здесь важно(!):

  • Неотображаемоеполе для передачи параметра с ID = url-link.
  • Так как в современных версиях модуля защита от спама используется автоматическая и скрытая (3тья версия гугло-капчи), то для вставки поля «recaptcha» и внедрения второй ее версии нужен плагин Contact Form 7 — reCaptcha v2, о котором писал ранее.
  • Во вкладке настроек CF7 «Письмо» не забудьте активировать отправку второго письма, что будет идти пользователям, и добавьте в него ссылку на файл [your-link].

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

2. Popup Maker — всплывающее окно в WordPress

Теперь нужно реализовать модальное окно. Выше по ссылке упоминалась другая статья блога, где похожую задачу я делал через Easy Modal. Но т.к. плагин местами у некоторых пользователей «барахлит», решил затестировать новый вариант — Popup Maker.

Плагин Popup Maker

Модуль имеет очень много интересных фишек, над ним активно ведется работа, загрузок более 400тысяч. Здесь есть настройки внешнего вида, адаптивность, разные триггеры для срабатывания и (что мне было важно) Cookies. То есть вы можете «запомнить» пользователя, который успешно заполнил форму обратной связи, и больше модальное окно ему не показывать.

Настройка модуля Popup Maker

Из важных опций:

  • В текстовое поле вводите шорткод для Contact Form 7.
  • Ниже создаете триггер на «Открытие» и включаете поддержку Cookie с соответствующим условием, озвученным выше.
  • Также на этой странице во вкладке «Отображение» можно выбрать стильный дизайн из заготовленных заранее.

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

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

<a class="popmake-8269" href="https://yadi.sk/i/ХХХХХХХ" target="_blank" rel="noopener noreferrer">Скачать</a>

3. Сообщение про успешную отправку

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

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

Успешная отправка сообщения в Contact Form 7

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

4. Передача параметра в форму

Вообще реализовать эту задачу можно несколькими способами – например, с той же переменной GET (см. документацию модуля) либо использовать плагин Contact Form 7 Dynamic Text Extension для более сложных конструкций. Но ничего из этого в моем случае не подходило, т.к. в сам URL-адрес страницы никакие значения параметров не отправляются.

Без Javascript тут не обойтись. Вот какой код я добавил в файл functions.php:

function wpb_hook_javascript() { ?>
<script>
 jQuery(document).ready(function($) {
		$( '.popmake-8269, .pum-trigger' ).on( 'click', function(event){
 
			$('#url-link' ).val($(this).attr("href"));
		});
 });
 </script>
<?php
}
add_action('wp_footer', 'wpb_hook_javascript');

Тут крайне важно:

  • Правильно вставить код, т.к. в примере скобки открытия/закрытия php-кода отсутствуют, поскольку я добавлял его в самый конец файла (у вас может быть чуть по-другому).
  • Строка ‘.popmake-8269, .pum-trigger’ соответствует идентификатору всплывающего окна, которое вы создали ранее – замените эти значения!
  • Переменная url-link — это ID скрытого элемента формы, созданной на самом первом шаге (я говорил обратить на него внимание).
  • Правильно подключить jQuery в WordPress т.к. с этим могут возникнут определенные проблемы. Лично я грузил его в шапку, а код скрипта был в футере.
add_action('wp_enqueue_scripts', 'ar_enqueue_scripts');
function ar_enqueue_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, false, false);
    wp_enqueue_script( 'jquery' );
}

Если вдруг передача параметров не работает, то проблема может быть именно в этом последнем моменте – придется тестировать Javascript на более простых примерах. Кстати, на одном из проектов пришлось отключать jQuery Updater! Плюс убедитесь еще раз, что заменили значения popmake-8269 и url-link из примера скрипта на свои.

5. Запоминание email-адресов (Flamingo)

Для сохранения информации из Contact Form 7 в базе данных используем модуль Flamingo (он от того же разработчика). У плагина 500тыс. загрузок и весьма активный процесс доработки.

Плагин Flamingo

Здесь после установки, в принципе, ничего дополнительно делать не нужно. Все отправленные сообщения (с полями формы и инфой про юзера) будут доступны из админки + во втором подпункте меню раздела Flamingo отдельно отображаются список всех имен и email’ов отправителей.

Плагин Flamingo

У админа есть возможность немного подправить таблицу со списком сообщений. Там есть 3 поля по умолчанию: тема письма + имя и email от кого оно было отправлено. Если хотите немного изменить логику работы этой функции, заходите в параметры конкретного элемента Contact Form 7 – вкладка «Дополнительные настройки» и прописываете там что-то вроде:

flamingo_email: "[the-email-field]"
flamingo_name: "[the-name-field]"
flamingo_subject: "[the-subject-field]"

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

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

комментария 4 к статье “Всплывающая форма подписки Contact Form 7 с отправкой файла и сохранением Email”

  • Рим   30.10.2019

    Спасибо за замечательную статью, то что нужно! =) Ваш блог в закладки буду переодически почитывать.

  • Tod   31.10.2019

    Рим, не за что) Заходите почитывайте, статьи выходят раз в неделю.

  • Михаил   12.02.2021

    Здравствуйте!
    Вопрос по CF7 и Popup maker.
    «3. Сообщение про успешную отправку». После нажатия на кнопку «Submit» всплывает окно, но тут же исчезает, как только CF7 выдает «Спасибо за Ваше сообщение. Оно успешно отправлено».
    Причём месяц назад всё работало. Это что? неудачное обновление плагинов?
    Заранее спасибо за ответ.

  • Tod   12.02.2021

    Михаил, если работало, а сейчас нет, то тут либо плагины в новых версиях конфликтуют, и их можно легко/быстро откатить на прошлую версию через WP Rollback. Либо в последнее время много ошибок со скриптами после обновления WordPress и их отказал от jquery-migrate — тут иногда выручает плагин Enable jQuery Migrate Helper. Но нужно смотреть, так сходу сложно сказать — посмотрите есть ли JS ошибки в консоли браузера.

Оставить комментарий


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

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

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости