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

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

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

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

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

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

• В текстовое поле вводите шорткод для 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 для показа после успешного завершения всего процесса.

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

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 отдельно отображаются список всех имен и email’ов отправителей.

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

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

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

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

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов - 18, средний балл: 4,50 из 7)

Загрузка...

Категории: Возможности; Вопрос-ответ; Плагины;
Теги: email почта, wordpress формы, вордпресс веб-разработка, всплывающие окна, интересные плагины, решение задач wordpress.