Автор: Stasyuk Eugene 65 Мітки: 31.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).

Інші статті

Як імпортувати велику базу даних MySQL в OpenServer

Як імпортувати велику базу даних MySQL в OpenServer

Як імпортувати велику базу даних MySQL в OpenServer

Мабуть, усі звикли імпортувати базу даних за допомогою phpMyAdmin. Але ця платформа має обмеження за вагою файлу, який можна завантажити. Тому якщо дамп бази перевищує цю квоту, через phpMyAdmin зробити це не вийде. Сьогодні я покажу альтернативний спосіб завантаження бази даних – через консоль. В OpenServer можна скористатися вбудованою консоллю (але це не обов’язково, можна […]

ACF поля в текстовому редакторі Gutenberg

ACF поля в текстовому редакторі Gutenberg

ACF поля в текстовому редакторі Gutenberg

Gutenberg – уже досить довго використовується у WordPress як основний текстовий редактор. Я, напевно, як і більшість розробників, не особливо горів бажанням його використовувати. Тим більше, що як альтернативу можна було завантажити плагін Classic Editor і далі користуватися старим редактором. Але, у міру використання Gutenberg, я побачив велику кількість його переваг і таким чином плавно […]