Contact Form 7 ist zweifellos eines der beliebtesten Plugins für WordPress. Zum Zeitpunkt des Schreibens dieses Artikels hat das Plugin mehr als 5 Millionen aktive Installationen. Seine Popularität liegt in seiner Einfachheit, einfachen Konfiguration und Flexibilität. Man kann das Plugin nach seinen Bedürfnissen erweitern, ohne den Plugin-Code zu berühren.
Kürzlich fragte einer unserer Leser nach der Integration von MailChimp mit dem Contact Form 7-Plugin. Sie möchten das Plugin Contact Form 7 für 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ügt werden.
Contact Form 7 bietet benutzerdefinierte DOM-Ereignisse, um seine Funktionalität zu erweitern. Mit einem ihrer Dom-Ereignisse, das ‘wpcf7mailsent’ ist, können Sie den MailChimp-Abonnementcode integrieren.
Erhalten Sie den MailChimp-API-Schlüssel und die Zielgruppen-ID
Bevor wir tatsächlich mit dem Schreiben von Code beginnen, müssen Sie zuerst Ihren MailChimp-API-Schlüssel und die Zielgruppen-ID abrufen, die im Code erforderlich sind. Rufen Sie diese Details ab, indem Sie die folgenden Schritte ausführen.
Melde dich an, um Ihr MailChimp Konto. Wählen Sie über das Benutzersymbol das Konto aus.
Klicken Sie auf der nächsten Seite auf Extra->API-Schlüssel.
Klicken Sie im Abschnitt Ihre API-Schlüssel auf Schlüssel erstellen und kopieren Sie Ihren API-Schlüssel.
Rufen Sie als Nächstes eine Audience ID ab, zu der Sie Ihre Abonnenten hinzufügen müssen. Klicken Sie dazu auf das Menü Zielgruppe und wählen Sie dann die Option Einstellungen aus dem Dropdown-Menü Zielgruppe verwalten.
Klicken Sie unter den Einstellungen auf den Audience-Namen und die Standardeinstellungen.
Auf der nächsten Seite finden Sie Ihre Audience ID.
Erstellen Sie ein Formular mit dem Contact Form 7 Plugin
Sobald Sie mit Ihren MailChimp-Anmeldeinformationen fertig sind, müssen Sie als Nächstes Ihr Abonnementformular erstellen. Gehen Sie zum Menü "Kontaktformulare" und erstellen Sie es. Ihr Code wird in etwa wie der Screenshot unten aussehen.
Da wir es mit einem Newsletter-Formular zu tun haben, legen wir die Erfolgsmeldung fest, die mit Ihrem Endziel übereinstimmen kann. Gehen Sie zum Tab "Nachrichten" und stellen Sie ihn wie unten beschrieben ein.
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äche zum Senden. Unser Endziel ist es, wenn Benutzer eine E-Mail eingeben und auf die Schaltfläche "Senden" klicken, wird diese E-Mail zu Ihrer MailChimp-Abonnentenliste hinzugefügt. Schreiben wir einen Code dafür.
JavaScript-Datei in WordPress hinzufügen
Wie bereits erwähnt, werde ich das Dom-Ereignis ‘wpcf7mailsent’ des Contact Form 7-Plugins verwenden. Das bedeutet, dass wir ein kleines Stück JavaScript-Code schreiben müssen. Zuerst muss es eine JS-Datei enthalten, beispielsweise custom.jsin Ihre WordPress-Site. Wir müssen auch Ajax verwenden, damit ich eine WordPress Ajax-URL und Nonce an die JS-Datei anhänge. Fügen Sie in Ihren aktiven Designs functions.phpden folgenden Code hinzu.
<?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' );Der obige Code enthält eine custom.jsDatei auf der Site und hängt die Ajax-URL, den Nonce-Schlüssel, an die Variable ‘blog’ an.
Ihre custom.jsDatei enthält den folgenden JavaScript-Code.
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 );Ersetzen Sie den Platzhalter ‘YOUR_CONTACT_FORM_ID’ durch Ihren tatsächlichen Wert. Diese ID können Sie dem Shortcode Ihres Kontaktformulars entnehmen. Dies ist erforderlich, da unser Code nur auf dem Newsletter-Formular und nicht auf den anderen Kontaktformularen ausgeführt werden soll.
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ür das MailChimp-Abonnement schreibe.
MailChimp-Integration mit Contact Form 7 Plugin
Bisher haben wir ein Newsletter-Formular erstellt, einen JS-Code geschrieben, der bei erfolgreicher Übermittlung eines Formulars ausgeführt wird. Der nächste 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ür.
Fügen Sie den folgenden Code in die functions.phpDatei Ihres Themes ein .
<?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');Stellen Sie sicher, dass Sie die Platzhalter "YOUR_MAILCHIMP_AUDIENCE_ID" und "YOUR_MAILCHIMP_API_KEY" durch Ihre tatsächlichen 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ätigungs-E-Mail senden möchten, um sein Abonnement zu bestätigen, setzen Sie den Status auf ‘ausstehend’.
Es dreht sich alles um die MailChimp-Integration mit dem Contact Form 7 Plugin. Ich hoffe das Tutorial hat dir gefallen. Ich würde gerne Ihre Gedanken und Vorschläge im Kommentarbereich unten hören.
Zum Thema passende Artikel
- MailChimp-Integration auf einer Website mit MailChimp-API und PHP
- So integrieren Sie den MailChimp-Newsletter in die Laravel-Anwendung