WEB и WordPress новости, темы, плагины. Здесь мы делимся советами и лучшими решениями для сайтов.

Интеграция MailChimp с плагином Contact Form 7

156

Contact Form 7, без сомнения, один из самых популярных плагинов на WordPress. На момент написания этой статьи у плагина было 5+ миллионов активных установок. Его популярность заключается в простоте, удобстве настройки и гибкости. Можно расширить плагин для своих нужд, не касаясь кода плагина.

Недавно один из наших читателей спросил об интеграции MailChimp с плагином Contact Form 7. Они хотят использовать плагин Contact Form 7 для формы информационного бюллетеня. В нем есть поле электронной почты, и при успешной отправке формы введенный адрес электронной почты должен быть добавлен в их список подписчиков MailChimp.

Контактная форма 7 предоставляет настраиваемые события DOM для расширения своей функциональности. Используя одно из их событий Dom, которое называется wpcf7mailsent, вы можете интегрировать код подписки MailChimp.

Получите ключ API MailChimp и идентификатор аудитории

Прежде чем мы фактически начнем писать код, вам нужно сначала получить свой ключ API MailChimp и идентификатор аудитории, которые потребуются в коде. Получите эти сведения, выполнив следующие действия.

Войдите в свою учетную запись MailChimp. Из значка пользователя выберите Учетную запись.

Интеграция MailChimp с плагином Contact Form 7

На следующей странице нажмите Extra-> API keys.

Интеграция MailChimp с плагином Contact Form 7

В разделе «Ваши ключи API» нажмите «Создать ключ» и скопируйте свой ключ API.

Интеграция MailChimp с плагином Contact Form 7

Затем получите идентификатор аудитории, к которому нужно добавить подписчиков. Для этого щелкните меню «Аудитория», а затем выберите параметр «Настройки» в раскрывающемся списке «Управление аудиторией».

Интеграция MailChimp с плагином Contact Form 7

В разделе “Настройки” нажмите на название аудитории и значения по умолчанию.

Интеграция MailChimp с плагином Contact Form 7

На следующей странице вы найдете свой идентификатор аудитории.

Интеграция MailChimp с плагином Contact Form 7

Создайте форму с помощью плагина Contact Form 7

Когда вы будете готовы ввести свои учетные данные MailChimp, вам нужно будет создать форму подписки. Перейдите в меню «Контактные формы» и создайте его. Ваш код будет примерно таким, как на скриншоте ниже.

Интеграция MailChimp с плагином Contact Form 7

Поскольку мы имеем дело с формой информационного бюллетеня, давайте установим сообщение об успехе, которое может соответствовать вашей конечной цели. Перейдите на вкладку «Сообщения» и установите его, как показано ниже.

Интеграция MailChimp с плагином Contact Form 7

Теперь скопируйте созданный шорткод и поместите его в любом месте, и вы увидите форму с полем электронной почты и кнопкой отправки. Наша конечная цель – когда пользователи вводят адрес электронной почты и нажимают кнопку отправки, это письмо добавляется в ваш список подписчиков MailChimp. Напишем для него код.

Добавить файл JavaScript в WordPress

Как было сказано ранее, я собираюсь использовать событие Dom wpcf7mailsent плагина Contact Form 7. Это означает, что нам нужно написать небольшой фрагмент кода JavaScript. Во-первых, он должен включить файл JS, скажем, custom.jsна вашем сайте WordPress. Нам также нужно использовать Ajax, поэтому я прикреплю URL-адрес WordPress Ajax и nonce к файлу JS. В ваши активные темы functions.phpдобавьте приведенный ниже код.

