Коротка передісторія
Був у мене в роботі сайт, де форми були налаштовані на плагіні 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).
