{"id":29358,"date":"2021-06-13T16:40:00","date_gmt":"2021-06-13T13:40:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29358"},"modified":"2021-10-18T03:32:52","modified_gmt":"2021-10-18T00:32:52","slug":"integracja-mailchimp-z-wtyczka-contact-form-7-7","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/integracja-mailchimp-z-wtyczka-contact-form-7-7\/","title":{"rendered":"Integracja MailChimp z wtyczk\u0105 Contact Form 7 7"},"content":{"rendered":"

Contact Form 7<\/a> to bez w\u0105tpienia jedna z najpopularniejszych wtyczek w WordPressie. W chwili pisania tego artyku\u0142u wtyczka ma ponad 5 milion\u00f3w aktywnych instalacji. Jego popularno\u015b\u0107 polega na prostocie, \u0142atwej konfiguracji i elastyczno\u015bci. Wtyczk\u0119 mo\u017cna rozszerzy\u0107 do swoich potrzeb bez dotykania kodu wtyczki.<\/p>\n

Niedawno jeden z naszych czytelnik\u00f3w zapyta\u0142 o integracj\u0119 MailChimp z wtyczk\u0105 Contact Form 7. Chc\u0105 u\u017cy\u0107 wtyczki Contact Form 7 do formularza newslettera. Posiada pole e-mail i po pomy\u015blnym przes\u0142aniu formularza, wpisany e-mail powinien zosta\u0107 dodany do listy subskrybent\u00f3w MailChimp.<\/p>\n

Contact Form 7 udost\u0119pnia niestandardowe zdarzenia DOM w<\/a> celu rozszerzenia jego funkcjonalno\u015bci. Korzystaj\u0105c z jednego z ich zdarze\u0144 Dom, czyli \u201ewpcf7mailsent", mo\u017cesz zintegrowa\u0107 kod subskrypcji MailChimp.<\/p>\n

Uzyskaj klucz API MailChimp i identyfikator odbiorc\u00f3w<\/h3>\n

Zanim zaczniemy pisa\u0107 kod, musisz najpierw pobra\u0107 klucz API MailChimp i identyfikator Audience, kt\u00f3ry b\u0119dzie wymagany w kodzie. Zdob\u0105d\u017a te szczeg\u00f3\u0142y, wykonuj\u0105c poni\u017csze czynno\u015bci.<\/p>\n

Zaloguj si\u0119<\/a> na swoje konto MailChimp. Z ikony u\u017cytkownika wybierz Konto.<\/p>\n

\"Integracja<\/a><\/p>\n

Na nast\u0119pnej stronie kliknij Extra->Klucze API<\/strong>.<\/p>\n

\"Integracja<\/a><\/p>\n

W sekcji Twoje klucze API kliknij Utw\u00f3rz klucz i skopiuj sw\u00f3j klucz API.<\/p>\n

\"Integracja<\/a><\/p>\n

Nast\u0119pnie zdob\u0105d\u017a identyfikator odbiorc\u00f3w, do kt\u00f3rego musisz doda\u0107 swoich subskrybent\u00f3w. W tym celu kliknij menu Odbiorcy, a nast\u0119pnie wybierz opcj\u0119 Ustawienia z menu rozwijanego Zarz\u0105dzaj odbiorcami.<\/p>\n

\"Integracja<\/a><\/p>\n

W Ustawieniach kliknij nazw\u0119 odbiorc\u00f3w i ustawienia domy\u015blne.<\/p>\n

\"Integracja<\/a><\/p>\n

Na nast\u0119pnej stronie znajdziesz sw\u00f3j identyfikator odbiorc\u00f3w.<\/p>\n

\"Integracja<\/a><\/p>\n

Utw\u00f3rz formularz za pomoc\u0105 wtyczki Contact Form 7<\/h3>\n

Gdy b\u0119dziesz gotowy z danymi uwierzytelniaj\u0105cymi MailChimp, nast\u0119pn\u0105 rzecz\u0105, kt\u00f3r\u0105 musisz zrobi\u0107, to utworzy\u0107 formularz subskrypcji. Przejd\u017a do menu \u201eFormularze kontaktowe” i utw\u00f3rz je. Tw\u00f3j kod b\u0119dzie podobny do poni\u017cszego zrzutu ekranu.<\/p>\n

\"Integracja<\/a><\/p>\n

Poniewa\u017c mamy do czynienia z formularzem newslettera, ustawmy komunikat o sukcesie, kt\u00f3ry b\u0119dzie pasowa\u0142 do Twojego celu ko\u0144cowego. Przejd\u017a do zak\u0142adki \u201eWiadomo\u015bci” i ustaw j\u0105 jak poni\u017cej.<\/p>\n

\"Integracja<\/a><\/p>\n

Teraz skopiuj utworzony skr\u00f3t i umie\u015b\u0107 go w dowolnym miejscu, a zobaczysz formularz z polem e-mail i przyciskiem przesy\u0142ania. Naszym celem ko\u0144cowym jest, gdy u\u017cytkownicy wprowadz\u0105 wiadomo\u015b\u0107 e-mail i klikn\u0105 przycisk przesy\u0142ania, ten e-mail zostanie dodany do listy subskrybent\u00f3w MailChimp. Napiszmy do tego kod.<\/p>\n

Dodaj plik JavaScript w WordPress<\/h3>\n

Jak wspomniano wcze\u015bniej, zamierzam u\u017cy\u0107 zdarzenia Dom 'wpcf7mailsent’ wtyczki Contact Form 7. Oznacza to, \u017ce musimy napisa\u0107 ma\u0142y kawa\u0142ek kodu JavaScript. Po pierwsze, musi zawiera\u0107 plik JS, powiedzmy custom.js<\/code>w witrynie WordPress. Musimy r\u00f3wnie\u017c u\u017cy\u0107 Ajax, wi\u0119c do\u0142\u0105cz\u0119 URL Ajax WordPress i jednorazowy do pliku JS. W swoich aktywnych motywach functions.php<\/code>dodaj poni\u017cszy kod.<\/p>\n

<?php\n...\n...\nfunction custom_enqueue_scripts() {\n\u00a0\u00a0\u00a0\/\/ Register the script\n\u00a0\u00a0\u00a0\u00a0wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array(), false, true );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Localize the script with new data\n\u00a0\u00a0\u00a0\u00a0$script_data_array = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ajaxurl' => admin_url( 'admin-ajax.php' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security' => wp_create_nonce( 'subscribe_user' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'custom-script', 'blog', $script_data_array );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Enqueued script with localized data.\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'custom-script' );\n}\nadd_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );<\/code><\/pre>\n
Powy\u017cszy kod zawiera custom.js<\/code>plik na stronie i do\u0142\u0105cza adres URL Ajax, klucz nonce do zmiennej \u201eblog”.<\/p>\n
Tw\u00f3j custom.js<\/code>plik b\u0119dzie zawiera\u0142 nast\u0119puj\u0105cy kod JavaScript.<\/p>\n
document.addEventListener( 'wpcf7mailsent', function( event) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if ('YOUR_CONTACT_FORM_ID' == event.detail.contactFormId) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var inputs = event.detail.inputs;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (var i = 0; i < inputs.length; i++) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if ('your-email' == inputs[i].name) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'action': 'subscribe_user_by_ajax',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'email': inputs[i].value,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security': blog.security\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0jQuery.post(blog.ajaxurl, data, function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n}, false );<\/code><\/pre>\n
Zast\u0105p symbol zast\u0119pczy \u201eYOUR_CONTACT_FORM_ID” swoj\u0105 rzeczywist\u0105 warto\u015bci\u0105. Mo\u017cesz uzyska\u0107 ten identyfikator z kodu skr\u00f3conego formularza kontaktowego. Jest to wymagane, poniewa\u017c nasz kod powinien by\u0107 wykonywany tylko na formularzu newslettera, a nie na innych formularzach kontaktowych.<\/p>\n
\"Integracja<\/a><\/p>\n
Ci\u0105g \u201etw\u00f3j-e-mail” to nazwa, kt\u00f3r\u0105 nada\u0142em mojemu polu e-mail. Pozostaje tak, jak jest. Je\u015bli zauwa\u017cy\u0142e\u015b, \u017ce u\u017cy\u0142em akcji jako 'subscribe_user_by_ajax’, kt\u00f3ra zostanie u\u017cyta do wywo\u0142ania naszej metody wywo\u0142ania zwrotnego Ajax, gdzie napisz\u0119 kod subskrypcji MailChimp.<\/p>\n
Integracja MailChimp z wtyczk\u0105 Contact Form 7 7<\/h3>\n
Do tej pory stworzyli\u015bmy formularz newslettera, napisali\u015bmy kod JS, kt\u00f3ry wykona si\u0119 po pomy\u015blnym przes\u0142aniu formularza. Nast\u0119pn\u0105 cz\u0119\u015bci\u0105 jest wzi\u0119cie wiadomo\u015bci e-mail i wys\u0142anie jej do MailChimp za pomoc\u0105 interfejsu API MailChimp. W kodzie JS u\u017cyli\u015bmy akcji 'subscribe_user_by_ajax’, wi\u0119c napiszmy dla niej kod wywo\u0142ania zwrotnego Ajax.<\/p>\n
Dodaj poni\u017cszy kod do functions.php<\/code>pliku motywu .<\/p>\n
<?php\n...\n...\n\u00a0\nfunction subscribe_user_by_ajax_callback() {\n\u00a0\u00a0\u00a0\u00a0check_ajax_referer('subscribe_user', 'security');\n\u00a0\u00a0\u00a0\u00a0$email = $_POST['email'];\n\u00a0\u00a0\u00a0\u00a0$audience_id = 'YOUR_MAILCHIMP_AUDIENCE_ID';\n\u00a0\u00a0\u00a0\u00a0$api_key = 'YOUR_MAILCHIMP_API_KEY';\n\u00a0\u00a0\u00a0\u00a0$data_center = substr($api_key,strpos($api_key,'-')+1);\n\u00a0\u00a0\u00a0\u00a0$url = 'https:\/\/'. $data_center .'.api.mailchimp.com\/3.0\/lists\/'. $audience_id .'\/members';\n\u00a0\u00a0\u00a0\u00a0$auth = base64_encode( 'user:'. $api_key );\n\u00a0\u00a0\u00a0\u00a0$arr_data = json_encode(array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'email_address' => $email,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'status' => 'subscribed' \/\/pass 'subscribed' or 'pending'\n\u00a0\u00a0\u00a0\u00a0));\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$response = wp_remote_post( $url, array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'method' => 'POST',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'headers' => array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'Content-Type' => 'application\/json',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'Authorization' => \"Basic $auth\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'body' => $arr_data,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if (is_wp_error( $response)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error_message = $response->get_error_message();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo \"Something went wrong: $error_message\";\n\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$status_code = wp_remote_retrieve_response_code( $response );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0switch ($status_code) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case '200':\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo $status_code;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case '400':\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$api_response = json_decode( wp_remote_retrieve_body( $response ), true );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo $api_response['title'];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0default:\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo 'Something went wrong. Please try again.';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}\nadd_action('wp_ajax_subscribe_user_by_ajax', 'subscribe_user_by_ajax_callback');\nadd_action('wp_ajax_nopriv_subscribe_user_by_ajax', 'subscribe_user_by_ajax_callback');<\/code><\/pre>\n
Pami\u0119taj, aby zast\u0105pi\u0107 symbole zast\u0119pcze \u201eYOUR_MAILCHIMP_AUDIENCE_ID” i \u201eYOUR_MAILCHIMP_API_KEY” rzeczywistymi po\u015bwiadczeniami MailChimp. Powy\u017cszy kod pobiera wiadomo\u015b\u0107 e-mail i wysy\u0142a j\u0105 do punktu ko\u0144cowego interfejsu API subskrypcji MailChimp. Ustawi\u0142em r\u00f3wnie\u017c status jako \u201esubskrybowany”, co oznacza, \u017ce \u200b\u200be-mail zostanie bezpo\u015brednio zapisany na twoj\u0105 list\u0119. Je\u015bli chcesz wys\u0142a\u0107 wiadomo\u015b\u0107 e-mail z potwierdzeniem do u\u017cytkownika, aby potwierdzi\u0107 jego subskrypcj\u0119, ustaw status jako \u201eoczekuj\u0105cy”.<\/p>\n
Chodzi o integracj\u0119 MailChimp z wtyczk\u0105 Contact Form 7. Mam nadziej\u0119, \u017ce podoba\u0142 Ci si\u0119 samouczek. Chcia\u0142bym us\u0142ysze\u0107 wasze przemy\u015blenia i sugestie w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n