{"id":29497,"date":"2021-06-13T16:26:00","date_gmt":"2021-06-13T13:26:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29497"},"modified":"2021-10-17T04:16:54","modified_gmt":"2021-10-17T01:16:54","slug":"mailchimp-integration-med-plugin-for-kontaktformular-7","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/mailchimp-integration-med-plugin-for-kontaktformular-7\/","title":{"rendered":"MailChimp-integration med Plugin f\u00f6r kontaktformul\u00e4r 7"},"content":{"rendered":"

Kontaktformul\u00e4r 7<\/a> \u00e4r utan tvekan ett av de mest popul\u00e4ra pluginsna p\u00e5 WordPress. N\u00e4r denna artikel skrivs har plugin-programmet 5+ miljoner aktiva installationer. Dess popularitet ligger i dess enkelhet, enkel konfiguration och flexibilitet. Man kan ut\u00f6ka plugin-programmet till deras behov utan att r\u00f6ra plugin-koden.<\/p>\n

Nyligen fr\u00e5gade en av v\u00e5ra l\u00e4sare om MailChimp-integration med Contact Form 7-plugin. De vill anv\u00e4nda plugin-formul\u00e4ret Contact Form 7 f\u00f6r nyhetsbrevsformul\u00e4ret. Det har ett e-postf\u00e4lt och vid framg\u00e5ngsrik inl\u00e4mning av ett formul\u00e4r ska det angivna e-postmeddelandet l\u00e4ggas till i deras MailChimp-abonnentlista.<\/p>\n

Kontaktformul\u00e4r 7 tillhandah\u00e5ller anpassade DOM-evenemang f\u00f6r<\/a> att ut\u00f6ka dess funktionalitet. Med hj\u00e4lp av en av deras Dom-h\u00e4ndelser som \u00e4r ’wpcf7mailsent’ kan du integrera MailChimp-prenumerationskoden.<\/p>\n

F\u00e5 MailChimp API-nyckel och publik-ID<\/h3>\n

Innan vi faktiskt b\u00f6rjar skriva kod m\u00e5ste du f\u00f6rst ta tag i din MailChimp API-nyckel och m\u00e5lgrupps-ID som kr\u00e4vs i koden. Ta tag i dessa detaljer genom att f\u00f6lja stegen nedan.<\/p>\n

Logga in<\/a> p\u00e5 ditt MailChimp-konto. V\u00e4lj konto fr\u00e5n anv\u00e4ndarikonen.<\/p>\n

\"MailChimp-integration<\/a><\/p>\n

Klicka p\u00e5 Extra-> API-nycklar<\/strong> p\u00e5 n\u00e4sta sida .<\/p>\n

\"MailChimp-integration<\/a><\/p>\n

Under avsnittet Dina API-nycklar klickar du p\u00e5 Skapa en nyckel och kopierar din API-nyckel.<\/p>\n

\"MailChimp-integration<\/a><\/p>\n

D\u00e4refter f\u00e5r du ett publik-ID som du beh\u00f6ver l\u00e4gga till dina prenumeranter. Klicka p\u00e5 menyn M\u00e5lgrupp f\u00f6r detta och v\u00e4lj sedan alternativet Inst\u00e4llningar i rullgardinsmenyn Hantera publik.<\/p>\n

\"MailChimp-integration<\/a><\/p>\n

Under Inst\u00e4llningar klickar du p\u00e5 m\u00e5lgruppens namn och standardinst\u00e4llningar.<\/p>\n

\"MailChimp-integration<\/a><\/p>\n

P\u00e5 n\u00e4sta sida hittar du ditt publik-ID.<\/p>\n

\"MailChimp-integration<\/a><\/p>\n

Skapa ett formul\u00e4r med hj\u00e4lp av kontaktformul\u00e4r 7-plugin<\/h3>\n

N\u00e4r du \u00e4r redo med dina MailChimp-referenser \u00e4r n\u00e4sta du beh\u00f6ver g\u00f6ra att skapa ditt prenumerationsformul\u00e4r. G\u00e5 till menyn "Kontaktformul\u00e4r" och skapa den. Din kod kommer att vara ungef\u00e4r som sk\u00e4rmdumpen nedan.<\/p>\n

\"MailChimp-integration<\/a><\/p>\n

N\u00e4r vi har att g\u00f6ra med ett nyhetsbrevformul\u00e4r, l\u00e5t oss st\u00e4lla in ett framg\u00e5ngsmeddelande som kan matcha ditt slutm\u00e5l. G\u00e5 till fliken "Meddelanden" och st\u00e4ll in den som nedan.<\/p>\n

\"MailChimp-integration<\/a><\/p>\n

Kopiera nu din skapade kortkod och placera den var du vill s\u00e5 ser du formul\u00e4ret med ett e-postf\u00e4lt och skicka-knappen. V\u00e5rt slutm\u00e5l \u00e4r n\u00e4r anv\u00e4ndare anger ett e-postmeddelande och trycker p\u00e5 skicka-knappen, detta e-postmeddelande kommer att l\u00e4ggas till i din MailChimp-prenumerantlista. L\u00e5t oss skriva en kod f\u00f6r det.<\/p>\n

L\u00e4gg till JavaScript-fil i WordPress<\/h3>\n

Som sagt tidigare ska jag anv\u00e4nda Dom-h\u00e4ndelsen ’wpcf7mailsent’ i plugin-formul\u00e4ret Contact Form 7. Det betyder att vi m\u00e5ste skriva en liten bit JavaScript-kod. F\u00f6rst m\u00e5ste den inkludera en JS-fil, s\u00e4g custom.js<\/code>p\u00e5 din WordPress-webbplats. Vi m\u00e5ste ocks\u00e5 anv\u00e4nda Ajax s\u00e5 jag bifogar en WordPress Ajax URL och nonce till JS-filen. functions.php<\/code>L\u00e4gg till nedanst\u00e5ende kod i dina aktiva teman .<\/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
Ovanst\u00e5ende kod inneh\u00e5ller custom.js<\/code>filen p\u00e5 webbplatsen och bifogar Ajax URL, nonce-nyckel till "blogg" -variabeln.<\/p>\n
Din custom.js<\/code>fil kommer att ha f\u00f6ljande JavaScript-kod.<\/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
Ers\u00e4tt platsh\u00e5llaren ’YOUR_CONTACT_FORM_ID’ med ditt faktiska v\u00e4rde. Du kan f\u00e5 detta ID fr\u00e5n kortkoden i ditt kontaktformul\u00e4r. Detta kr\u00e4vs eftersom v\u00e5r kod endast ska k\u00f6ras p\u00e5 nyhetsbrevsformul\u00e4ret och inte p\u00e5 andra kontaktformul\u00e4r.<\/p>\n
\"MailChimp-integration<\/a><\/p>\n
Str\u00e4ngen "din-e-post" \u00e4r namnet jag har gett till mitt e-postf\u00e4lt. Det f\u00f6rblir som det \u00e4r. Om du m\u00e4rkte att jag har anv\u00e4nt \u00e5tg\u00e4rden som ’subscribe_user_by_ajax’ som kommer att anv\u00e4ndas f\u00f6r att ringa v\u00e5r Ajax callback-metod d\u00e4r jag skriver en kod f\u00f6r MailChimp-prenumeration.<\/p>\n
MailChimp-integration med Plugin f\u00f6r kontaktformul\u00e4r 7<\/h3>\n
Hittills har vi skapat ett nyhetsbrevsformul\u00e4r, skrivit en JS-kod som kommer att k\u00f6ras vid framg\u00e5ngsrik inl\u00e4mning av ett formul\u00e4r. N\u00e4sta del \u00e4r att ta ett e-postmeddelande och skicka det till MailChimp med MailChimp API. I JS-koden anv\u00e4nde vi \u00e5tg\u00e4rden ’subscribe_user_by_ajax’ s\u00e5 l\u00e5t oss skriva en Ajax-\u00e5teruppringningskod f\u00f6r den.<\/p>\n
L\u00e4gg till koden nedan i ditt temas functions.php<\/code>fil.<\/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
Se till att ers\u00e4tta platsh\u00e5llarna ’YOUR_MAILCHIMP_AUDIENCE_ID’ och ’YOUR_MAILCHIMP_API_KEY’ med dina faktiska MailChimp-referenser. Ovanst\u00e5ende kod tar ett e-postmeddelande och skickar det till API-slutpunkten f\u00f6r MailChimp-prenumerationen. Jag st\u00e4ller ocks\u00e5 in status som "prenumererad" vilket inneb\u00e4r att e-postmeddelandet kommer att prenumerera direkt p\u00e5 din lista. Om du vill skicka ett bekr\u00e4ftelsemeddelande till anv\u00e4ndaren f\u00f6r att bekr\u00e4fta sin prenumeration, st\u00e4ll sedan in status som ’v\u00e4ntande’.<\/p>\n
Det handlar om MailChimp-integration med Contact Form 7 Plugin. Jag hoppas att du gillade handledningen. Jag skulle vilja h\u00f6ra dina tankar och f\u00f6rslag i kommentarsektionen nedan.<\/p>\n
relaterade artiklar<\/h4>\n