<?php ... ... function custom_enqueue_scripts() {    // Register the script     wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array(), false, true );       // Localize the script with new data     $script_data_array = array(         'ajaxurl' => admin_url( 'admin-ajax.php' ),         'security' => wp_create_nonce( 'subscribe_user' ),     );     wp_localize_script( 'custom-script', 'blog', $script_data_array );       // Enqueued script with localized data.     wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );

Приведенный выше код включает custom.jsфайл на сайт и прикрепляет ключ Ajax URL, nonce к переменной blog.

Ваш custom.jsфайл будет иметь следующий код JavaScript.

document.addEventListener( 'wpcf7mailsent', function( event) {       if ('YOUR_CONTACT_FORM_ID' == event.detail.contactFormId) {         var inputs = event.detail.inputs;           for (var i = 0; i < inputs.length; i++) {             if ('your-email' == inputs[i].name) {                   var data = {                     'action': 'subscribe_user_by_ajax',                     'email': inputs[i].value,                     'security': blog.security                 };                 jQuery.post(blog.ajaxurl, data, function(response) {                     console.log(response);                 });                 break;             }         }     } }, false );

Замените заполнитель YOUR_CONTACT_FORM_ID своим фактическим значением. Вы можете получить этот идентификатор из шорткода вашей контактной формы. Это необходимо, потому что наш код должен выполняться только в форме информационного бюллетеня, а не в других контактных формах.

Интеграция MailChimp с плагином Contact Form 7

Строка «ваш-адрес электронной почты» – это имя, которое я дал своему полю электронной почты. Остается как есть. Если вы заметили, я использовал действие как «subscribe_user_by_ajax», которое будет использоваться для вызова нашего метода обратного вызова Ajax, где я напишу код для подписки MailChimp.

Интеграция MailChimp с плагином Contact Form 7

До сих пор мы создали форму информационного бюллетеня, написали JS-код, который будет выполняться при успешной отправке формы. Следующая часть – взять электронное письмо и отправить его в MailChimp с помощью MailChimp API. В коде JS мы использовали действие subscribe_user_by_ajax, поэтому давайте напишем для него код обратного вызова Ajax.

Добавьте приведенный ниже код в functions.phpфайл вашей темы .

<?php ... ...   function subscribe_user_by_ajax_callback() {     check_ajax_referer('subscribe_user', 'security');     $email = $_POST['email'];     $audience_id = 'YOUR_MAILCHIMP_AUDIENCE_ID';     $api_key = 'YOUR_MAILCHIMP_API_KEY';     $data_center = substr($api_key,strpos($api_key,'-')+1);     $url = 'https://'. $data_center .'.api.mailchimp.com/3.0/lists/'. $audience_id .'/members';     $auth = base64_encode( 'user:'. $api_key );     $arr_data = json_encode(array(         'email_address' => $email,         'status' => 'subscribed' //pass 'subscribed' or 'pending'     ));       $response = wp_remote_post( $url, array(             'method' => 'POST',             'headers' => array(                 'Content-Type' => 'application/json',                 'Authorization' => "Basic $auth"             ),             'body' => $arr_data,         )     );       if (is_wp_error( $response)) {        $error_message = $response->get_error_message();        echo "Something went wrong: $error_message";     } else {         $status_code = wp_remote_retrieve_response_code( $response );         switch ($status_code) {             case '200':                 echo $status_code;                 break;             case '400':                 $api_response = json_decode( wp_remote_retrieve_body( $response ), true );                 echo $api_response['title'];                 break;             default:                 echo 'Something went wrong. Please try again.';                 break;         }     }     wp_die(); } add_action('wp_ajax_subscribe_user_by_ajax', 'subscribe_user_by_ajax_callback'); add_action('wp_ajax_nopriv_subscribe_user_by_ajax', 'subscribe_user_by_ajax_callback');

Обязательно замените заполнители YOUR_MAILCHIMP_AUDIENCE_ID и YOUR_MAILCHIMP_API_KEY своими фактическими учетными данными MailChimp. Приведенный выше код принимает электронное письмо и отправляет его в конечную точку API подписки MailChimp. Я также установил статус «подписан», что означает, что письмо будет подписано непосредственно на ваш список. Если вы хотите отправить пользователю электронное письмо с подтверждением, чтобы подтвердить свою подписку, установите статус как «ожидающий».

Все дело в интеграции MailChimp с плагином Contact Form 7. Надеюсь, вам понравился урок. Я хотел бы услышать ваши мысли и предложения в разделе комментариев ниже.

Статьи по Теме

Источник записи: artisansweb.net

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее