Автор: Stasyuk Eugene 134 Метки: 30.05.2022

Краткая предыстория

Был у меня в работе сайт, в котором формы были настроены на плагине Contact Form 7. Сами же эти формы были интегрированы с Mailchimp. Задача состояла в следующем: после того, как пользователь заполнит и отправит определенную форму, сообщение должно попадать в сервис с определенным тегом (теги Mailchimp — это самый простой способ организовать свою аудиторию и пометить контакты на основе имеющейся у вас информации о них).

Использование плагина

Самое простое решение данной задачи в связке с Contact form 7 — это использовать приложение Chimpmatic. Оно очень удобно тем, что для установления дополнительных полей, нам достаточно перейти в админке на страницу редактирования формы, нажать на вкладку Chimpmatic, заполнить поле с API key и плагин готов к использованию.

chimpmatic

Самый главный минус этого плагина — большинство полей нам доступны для использования только в платной версии. Ради использования одних только тегов покупать плагин смысла нет.

Решение

Тогда было принято решение сгенерировать форму в сервисе Mailchimp, вставить её на сайт и стилизовать в соответствии с текущей формой. Вот так собственно выглядит сама форма:

form

Проблем особо со стилизацией не возникло. Но вот нюанс. После того, как наша форма будет отправлена, пользователь должен увидеть окно благодарности:

thanks

Форма, которая использует Contact form 7 окно благодарности, появляется тогда, когда в скрипте срабатывает событие wpcf7mailsent (срабатывает, когда форма успешно была отправлена на сервер и почта отправлена адресату). Mailchimp в своих формах, к сожалению, подобного функционала не предоставляет. Но, если посмотреть на код, то в разметке формы можно встретить такую конструкцию:

<div id="mce-responses" class="clear">
  <div id="mce-error-response" class="response" style="display: none;"></div>
  <div id="mce-success-response" class="response" style="display: none;"></div>
</div>

У нас есть два контейнера. Один из них id=’mce-error-response’ используется формой для выведения текста ошибки. Второй id=’mce-success-response’ — для выведения сообщения об успешной отправке формы. Изначально оба контейнера пусты. А поскольку в повторном использовании формы после отправки сообщения необходимости у нас нет, лучшим вариантом будет просто привязать появление окна к событию срабатывающему при изменении элемента. Таковым событием у нас является DOMSubtreeModified. Итоговый скрипт появления окна выглядит вот так:

document.querySelector("#mce-success-response").addEventListener("DOMSubtreeModified", function() {
 $( '.popup' ).addClass( 'success' );
 $( '.popup-inner' ).remove();
});

В данном примере, когда срабатывает событие, мы добавляем общему контейнеру с классом .popup класс .success и удаляем элемент который оборачивает нашу форму (.popup-inner).

Другие статьи

Wp Favs — менеджер плагинов для WordPress

Wp Favs — менеджер плагинов для WordPress

Wp Favs — менеджер плагинов для WordPress

Когда ты на регулярной основе создаешь шаблоны для WordPress, то сталкиваешься с одним рутинным моментом, который отнимает у тебя часть времени — загрузка и активация плагинов. Довольно успешно эту проблему решает плагин WP Favs. Вы просто создаете список плагинов, который вы регулярно используете, и потом скопом загружаете его к себе на сайт. Процесс работы с […]

Как вытянуть содержимое svg из тега img? svg

Как вытянуть содержимое svg из тега img?

Как вытянуть содержимое svg из тега img?

Графика в формате svg — довольно удобный и широкоиспользуемый формат изображения. Например в svg с помощью стилей css мы можем менять его цвет. И как мы знаем — данную процедуру мы можем проделать только если на странице присутствует разметка svg. А что делать если такое изображение подключено к странице с помощью тега img. В таком […]