{"id":29332,"date":"2021-06-13T16:42:00","date_gmt":"2021-06-13T13:42:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29332"},"modified":"2021-10-17T16:18:48","modified_gmt":"2021-10-17T13:18:48","slug":"integracion-de-mailchimp-con-el-complemento-contact-form-7","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/integracion-de-mailchimp-con-el-complemento-contact-form-7\/","title":{"rendered":"Integraci\u00f3n de MailChimp con el complemento Contact Form 7"},"content":{"rendered":"

Contact Form 7<\/a> es sin duda uno de los complementos m\u00e1s populares en WordPress. En el momento de escribir este art\u00edculo, el complemento tiene m\u00e1s de 5 millones de instalaciones activas. Su popularidad radica en su simplicidad, f\u00e1cil configuraci\u00f3n y flexibilidad. Uno puede extender el complemento a sus necesidades sin tocar el c\u00f3digo del complemento.<\/p>\n

Recientemente, uno de nuestros lectores pregunt\u00f3 sobre la integraci\u00f3n de MailChimp con el complemento Contact Form 7. Quieren utilizar el complemento Contact Form 7 para el formulario del bolet\u00edn. Tiene un campo de correo electr\u00f3nico y en el env\u00edo exitoso de un formulario, el correo electr\u00f3nico ingresado debe agregarse a su lista de suscriptores de MailChimp.<\/p>\n

Contact Form 7 proporciona eventos DOM personalizados<\/a> para ampliar su funcionalidad. Usando uno de sus eventos Dom, que es ‘wpcf7mailsent’, puede integrar el c\u00f3digo de suscripci\u00f3n de MailChimp.<\/p>\n

Obt\u00e9n la clave de la API de MailChimp y el ID de audiencia<\/h3>\n

Antes de que comencemos a escribir c\u00f3digo, primero debe obtener su clave de API de MailChimp y su ID de audiencia, que se requerir\u00e1n en el c\u00f3digo. Obtenga estos detalles siguiendo los pasos a continuaci\u00f3n.<\/p>\n

Inicie sesi\u00f3n<\/a> en su cuenta de MailChimp. Desde el icono de usuario, seleccione la Cuenta.<\/p>\n

\"Integraci\u00f3n<\/a><\/p>\n

En la p\u00e1gina siguiente, haga clic en Extra-> API keys<\/strong>.<\/p>\n

\"Integraci\u00f3n<\/a><\/p>\n

En la secci\u00f3n Sus claves de API, haga clic en Crear una clave y copie su clave de API.<\/p>\n

\"Integraci\u00f3n<\/a><\/p>\n

A continuaci\u00f3n, obtenga una ID de audiencia a la que necesita agregar sus suscriptores. Para ello, haga clic en el men\u00fa Audiencia y luego seleccione la opci\u00f3n Configuraci\u00f3n del men\u00fa desplegable Administrar audiencia.<\/p>\n

\"Integraci\u00f3n<\/a><\/p>\n

En Configuraci\u00f3n, haga clic en el nombre de la audiencia y los valores predeterminados.<\/p>\n

\"Integraci\u00f3n<\/a><\/p>\n

En la p\u00e1gina siguiente, encontrar\u00e1 su ID de audiencia.<\/p>\n

\"Integraci\u00f3n<\/a><\/p>\n

Crear un formulario usando el complemento Contact Form 7<\/h3>\n

Una vez que est\u00e9 listo con sus credenciales de MailChimp, lo siguiente que debe hacer es crear su formulario de suscripci\u00f3n. Vaya al men\u00fa ‘Formularios de contacto’ y cr\u00e9elo. Su c\u00f3digo ser\u00e1 similar a la captura de pantalla a continuaci\u00f3n.<\/p>\n

\"Integraci\u00f3n<\/a><\/p>\n

Ya que estamos tratando con un formulario de bolet\u00edn informativo, establezcamos el mensaje de \u00e9xito que pueda coincidir con su objetivo final. Vaya a la pesta\u00f1a ‘Mensajes’ y config\u00farelo como se muestra a continuaci\u00f3n.<\/p>\n

\"Integraci\u00f3n<\/a><\/p>\n

Ahora, copie su c\u00f3digo corto creado y col\u00f3quelo donde desee y ver\u00e1 el formulario con un campo de correo electr\u00f3nico y un bot\u00f3n de env\u00edo. Nuestro objetivo final es que cuando los usuarios ingresen un correo electr\u00f3nico y presionen el bot\u00f3n Enviar, este correo electr\u00f3nico se agregar\u00e1 a su lista de suscriptores de MailChimp. Escribamos un c\u00f3digo para ello.<\/p>\n

Agregar archivo JavaScript en WordPress<\/h3>\n

Como dije antes, voy a usar el evento Dom ‘wpcf7mailsent’ del complemento Contact Form 7. Significa que necesitamos escribir un peque\u00f1o fragmento de c\u00f3digo JavaScript. Primero, debe incluir un archivo JS, digamos custom.js<\/code>en su sitio de WordPress. Tambi\u00e9n necesitamos usar Ajax, as\u00ed que adjuntar\u00e9 una URL de WordPress Ajax y un nonce al archivo JS. En sus temas activos functions.php<\/code>agregue el siguiente c\u00f3digo.<\/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
El c\u00f3digo anterior incluye un custom.js<\/code>archivo en el sitio y adjunta la URL Ajax, clave nonce a la variable ‘blog’.<\/p>\n
Su custom.js<\/code>archivo tendr\u00e1 el siguiente 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
Reemplace el marcador de posici\u00f3n ‘YOUR_CONTACT_FORM_ID’ con su valor real. Puede obtener esta identificaci\u00f3n del c\u00f3digo corto de su formulario de contacto. Esto es necesario porque nuestro c\u00f3digo debe ejecutarse solo en el formulario del bolet\u00edn y no en los otros formularios de contacto.<\/p>\n
\"Integraci\u00f3n<\/a><\/p>\n
La cadena ‘su-correo electr\u00f3nico’ es el nombre que le he dado a mi campo de correo electr\u00f3nico. Queda como est\u00e1. Si not\u00f3 que he usado la acci\u00f3n como ‘subscribe_user_by_ajax’ que se usar\u00e1 para llamar a nuestro m\u00e9todo de devoluci\u00f3n de llamada Ajax donde escribir\u00e9 un c\u00f3digo para la suscripci\u00f3n a MailChimp.<\/p>\n
Integraci\u00f3n de MailChimp con el complemento Contact Form 7<\/h3>\n
Hasta ahora creamos un formulario de bolet\u00edn, escribimos un c\u00f3digo JS que se ejecutar\u00e1 en el env\u00edo exitoso de un formulario. La siguiente parte es tomar un correo electr\u00f3nico y enviarlo a MailChimp usando la API de MailChimp. En el c\u00f3digo JS, usamos la acci\u00f3n ‘subscribe_user_by_ajax’, as\u00ed que escribamos un c\u00f3digo de devoluci\u00f3n de llamada Ajax para ello.<\/p>\n
Agregue el siguiente c\u00f3digo en el functions.php<\/code>archivo de su 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
Aseg\u00farate de reemplazar los marcadores de posici\u00f3n ‘YOUR_MAILCHIMP_AUDIENCE_ID’ y ‘YOUR_MAILCHIMP_API_KEY’ con tus credenciales reales de MailChimp. El c\u00f3digo anterior toma un correo electr\u00f3nico y lo env\u00eda al punto final de la API de la suscripci\u00f3n de MailChimp. Tambi\u00e9n configur\u00e9 el estado como ‘suscrito’, lo que significa que el correo electr\u00f3nico se suscribir\u00e1 directamente a su lista. Si desea enviar un correo electr\u00f3nico de confirmaci\u00f3n al usuario para confirmar su suscripci\u00f3n, establezca el estado como ‘pendiente’.<\/p>\n
Se trata de la integraci\u00f3n de MailChimp con el complemento Contact Form 7. Espero que les haya gustado el tutorial. Me gustar\u00eda escuchar sus pensamientos y sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n