{"id":28539,"date":"2021-06-13T15:58:00","date_gmt":"2021-06-13T12:58:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28539"},"modified":"2021-10-18T04:00:15","modified_gmt":"2021-10-18T01:00:15","slug":"integracao-mailchimp-com-formulario-de-contato-7-plugin","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/integracao-mailchimp-com-formulario-de-contato-7-plugin\/","title":{"rendered":"Integra\u00e7\u00e3o MailChimp com Formul\u00e1rio de Contato 7 Plugin"},"content":{"rendered":"

O Contact Form 7<\/a> \u00e9 sem d\u00favida um dos plug-ins mais populares do WordPress. No momento em que este artigo foi escrito, o plug-in tinha mais de 5 milh\u00f5es de instala\u00e7\u00f5es ativas. Sua popularidade reside em sua simplicidade, f\u00e1cil configura\u00e7\u00e3o e flexibilidade. Pode-se estender o plugin \u00e0s suas necessidades sem tocar no c\u00f3digo do plugin.<\/p>\n

Recentemente, um de nossos leitores perguntou sobre a integra\u00e7\u00e3o do MailChimp com o plugin Contact Form 7. Eles desejam usar o plugin Contact Form 7 para o formul\u00e1rio de boletim informativo. Ele possui um campo de e-mail e, no envio bem-sucedido de um formul\u00e1rio, o e-mail inserido deve ser adicionado \u00e0 lista de assinantes do MailChimp.<\/p>\n

Contact Form 7 fornece eventos DOM personalizados<\/a> para estender sua funcionalidade. Usando um de seus eventos Dom, que \u00e9 ‘wpcf7mailsent’, voc\u00ea pode integrar o c\u00f3digo de assinatura do MailChimp.<\/p>\n

Obtenha a chave da API MailChimp e o ID do p\u00fablico<\/h3>\n

Antes de realmente come\u00e7armos a escrever o c\u00f3digo, voc\u00ea precisa primeiro pegar sua chave de API MailChimp e ID de p\u00fablico, que ser\u00e3o exigidos no c\u00f3digo. Obtenha esses detalhes seguindo as etapas abaixo.<\/p>\n

Fa\u00e7a login<\/a> em sua conta MailChimp. No \u00edcone do usu\u00e1rio, selecione a conta.<\/p>\n

\"Integra\u00e7\u00e3o<\/a><\/p>\n

Na pr\u00f3xima p\u00e1gina, clique em Extra-> Chaves de API<\/strong>.<\/p>\n

\"Integra\u00e7\u00e3o<\/a><\/p>\n

Na se\u00e7\u00e3o Suas chaves de API, clique em Criar uma chave e copie sua chave de API.<\/p>\n

\"Integra\u00e7\u00e3o<\/a><\/p>\n

Em seguida, obtenha um ID de p\u00fablico ao qual voc\u00ea precisa adicionar seus assinantes. Para isso, clique no menu P\u00fablico e selecione a op\u00e7\u00e3o Configura\u00e7\u00f5es no menu Gerenciar P\u00fablico.<\/p>\n

\"Integra\u00e7\u00e3o<\/a><\/p>\n

Em Configura\u00e7\u00f5es, clique no nome do p\u00fablico e padr\u00f5es.<\/p>\n

\"Integra\u00e7\u00e3o<\/a><\/p>\n

Na pr\u00f3xima p\u00e1gina, voc\u00ea encontrar\u00e1 seu ID de p\u00fablico.<\/p>\n

\"Integra\u00e7\u00e3o<\/a><\/p>\n

Crie um formul\u00e1rio usando o plugin do formul\u00e1rio de contato 7<\/h3>\n

Quando estiver pronto com suas credenciais do MailChimp, a pr\u00f3xima coisa que voc\u00ea precisa fazer \u00e9 criar seu formul\u00e1rio de inscri\u00e7\u00e3o. V\u00e1 ao menu ‘Formul\u00e1rios de contato’ e crie-o. Seu c\u00f3digo ser\u00e1 algo como a imagem abaixo.<\/p>\n

\"Integra\u00e7\u00e3o<\/a><\/p>\n

Como estamos lidando com um formul\u00e1rio de boletim informativo, vamos definir a mensagem de sucesso que pode corresponder ao seu objetivo final. V\u00e1 para a guia ‘Mensagens’ e configure como abaixo.<\/p>\n

\"Integra\u00e7\u00e3o<\/a><\/p>\n

Agora, copie seu shortcode criado e coloque-o onde quiser e voc\u00ea ver\u00e1 o formul\u00e1rio com um campo de e-mail e um bot\u00e3o de envio. Nosso objetivo final \u00e9 quando os usu\u00e1rios inserem um e-mail e clicam no bot\u00e3o enviar, esse e-mail ser\u00e1 adicionado \u00e0 sua lista de assinantes do MailChimp. Vamos escrever um c\u00f3digo para isso.<\/p>\n

Adicionar arquivo JavaScript no WordPress<\/h3>\n

Como disse antes, vou usar o evento Dom ‘wpcf7mailsent’ do plugin Contact Form 7. Isso significa que precisamos escrever um pequeno trecho de c\u00f3digo JavaScript. Primeiro, ele precisa incluir um arquivo JS, digamos, custom.js<\/code>em seu site WordPress. Tamb\u00e9m precisamos usar Ajax, portanto, anexarei uma URL WordPress Ajax e um nonce ao arquivo JS. Em seus temas ativos, functions.php<\/code>adicione o c\u00f3digo abaixo.<\/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
O c\u00f3digo acima inclui o custom.js<\/code>arquivo no site e anexa a URL Ajax, chave nonce \u00e0 vari\u00e1vel ‘blog’.<\/p>\n
Seu custom.js<\/code>arquivo ter\u00e1 o seguinte c\u00f3digo 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
Substitua o marcador ‘YOUR_CONTACT_FORM_ID’ pelo seu valor real. Voc\u00ea pode obter esse ID no c\u00f3digo de acesso do seu formul\u00e1rio de contato. Isso \u00e9 necess\u00e1rio porque nosso c\u00f3digo deve ser executado apenas no formul\u00e1rio da newsletter e n\u00e3o nos outros formul\u00e1rios de contato.<\/p>\n
\"Integra\u00e7\u00e3o<\/a><\/p>\n
A string ‘seu-e-mail’ \u00e9 o nome que dei ao meu campo de e-mail. Permanece como est\u00e1. Se voc\u00ea percebeu que usei a a\u00e7\u00e3o como ‘subscribe_user_by_ajax’, que ser\u00e1 usada para chamar nosso m\u00e9todo de retorno de chamada Ajax, onde escreverei um c\u00f3digo para assinatura do MailChimp.<\/p>\n
Integra\u00e7\u00e3o MailChimp com Formul\u00e1rio de Contato 7 Plugin<\/h3>\n
At\u00e9 agora, criamos um formul\u00e1rio de boletim informativo, escrevemos um c\u00f3digo JS que ser\u00e1 executado no envio bem-sucedido de um formul\u00e1rio. A pr\u00f3xima parte \u00e9 pegar um e-mail e envi\u00e1-lo ao MailChimp usando a API MailChimp. No c\u00f3digo JS, usamos a a\u00e7\u00e3o ‘subscribe_user_by_ajax’, ent\u00e3o vamos escrever um c\u00f3digo de retorno de chamada Ajax para ela.<\/p>\n
Adicione o c\u00f3digo abaixo no functions.php<\/code>arquivo do seu 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
Certifique-se de substituir os marcadores ‘YOUR_MAILCHIMP_AUDIENCE_ID’ e ‘YOUR_MAILCHIMP_API_KEY’ pelas suas credenciais reais do MailChimp. O c\u00f3digo acima pega um e-mail e o envia para o endpoint da API da assinatura do MailChimp. Tamb\u00e9m defini o status como ‘inscrito’, o que significa que o e-mail ser\u00e1 inscrito diretamente na sua lista. Se voc\u00ea deseja enviar um e-mail de confirma\u00e7\u00e3o ao usu\u00e1rio para confirmar sua inscri\u00e7\u00e3o, defina o status como ‘pendente’.<\/p>\n
\u00c9 tudo uma quest\u00e3o de integra\u00e7\u00e3o MailChimp com Contact Form 7 Plugin. Espero que tenha gostado do tutorial. Eu gostaria de ouvir seus pensamentos e sugest\u00f5es na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n