Actualités WEB et WordPress, thèmes, plugins. Ici, nous partageons des conseils et les meilleures solutions de sites Web.

Intégration de MailChimp avec le plugin Contact Form 7

110

Contact Form 7 est sans aucun doute l’un des plugins les plus populaires sur WordPress. Au moment de la rédaction de cet article, le plugin compte plus de 5 millions d’installations actives. Sa popularité réside dans sa simplicité, sa configuration facile et sa flexibilité. On peut étendre le plugin à ses besoins sans toucher au code du plugin.

Récemment, l’un de nos lecteurs a posé des questions sur l’intégration de MailChimp avec le plugin Contact Form 7. Ils souhaitent utiliser le plugin Contact Form 7 pour le formulaire de newsletter. Il a un champ d’e-mail et lors de la soumission réussie d’un formulaire, l’e-mail saisi doit être ajouté à leur liste d’abonnés MailChimp.

Le formulaire de contact 7 fournit des événements DOM personnalisés pour étendre ses fonctionnalités. En utilisant l’un de leurs événements Dom qui est ‘wpcf7mailsent’, vous pouvez intégrer le code d’abonnement MailChimp.

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.

Intégration de MailChimp avec le plugin Contact Form 7

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

Intégration de MailChimp avec le plugin Contact Form 7

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

Intégration de MailChimp avec le plugin Contact Form 7

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.

Intégration de MailChimp avec le plugin Contact Form 7

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

Intégration de MailChimp avec le plugin Contact Form 7

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

Intégration de MailChimp avec le plugin Contact Form 7

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.

Intégration de MailChimp avec le plugin Contact Form 7

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.

Intégration de MailChimp avec le plugin Contact Form 7

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.

Intégration de MailChimp avec le plugin Contact Form 7

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

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails