{"id":26157,"date":"2021-06-13T16:30:00","date_gmt":"2021-06-13T13:30:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=26157"},"modified":"2021-10-18T03:01:10","modified_gmt":"2021-10-18T00:01:10","slug":"integrazione-di-mailchimp-con-il-plug-in-contact-form-7","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/integrazione-di-mailchimp-con-il-plug-in-contact-form-7\/","title":{"rendered":"Integrazione di MailChimp con il plug-in Contact Form 7"},"content":{"rendered":"

Contact Form 7<\/a> \u00e8 senza dubbio uno dei plugin pi\u00f9 popolari su WordPress. Al momento della stesura di questo articolo, il plugin ha oltre 5 milioni di installazioni attive. La sua popolarit\u00e0 risiede nella sua semplicit\u00e0, facilit\u00e0 di configurazione e flessibilit\u00e0. Si pu\u00f2 estendere il plug-in alle proprie esigenze senza toccare il codice del plug-in.<\/p>\n

Di recente, uno dei nostri lettori ha chiesto informazioni sull’integrazione di MailChimp con il plug-in Contact Form 7. Vogliono utilizzare il plug-in Contact Form 7 per il modulo newsletter. Ha un campo e-mail e, in caso di invio riuscito di un modulo, l’e-mail inserita dovrebbe essere aggiunta all’elenco degli abbonati MailChimp.<\/p>\n

Contact Form 7 fornisce eventi DOM personalizzati<\/a> per estenderne le funzionalit\u00e0. Usando uno dei loro eventi Dom che \u00e8 ‘wpcf7mailsent’ puoi integrare il codice di abbonamento MailChimp.<\/p>\n

Ottieni la chiave API MailChimp e l’ID pubblico<\/h3>\n

Prima di iniziare effettivamente a scrivere il codice, devi prima prendere la tua chiave API MailChimp e l’ID pubblico che saranno richiesti nel codice. Prendi questi dettagli seguendo i passaggi seguenti.<\/p>\n

Accedi<\/a> al tuo account MailChimp. Dall’icona dell’utente, seleziona l’Account.<\/p>\n

\"Integrazione<\/a><\/p>\n

Nella pagina successiva, fare clic su Extra->Chiavi API<\/strong>.<\/p>\n

\"Integrazione<\/a><\/p>\n

Nella sezione Le tue chiavi API, fai clic su Crea una chiave e copia la tua chiave API.<\/p>\n

\"Integrazione<\/a><\/p>\n

Quindi, ottieni un ID pubblico a cui devi aggiungere i tuoi abbonati. Per questo, fai clic sul menu Pubblico e quindi seleziona l’opzione Impostazioni dal menu a discesa Gestisci pubblico.<\/p>\n

\"Integrazione<\/a><\/p>\n

Sotto le Impostazioni, fai clic sul nome del pubblico e sulle impostazioni predefinite.<\/p>\n

\"Integrazione<\/a><\/p>\n

Nella pagina successiva troverai il tuo ID pubblico.<\/p>\n

\"Integrazione<\/a><\/p>\n

Crea un modulo utilizzando il plug-in Contact Form 7<\/h3>\n

Una volta che sei pronto con le tue credenziali MailChimp, la prossima cosa che devi fare \u00e8 creare il tuo modulo di iscrizione. Vai al menu "Moduli di contatto" e crealo. Il tuo codice sar\u00e0 qualcosa come lo screenshot qui sotto.<\/p>\n

\"Integrazione<\/a><\/p>\n

Poich\u00e9 abbiamo a che fare con un modulo di newsletter, impostiamo il messaggio di successo che pu\u00f2 corrispondere al tuo obiettivo finale. Vai alla scheda "Messaggi" e impostala come di seguito.<\/p>\n

\"Integrazione<\/a><\/p>\n

Ora copia il tuo shortcode creato e posizionalo dove vuoi e vedrai il modulo con un campo email e un pulsante di invio. Il nostro obiettivo finale \u00e8 che quando gli utenti inseriscono un’e-mail e premono il pulsante di invio, questa e-mail verr\u00e0 aggiunta all’elenco degli abbonati MailChimp. Scriviamo un codice per questo.<\/p>\n

Aggiungi file JavaScript in WordPress<\/h3>\n

Come detto prima, utilizzer\u00f2 l’evento Dom ‘wpcf7mailsent’ del plugin Contact Form 7. Significa che dobbiamo scrivere un piccolo pezzo di codice JavaScript. Innanzitutto, deve includere un file JS, ad esempio custom.js<\/code>nel tuo sito WordPress. Dobbiamo anche usare Ajax, quindi allegher\u00f2 un URL Ajax di WordPress e nonce al file JS. Nei tuoi temi attivi functions.php<\/code>aggiungi il codice seguente.<\/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
Il codice sopra include custom.js<\/code>file sul sito e allega l’URL Ajax, chiave nonce alla variabile ‘blog’.<\/p>\n
Il tuo custom.js<\/code>file avr\u00e0 il seguente codice JavaScript.<\/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
Sostituisci il segnaposto "YOUR_CONTACT_FORM_ID" con il tuo valore effettivo. Puoi ottenere questo ID dallo shortcode del tuo modulo di contatto. Questo \u00e8 necessario perch\u00e9 il nostro codice dovrebbe essere eseguito solo sul modulo della newsletter e non sugli altri moduli di contatto.<\/p>\n
\"Integrazione<\/a><\/p>\n
La stringa ‘tua-e-mail’ \u00e8 il nome che ho dato al mio campo e-mail. Rimane cos\u00ec com’\u00e8. Se hai notato che ho usato l’azione come ‘subscribe_user_by_ajax’ che verr\u00e0 utilizzata per chiamare il nostro metodo di callback Ajax dove scriver\u00f2 un codice per l’abbonamento a MailChimp.<\/p>\n
Integrazione di MailChimp con il plug-in Contact Form 7<\/h3>\n
Finora abbiamo creato un modulo per la newsletter, scritto un codice JS che verr\u00e0 eseguito in caso di invio riuscito di un modulo. La parte successiva \u00e8 prendere un’e-mail e inviarla a MailChimp utilizzando l’API MailChimp. Nel codice JS, abbiamo usato l’azione ‘subscribe_user_by_ajax’, quindi scriviamo un codice di callback Ajax per esso.<\/p>\n
Aggiungi il codice seguente nel functions.php<\/code>file del tuo tema .<\/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
Assicurati di sostituire i segnaposto "YOUR_MAILCHIMP_AUDIENCE_ID" e "YOUR_MAILCHIMP_API_KEY" con le tue credenziali MailChimp effettive. Il codice precedente prende un’e-mail e la invia all’endpoint API dell’abbonamento MailChimp. Ho anche impostato lo stato su "iscritto", il che significa che l’email verr\u00e0 iscritta direttamente alla tua lista. Se desideri inviare un’e-mail di conferma all’utente per confermare la sua iscrizione, imposta lo stato su "in sospeso".<\/p>\n
Si tratta dell’integrazione di MailChimp con il plug-in Contact Form 7. Spero che il tutorial ti sia piaciuto. Mi piacerebbe sentire i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.<\/p>\n
articoli Correlati<\/h4>\n