Краткая предыстория
Был у меня в работе сайт, в котором формы были настроены на плагине Contact Form 7. Сами же эти формы были интегрированы с Mailchimp. Задача состояла в следующем: после того, как пользователь заполнит и отправит определенную форму, сообщение должно попадать в сервис с определенным тегом (теги Mailchimp — это самый простой способ организовать свою аудиторию и пометить контакты на основе имеющейся у вас информации о них).
Использование плагина
Самое простое решение данной задачи в связке с Contact form 7 — это использовать приложение Chimpmatic. Оно очень удобно тем, что для установления дополнительных полей, нам достаточно перейти в админке на страницу редактирования формы, нажать на вкладку Chimpmatic, заполнить поле с API key и плагин готов к использованию.
Самый главный минус этого плагина — большинство полей нам доступны для использования только в платной версии. Ради использования одних только тегов покупать плагин смысла нет.
Решение
Тогда было принято решение сгенерировать форму в сервисе Mailchimp, вставить её на сайт и стилизовать в соответствии с текущей формой. Вот так собственно выглядит сама форма:
Проблем особо со стилизацией не возникло. Но вот нюанс. После того, как наша форма будет отправлена, пользователь должен увидеть окно благодарности:
Форма, которая использует 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).
