{"id":25792,"date":"2021-06-13T16:11:00","date_gmt":"2021-06-13T13:11:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25792"},"modified":"2021-10-18T02:04:44","modified_gmt":"2021-10-17T23:04:44","slug":"integration-de-mailchimp-avec-le-plugin-contact-form-7","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/integration-de-mailchimp-avec-le-plugin-contact-form-7\/","title":{"rendered":"Int\u00e9gration de MailChimp avec le plugin Contact Form 7"},"content":{"rendered":"

Contact Form 7<\/a> est sans aucun doute l’un des plugins les plus populaires sur WordPress. Au moment de la r\u00e9daction de cet article, le plugin compte plus de 5 millions d’installations actives. Sa popularit\u00e9 r\u00e9side dans sa simplicit\u00e9, sa configuration facile et sa flexibilit\u00e9. On peut \u00e9tendre le plugin \u00e0 ses besoins sans toucher au code du plugin.<\/p>\n

R\u00e9cemment, l’un de nos lecteurs a pos\u00e9 des questions sur l’int\u00e9gration 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\u00e9ussie d’un formulaire, l’e-mail saisi doit \u00eatre ajout\u00e9 \u00e0 leur liste d’abonn\u00e9s MailChimp.<\/p>\n

Le formulaire de contact 7 fournit des \u00e9v\u00e9nements DOM personnalis\u00e9s<\/a> pour \u00e9tendre ses fonctionnalit\u00e9s. En utilisant l’un de leurs \u00e9v\u00e9nements Dom qui est ‘wpcf7mailsent’, vous pouvez int\u00e9grer le code d’abonnement MailChimp.<\/p>\n

Obtenir la cl\u00e9 API MailChimp et l’identifiant d’audience<\/h3>\n

Avant de commencer \u00e0 \u00e9crire du code, vous devez d’abord r\u00e9cup\u00e9rer votre cl\u00e9 API MailChimp et votre ID d’audience qui seront requis dans le code. Saisissez ces d\u00e9tails en suivant les \u00e9tapes ci-dessous.<\/p>\n

Connectez-vous<\/a> \u00e0 votre compte MailChimp. \u00c0 partir de l’ic\u00f4ne de l’utilisateur, s\u00e9lectionnez le compte.<\/p>\n

\"Int\u00e9gration<\/a><\/p>\n

Sur la page suivante, cliquez sur Extra-> Cl\u00e9s API<\/strong>.<\/p>\n

\"Int\u00e9gration<\/a><\/p>\n

Dans la section Vos cl\u00e9s API, cliquez sur Cr\u00e9er une cl\u00e9 et copiez votre cl\u00e9 API.<\/p>\n

\"Int\u00e9gration<\/a><\/p>\n

Ensuite, obtenez un ID d’audience auquel vous devez ajouter vos abonn\u00e9s. Pour cela, cliquez sur le menu Audience puis s\u00e9lectionnez l’option Param\u00e8tres dans la liste d\u00e9roulante G\u00e9rer l’audience.<\/p>\n

\"Int\u00e9gration<\/a><\/p>\n

Sous Param\u00e8tres, cliquez sur le nom de l’audience et les valeurs par d\u00e9faut.<\/p>\n

\"Int\u00e9gration<\/a><\/p>\n

Sur la page suivante, vous trouverez votre identifiant d’audience.<\/p>\n

\"Int\u00e9gration<\/a><\/p>\n

Cr\u00e9er un formulaire \u00e0 l’aide du plugin Contact Form 7<\/h3>\n

Une fois que vous \u00eates pr\u00eat avec vos informations d’identification MailChimp, la prochaine chose que vous devez faire est de cr\u00e9er votre formulaire d’abonnement. Allez dans le menu ‘Formulaires de contact’ et cr\u00e9ez-le. Votre code ressemblera \u00e0 la capture d’\u00e9cran ci-dessous.<\/p>\n

\"Int\u00e9gration<\/a><\/p>\n

Comme nous avons affaire \u00e0 un formulaire de newsletter, d\u00e9finissons le message de r\u00e9ussite qui peut correspondre \u00e0 votre objectif final. Allez dans l’onglet "Messages" et d\u00e9finissez-le comme ci-dessous.<\/p>\n

\"Int\u00e9gration<\/a><\/p>\n

Maintenant, copiez votre shortcode cr\u00e9\u00e9 et placez-le o\u00f9 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\u00e9 \u00e0 votre liste d’abonn\u00e9s MailChimp. \u00c9crivons un code pour cela.<\/p>\n

Ajouter un fichier JavaScript dans WordPress<\/h3>\n

Comme dit pr\u00e9c\u00e9demment, je vais utiliser l’\u00e9v\u00e9nement Dom ‘wpcf7mailsent’ du plugin Contact Form 7. Cela signifie que nous devons \u00e9crire un petit morceau de code JavaScript. Tout d’abord, il doit inclure un fichier JS, par exemple custom.js<\/code>dans votre site WordPress. Nous devons \u00e9galement utiliser Ajax, je vais donc joindre une URL WordPress Ajax et un nonce au fichier JS. Dans vos th\u00e8mes actifs, functions.php<\/code>ajoutez le code ci-dessous.<\/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
Le code ci-dessus inclut un custom.js<\/code>fichier sur le site et attache l’URL Ajax, la cl\u00e9 nonce \u00e0 la variable ‘blog’.<\/p>\n
Votre custom.js<\/code>fichier aura le code JavaScript suivant.<\/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
Remplacez l’espace r\u00e9serv\u00e9 "YOUR_CONTACT_FORM_ID" par votre valeur r\u00e9elle. Vous pouvez obtenir cet identifiant \u00e0 partir du shortcode de votre formulaire de contact. Ceci est n\u00e9cessaire car notre code doit s’ex\u00e9cuter uniquement sur le formulaire de newsletter et non sur les autres formulaires de contact.<\/p>\n
\"Int\u00e9gration<\/a><\/p>\n
La cha\u00eene ‘votre-e-mail’ est le nom que j’ai donn\u00e9 \u00e0 mon champ e-mail. Il reste tel quel. Si vous avez remarqu\u00e9 que j’ai utilis\u00e9 l’action en tant que ‘subscribe_user_by_ajax’ qui sera utilis\u00e9e pour appeler notre m\u00e9thode de rappel Ajax o\u00f9 j’\u00e9crirai un code pour l’abonnement MailChimp.<\/p>\n
Int\u00e9gration de MailChimp avec le plugin Contact Form 7<\/h3>\n
Jusqu’\u00e0 pr\u00e9sent, nous avons cr\u00e9\u00e9 un formulaire de newsletter, \u00e9crit un code JS qui s’ex\u00e9cutera lors de la soumission r\u00e9ussie d’un formulaire. La partie suivante consiste \u00e0 prendre un e-mail et \u00e0 l’envoyer \u00e0 MailChimp \u00e0 l’aide de l’API MailChimp. Dans le code JS, nous avons utilis\u00e9 l’action ‘subscribe_user_by_ajax’, \u00e9crivons donc un code de rappel Ajax pour cela.<\/p>\n
Ajoutez le code ci-dessous dans le functions.php<\/code>fichier de votre th\u00e8me .<\/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
Assurez-vous de remplacer les espaces r\u00e9serv\u00e9s "YOUR_MAILCHIMP_AUDIENCE_ID" et "YOUR_MAILCHIMP_API_KEY" par vos informations d’identification MailChimp r\u00e9elles. Le code ci-dessus prend un e-mail et l’envoie au point de terminaison API de l’abonnement MailChimp. J’ai \u00e9galement d\u00e9fini le statut comme \u00ab\u00a0abonn\u00e9\u00a0\u00bb, ce qui signifie que l’e-mail sera directement inscrit \u00e0 votre liste. Si vous souhaitez envoyer un e-mail de confirmation \u00e0 l’utilisateur pour confirmer son abonnement, d\u00e9finissez le statut sur \u00ab\u00a0en attente\u00a0\u00bb.<\/p>\n
Il s’agit de l’int\u00e9gration de MailChimp avec le plugin Contact Form 7. J’esp\u00e8re que vous avez aim\u00e9 le tutoriel. J’aimerais entendre vos pens\u00e9es et suggestions dans la section des commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n