Intégration de MailChimp avec le plugin Contact Form 7

Dernière mise à jour Oct 18, 2021

Teneur

Obtenir la clé API MailChimp et l’identifiant d’audience

Créer un formulaire à l’aide du plugin Contact Form 7

Ajouter un fichier JavaScript dans WordPress

Intégration de MailChimp avec le plugin Contact Form 7

Obtenir la clé API MailChimp et l’identifiant d’audience

Avant de commencer à écrire du code, vous devez d’abord récupérer votre clé API MailChimp et votre ID d’audience qui seront requis dans le code. Saisissez ces détails en suivant les étapes ci-dessous.

Connectez-vous à votre compte MailChimp. À partir de l’icône de l’utilisateur, sélectionnez le compte.

Sur la page suivante, cliquez sur Extra-> Clés API.

Dans la section Vos clés API, cliquez sur Créer une clé et copiez votre clé API.

Ensuite, obtenez un ID d’audience auquel vous devez ajouter vos abonnés. Pour cela, cliquez sur le menu Audience puis sélectionnez l’option Paramètres dans la liste déroulante Gérer l’audience.

Sous Paramètres, cliquez sur le nom de l’audience et les valeurs par défaut.

Sur la page suivante, vous trouverez votre identifiant d’audience.

Créer un formulaire à l’aide du plugin Contact Form 7

Une fois que vous êtes prêt avec vos informations d’identification MailChimp, la prochaine chose que vous devez faire est de créer votre formulaire d’abonnement. Allez dans le menu ‘Formulaires de contact’ et créez-le. Votre code ressemblera à la capture d’écran ci-dessous.

Comme nous avons affaire à un formulaire de newsletter, définissons le message de réussite qui peut correspondre à votre objectif final. Allez dans l’onglet "Messages" et définissez-le comme ci-dessous.

Maintenant, copiez votre shortcode créé et placez-le où vous le souhaitez et vous verrez le formulaire avec un champ e-mail et un bouton d’envoi. Notre objectif final est que lorsque les utilisateurs entrent un e-mail et cliquent sur le bouton Soumettre, cet e-mail sera ajouté à votre liste d’abonnés MailChimp. Écrivons un code pour cela.

Ajouter un fichier JavaScript dans WordPress

Comme dit précédemment, je vais utiliser l’événement Dom ‘wpcf7mailsent’ du plugin Contact Form 7. Cela signifie que nous devons écrire un petit morceau de code JavaScript. Tout d’abord, il doit inclure un fichier JS, par exemple custom.jsdans votre site WordPress. Nous devons également utiliser Ajax, je vais donc joindre une URL WordPress Ajax et un nonce au fichier JS. Dans vos thèmes actifs, functions.phpajoutez le code ci-dessous.

<?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' );

Le code ci-dessus inclut un custom.jsfichier sur le site et attache l’URL Ajax, la clé nonce à la variable ‘blog’.

Votre custom.jsfichier aura le code JavaScript suivant.

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 );

Remplacez l’espace réservé "YOUR_CONTACT_FORM_ID" par votre valeur réelle. Vous pouvez obtenir cet identifiant à partir du shortcode de votre formulaire de contact. Ceci est nécessaire car notre code doit s’exécuter uniquement sur le formulaire de newsletter et non sur les autres formulaires de contact.

La chaîne ‘votre-e-mail’ est le nom que j’ai donné à mon champ e-mail. Il reste tel quel. Si vous avez remarqué que j’ai utilisé l’action en tant que ‘subscribe_user_by_ajax’ qui sera utilisée pour appeler notre méthode de rappel Ajax où j’écrirai un code pour l’abonnement MailChimp.

Intégration de MailChimp avec le plugin Contact Form 7

Jusqu’à présent, nous avons créé un formulaire de newsletter, écrit un code JS qui s’exécutera lors de la soumission réussie d’un formulaire. La partie suivante consiste à prendre un e-mail et à l’envoyer à MailChimp à l’aide de l’API MailChimp. Dans le code JS, nous avons utilisé l’action ‘subscribe_user_by_ajax’, écrivons donc un code de rappel Ajax pour cela.

Ajoutez le code ci-dessous dans le functions.phpfichier de votre thème .

<?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');

Assurez-vous de remplacer les espaces réservés "YOUR_MAILCHIMP_AUDIENCE_ID" et "YOUR_MAILCHIMP_API_KEY" par vos informations d’identification MailChimp réelles. Le code ci-dessus prend un e-mail et l’envoie au point de terminaison API de l’abonnement MailChimp. J’ai également défini le statut comme « abonné », ce qui signifie que l’e-mail sera directement inscrit à votre liste. Si vous souhaitez envoyer un e-mail de confirmation à l’utilisateur pour confirmer son abonnement, définissez le statut sur « en attente ».

Il s’agit de l’intégration de MailChimp avec le plugin Contact Form 7. J’espère que vous avez aimé le tutoriel. J’aimerais entendre vos pensées et suggestions dans la section des commentaires ci-dessous.

Articles Liés

Source d’enregistrement: artisansweb.net