Всплывающая форма подписки 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, сохранение почтовых адресов и т.п. Если есть что дополнить к посту – пишити ниже.
комментария 4 к статье “Всплывающая форма подписки Contact Form 7 с отправкой файла и сохранением Email”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Як сховати відсутні товари в Woocommerce шорткодах та схожих товарах
- Сервіс AdMaven + плагін для монетизації трафіка на WordPress сайтах
- Плагіни для створення стрічки новин з біжучим рядком в WordPress
- Як змінити розміщення кнопки оформлення замовлення в WooCommerce
- Плагін WHWS Display In Stock Products First – відображення товарів в наявності першими
- Підписка MonsterONE: чи варто використовувати цей сервіс у 2023 році? (+5 продуктів, які треба скачати в першу чергу)
- Онлайн генератор ссылок на мессенджеры для WordPress и не только
- WooCommerce (46)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (246)
- Сервисы (87)
- Хаки и секреты (87)
- Шаблоны (45)
- Записи и посты wordpress, оформление записи (5,91 из 7, голосов - 47)
- Проблема с адаптивными изображениями в Gutenberg редакторе WordPress (3,90 из 7, голосов - 48)
- Умный копирайт в footer.php для wordpress (5,63 из 7, голосов - 30)
- Обновление плагинов и тем в WordPress: автоматическое, через FTP, скрытие уведомлений (5,19 из 7, голосов - 31)
- Polylang — плагин для мультиязычных сайтов на нескольких языках в WordPress (4,42 из 7, голосов - 31)
- Плагин TinyMCE Advanced – wordpress текстовый редактор (6,35 из 7, голосов - 20)
- Рубрики и категории wordpress, функция wp_list_categories (6,05 из 7, голосов - 20)
- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Советы по выбору холодильника LG с технологией No Frost
- Зачем нужны Wi-Fi ретрансляторы и как выбрать подходящую модель
- Введение в онлайн-казино Slotor777: многообразие игр и привлекательные бонусы
- Необходимость использования облачного хранилища в наше время, что важно и как выгодно?
- Спрощення процесу звітності за допомогою програми BAS Бухгалтерія
- Технологія підключення інтернету GPON та її переваги
- За що гравці найбільше цінують Lineage 2
- Для каких проектов нужна аренда виртуального сервера и что такое VPS
Спасибо за замечательную статью, то что нужно! =) Ваш блог в закладки буду переодически почитывать.
Рим, не за что) Заходите почитывайте, статьи выходят раз в неделю.
Здравствуйте!
Вопрос по CF7 и Popup maker.
«3. Сообщение про успешную отправку». После нажатия на кнопку «Submit» всплывает окно, но тут же исчезает, как только CF7 выдает «Спасибо за Ваше сообщение. Оно успешно отправлено».
Причём месяц назад всё работало. Это что? неудачное обновление плагинов?
Заранее спасибо за ответ.
Михаил, если работало, а сейчас нет, то тут либо плагины в новых версиях конфликтуют, и их можно легко/быстро откатить на прошлую версию через WP Rollback. Либо в последнее время много ошибок со скриптами после обновления WordPress и их отказал от jquery-migrate — тут иногда выручает плагин Enable jQuery Migrate Helper. Но нужно смотреть, так сходу сложно сказать — посмотрите есть ли JS ошибки в консоли браузера.