Сегодня будет небольшой «кейс» по весьма конкретной задаче, озвученной в заголовке. Однако я не хочу долго размусоливать тему обзорами плагинов и функций, участвующих в этом решении, а представлю вам что-то вроде короткого алгоритма действий. Представьте, что вам нужно организовать подписку во всплывающем окне с отправкой параметра (файла) при клике по ссылке и занесением 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].
Теперь нужно реализовать модальное окно. Выше по ссылке упоминалась другая статья блога, где похожую задачу я делал через 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:
Тут крайне важно:
- Правильно вставить код, т.к. в примере скобки открытия/закрытия php-кода отсутствуют, поскольку я добавлял его в самый конец файла (у вас может быть чуть по-другому).
- Строка ‘.popmake-8269, .pum-trigger’ соответствует идентификатору всплывающего окна, которое вы создали ранее – замените эти значения!
- Переменная url-link — это ID скрытого элемента формы, созданной на самом первом шаге (я говорил обратить на него внимание).
- Правильно подключить jQuery в WordPress т.к. с этим могут возникнут определенные проблемы. Лично я грузил его в шапку, а код скрипта был в футере.
Если вдруг передача параметров не работает, то проблема может быть именно в этом последнем моменте – придется тестировать Javascript на более простых примерах. Плюс убедитесь еще раз, что заменили значения popmake-8269 и url-link на свои.
5. Запоминание email-адресов (Flamingo)
Для сохранения информации из Contact Form 7 в базе данных используем модуль Flamingo (он от того же разработчика). У плагина 500тыс. загрузок и весьма активный процесс доработки.
Здесь после установки, в принципе, ничего дополнительно делать не нужно. Все отправленные сообщения (с полями формы и инфой про юзера) будут доступны из админки + во втором подпункте меню раздела Flamingo отдельно отображаются список всех имен и email’ов отправителей.
У админа есть возможность немного подправить таблицу со списком сообщений. Там есть 3 поля по умолчанию: тема письма + имя и email от кого оно было отправлено. Если хотите немного изменить логику работы этой функции, заходите в параметры конкретного элемента Contact Form 7 – вкладка «Дополнительные настройки» и прописываете там что-то вроде:
Здесь справа располагаются названия полей вашей формы, а слева ячейки таблицы сообщений, куда они будут попадать. На данный момент более гибкого и функционального решения нет – можно изменить только эти три параметра.
Итого. Надеюсь, этот кейс/мануал по созданию всплывающей формы подписки с Contact Form 7 и отправкой файла по почте вам пригодится. Возможно, есть и более изысканное решение, но повторюсь, мне надо было учитывать парочку нюансов – Cookies, сохранение почтовых адресов и т.п. Если есть что дополнить к посту – пишити ниже.