{"id":25730,"date":"2021-06-13T15:51:00","date_gmt":"2021-06-13T12:51:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25730"},"modified":"2021-10-18T02:29:57","modified_gmt":"2021-10-17T23:29:57","slug":"mailchimp-integration-mit-contact-form-7-plugin","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/mailchimp-integration-mit-contact-form-7-plugin\/","title":{"rendered":"MailChimp-Integration mit Contact Form 7 Plugin"},"content":{"rendered":"

Contact Form 7<\/a> ist zweifellos eines der beliebtesten Plugins f\u00fcr WordPress. Zum Zeitpunkt des Schreibens dieses Artikels hat das Plugin mehr als 5 Millionen aktive Installationen. Seine Popularit\u00e4t liegt in seiner Einfachheit, einfachen Konfiguration und Flexibilit\u00e4t. Man kann das Plugin nach seinen Bed\u00fcrfnissen erweitern, ohne den Plugin-Code zu ber\u00fchren.<\/p>\n

K\u00fcrzlich fragte einer unserer Leser nach der Integration von MailChimp mit dem Contact Form 7-Plugin. Sie m\u00f6chten das Plugin Contact Form 7 f\u00fcr das Newsletter-Formular verwenden. Es hat ein E-Mail-Feld und nach erfolgreichem Absenden eines Formulars sollte die eingegebene E-Mail zu ihrer MailChimp-Abonnentenliste hinzugef\u00fcgt werden.<\/p>\n

Contact Form 7 bietet benutzerdefinierte DOM-Ereignisse<\/a>, um seine Funktionalit\u00e4t zu erweitern. Mit einem ihrer Dom-Ereignisse, das ‚wpcf7mailsent‘ ist, k\u00f6nnen Sie den MailChimp-Abonnementcode integrieren.<\/p>\n

Erhalten Sie den MailChimp-API-Schl\u00fcssel und die Zielgruppen-ID<\/h3>\n

Bevor wir tats\u00e4chlich mit dem Schreiben von Code beginnen, m\u00fcssen Sie zuerst Ihren MailChimp-API-Schl\u00fcssel und die Zielgruppen-ID abrufen, die im Code erforderlich sind. Rufen Sie diese Details ab, indem Sie die folgenden Schritte ausf\u00fchren.<\/p>\n

Melde dich<\/a> an, um Ihr MailChimp Konto. W\u00e4hlen Sie \u00fcber das Benutzersymbol das Konto aus.<\/p>\n

\"MailChimp-Integration<\/a><\/p>\n

Klicken Sie auf der n\u00e4chsten Seite auf Extra->API-Schl\u00fcssel<\/strong>.<\/p>\n

\"MailChimp-Integration<\/a><\/p>\n

Klicken Sie im Abschnitt Ihre API-Schl\u00fcssel auf Schl\u00fcssel erstellen und kopieren Sie Ihren API-Schl\u00fcssel.<\/p>\n

\"MailChimp-Integration<\/a><\/p>\n

Rufen Sie als N\u00e4chstes eine Audience ID ab, zu der Sie Ihre Abonnenten hinzuf\u00fcgen m\u00fcssen. Klicken Sie dazu auf das Men\u00fc Zielgruppe und w\u00e4hlen Sie dann die Option Einstellungen aus dem Dropdown-Men\u00fc Zielgruppe verwalten.<\/p>\n

\"MailChimp-Integration<\/a><\/p>\n

Klicken Sie unter den Einstellungen auf den Audience-Namen und die Standardeinstellungen.<\/p>\n

\"MailChimp-Integration<\/a><\/p>\n

Auf der n\u00e4chsten Seite finden Sie Ihre Audience ID.<\/p>\n

\"MailChimp-Integration<\/a><\/p>\n

Erstellen Sie ein Formular mit dem Contact Form 7 Plugin<\/h3>\n

Sobald Sie mit Ihren MailChimp-Anmeldeinformationen fertig sind, m\u00fcssen Sie als N\u00e4chstes Ihr Abonnementformular erstellen. Gehen Sie zum Men\u00fc "Kontaktformulare" und erstellen Sie es. Ihr Code wird in etwa wie der Screenshot unten aussehen.<\/p>\n

\"MailChimp-Integration<\/a><\/p>\n

Da wir es mit einem Newsletter-Formular zu tun haben, legen wir die Erfolgsmeldung fest, die mit Ihrem Endziel \u00fcbereinstimmen kann. Gehen Sie zum Tab "Nachrichten" und stellen Sie ihn wie unten beschrieben ein.<\/p>\n

\"MailChimp-Integration<\/a><\/p>\n

Kopieren Sie nun Ihren erstellten Shortcode und platzieren Sie ihn an einer beliebigen Stelle und Sie sehen das Formular mit einem E-Mail-Feld und einer Schaltfl\u00e4che zum Senden. Unser Endziel ist es, wenn Benutzer eine E-Mail eingeben und auf die Schaltfl\u00e4che "Senden" klicken, wird diese E-Mail zu Ihrer MailChimp-Abonnentenliste hinzugef\u00fcgt. Schreiben wir einen Code daf\u00fcr.<\/p>\n

JavaScript-Datei in WordPress hinzuf\u00fcgen<\/h3>\n

Wie bereits erw\u00e4hnt, werde ich das Dom-Ereignis ‚wpcf7mailsent‘ des Contact Form 7-Plugins verwenden. Das bedeutet, dass wir ein kleines St\u00fcck JavaScript-Code schreiben m\u00fcssen. Zuerst muss es eine JS-Datei enthalten, beispielsweise custom.js<\/code>in Ihre WordPress-Site. Wir m\u00fcssen auch Ajax verwenden, damit ich eine WordPress Ajax-URL und Nonce an die JS-Datei anh\u00e4nge. F\u00fcgen Sie in Ihren aktiven Designs functions.php<\/code>den folgenden Code hinzu.<\/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
Der obige Code enth\u00e4lt eine custom.js<\/code>Datei auf der Site und h\u00e4ngt die Ajax-URL, den Nonce-Schl\u00fcssel, an die Variable ‚blog‘ an.<\/p>\n
Ihre custom.js<\/code>Datei enth\u00e4lt den folgenden JavaScript-Code.<\/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
Ersetzen Sie den Platzhalter ‚YOUR_CONTACT_FORM_ID‘ durch Ihren tats\u00e4chlichen Wert. Diese ID k\u00f6nnen Sie dem Shortcode Ihres Kontaktformulars entnehmen. Dies ist erforderlich, da unser Code nur auf dem Newsletter-Formular und nicht auf den anderen Kontaktformularen ausgef\u00fchrt werden soll.<\/p>\n
\"MailChimp-Integration<\/a><\/p>\n
Die Zeichenfolge ‚Ihre-E-Mail‘ ist der Name, den ich meinem E-Mail-Feld gegeben habe. Es bleibt wie es ist. Wenn Sie bemerkt haben, dass ich die Aktion als ’subscribe_user_by_ajax‘ verwendet habe, die verwendet wird, um unsere Ajax-Callback-Methode aufzurufen, in der ich einen Code f\u00fcr das MailChimp-Abonnement schreibe.<\/p>\n
MailChimp-Integration mit Contact Form 7 Plugin<\/h3>\n
Bisher haben wir ein Newsletter-Formular erstellt, einen JS-Code geschrieben, der bei erfolgreicher \u00dcbermittlung eines Formulars ausgef\u00fchrt wird. Der n\u00e4chste Teil besteht darin, eine E-Mail zu nehmen und sie mithilfe der MailChimp-API an MailChimp zu senden. Im JS-Code haben wir die Aktion ’subscribe_user_by_ajax‘ verwendet, also schreiben wir einen Ajax-Callback-Code daf\u00fcr.<\/p>\n
F\u00fcgen Sie den folgenden Code in die functions.php<\/code>Datei Ihres Themes ein .<\/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
Stellen Sie sicher, dass Sie die Platzhalter "YOUR_MAILCHIMP_AUDIENCE_ID" und "YOUR_MAILCHIMP_API_KEY" durch Ihre tats\u00e4chlichen MailChimp-Anmeldeinformationen ersetzen. Der obige Code nimmt eine E-Mail und sendet sie an den API-Endpunkt des MailChimp-Abonnements. Ich setze auch den Status auf "abonniert", was bedeutet, dass die E-Mail direkt in Ihre Liste aufgenommen wird. Wenn Sie dem Benutzer eine Best\u00e4tigungs-E-Mail senden m\u00f6chten, um sein Abonnement zu best\u00e4tigen, setzen Sie den Status auf ‚ausstehend‘.<\/p>\n
Es dreht sich alles um die MailChimp-Integration mit dem Contact Form 7 Plugin. Ich hoffe das Tutorial hat dir gefallen. Ich w\u00fcrde gerne Ihre Gedanken und Vorschl\u00e4ge im Kommentarbereich unten h\u00f6ren.<\/p>\n
Zum Thema passende Artikel<\/h4>\n