Header Ads Widget

Ticker

6/recent/ticker-posts

Integrando Mailchimp con un formulario de contacto

 Mailchimp es un servicio popular para administrar boletines de correo electrónico y algo que me encuentro integrando con la mayoría de los proyectos. Ofrece un generoso nivel gratuito, análisis útiles y es una excelente manera de mejorar la participación del usuario con una marca o sitio web.

Puede ser útil suscribir a los usuarios a su boletín mientras envía un formulario de contacto, en lugar de realizar una acción completamente separada de suscribirse a través de un formulario incrustado. Integrarlo con un formulario existente también permite un control completo sobre el estilo.

Usaré PHP para manejar la lógica y Bulma para un estilo de formulario simple. Las solicitudes se realizan con curl , lo que significa que las llamadas se pueden convertir para realizarlas en otros idiomas.

Antes de comenzar, asegúrese de haberse registrado para obtener una cuenta gratuita con Mailchimp y de haber creado una audiencia a la que se suscribirán los usuarios.

Configuración de Mailchimp

Primero inicie sesión en su cuenta, haga clic en el perfil en la parte superior derecha y seleccione 'Perfil':

Navegue a la sección Extras -> API Keys:

Desplácese hasta la parte inferior de la página y haga clic en 'Crear una clave'; copie la clave proporcionada en un lugar seguro por ahora.

La otra cosa que necesitamos del administrador de Mailchimp es el ID de audiencia.

Haga clic en "Audiencia" en la parte superior de la página y luego en el botón "Ver contactos". Después, vaya a Configuración -> Nombres de audiencia y valores predeterminados. El ID de audiencia se mostrará en el lado derecho. Copie esto en un lugar seguro también por ahora.

Nota: tenga cuidado al copiar el ID de audiencia, ya que Mailchimp lo muestra con un punto y después del cual no forma parte del ID real.

Formulario de contacto

Para este ejemplo, estoy usando un formulario de contacto HTML básico. No pasa nada especial aquí, solo un formulario que se envía a un archivo 'submit.php' (que se creará después).

Agregue esto a un archivo 'index.html':

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mailchimp API</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.css"
/>
</head>
<body>
<section class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-half">
<form action="./submit.php" method="post">
<div class="field">
<label class="label" for="name">* Name</label>
<div class="control">
<input
class="input"
id="name"
type="text"
name="name"
placeholder="Your name"
required
/>
</div>
</div>
<div class="field">
<label class="label" for="email">* Email</label>
<div class="control">
<input
class="input"
id="email"
type="email"
name="email"
placeholder="Email input"
required
/>
</div>
</div>
<div class="field">
<label class="label" for="message">* Message</label>
<div class="control">
<textarea
class="textarea"
id="message"
name="message"
placeholder="Your message"
required
></textarea>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox" for="newsletter">
<input
type="checkbox"
id="newsletter"
name="newsletter"
value="true"
/>
Do you want to sign up to the newsletter?
</label>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>

Y aquí está el resultado:

Integración con Mailchimp

Ahora que el formulario está configurado y listo para funcionar, podemos realizar una validación cuando se envía el formulario y realizar la solicitud a Mailchimp.

Cree un archivo llamado 'submit.php' en el mismo nivel que el archivo de índice.

Para empezar, primero debemos verificar para asegurarnos de que el usuario no haya navegado directamente a este archivo y asegurarnos de que se hayan completado los campos obligatorios. De lo contrario, el usuario es redirigido de nuevo al formulario:

<?php // Process form submission and integrate with Mailchimp API
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// Handle unfinished form. Remember to perform additional suitable validation here
if (!isset($_POST['name']) || !isset($_POST['email']) || !isset($_POST['message'])) {
// Send user back to the form
header('Location: /');
}

El siguiente paso es comenzar a crear la URL de la API que se utilizará.

La clave de API que obtuvimos antes debe agregarse al código a continuación. La última sección de la clave (después del '-') indicará el centro de datos que se utilizará (como 'us18'). Agregue también su ID de audiencia. Esta sección solo se ejecutará si el usuario ha optado por suscribirse al boletín a través de la casilla de verificación del formulario:

// Set default to handle if the user wants to subscribe or not
$subscribed = false;
// Check user has accepted to sign up to the newsletter
if (isset($_POST['newsletter'])) {
// Set API credentials and build URL
$data_center = 'DATA_CENTER_HERE';
$audience_id = 'AUDIENCE_ID_HERE';
$api_key = 'API_KEY_HERE';
$url = 'https://' . $data_center . '.api.mailchimp.com/3.0/lists/' . $audience_id . '/members';

El código anterior generará una URL única para interactuar con la cuenta y la audiencia específicas de Mailchimp.

Recuerde almacenar de forma segura su clave API, ya que brinda acceso completo a su cuenta de Mailchimp

A continuación, crearemos una matriz que se enviará a la API de Mailchimp que contiene los detalles relevantes del usuario.

Hay muchas opciones que se pueden encontrar aquí , como solicitar al usuario que valide su correo electrónico o enviar información adicional para que se almacene mediante campos de combinación. Para este ejemplo, estoy guardando la dirección de correo electrónico del usuario y suscribiéndolo automáticamente:

// Build user details array to send
$user_details = [
'email_address' => $_POST['email'],
'status' => 'subscribed'
];
$user_details = json_encode($user_details);

La siguiente sección hará la solicitud POST real a Mailchimp a través de curl. La mayor parte de esto es un código curl estándar que no necesita ser modificado, así que no se preocupe demasiado. Todo lo que necesita saber es que está realizando la solicitud y devolviendo una respuesta:

// Send POST request with cURL
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLINFO_HEADER_OUT, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_USERPWD, 'newsletter:' . $api_key);
curl_setopt($ch, CURLOPT_POSTFIELDS, $user_details);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
'Content-Type: application/json',
'Content-Length: ' . strlen($user_details)
]);
$result = curl_exec($ch);
$result_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

Si tiene problemas y desea depurar, todo lo que tiene que hacer es agregar lo siguiente que devolverá los detalles exactos del error de API devuelto por Mailchimp:

print_r($result);

Todo lo que hay que hacer después es comprobar el resultado final. En este punto, el usuario se habrá suscrito si tiene éxito, y ahora se puede enviar el correo electrónico real:

if ($result_code === 200) {
$subscribed = true;
}
}
// Send email functionality can go here. You can notify the user that they have been subscribed or not
if ($subscribed) {
echo 'You have been subscribed!';
} else {
echo 'Something went wrong';
}
} else {
// Send user back to the form if URL is accessed directly
header('Location: /');
}

Si todo ha funcionado como se esperaba, ¡ahora tendrás una nueva suscripción en tu audiencia de Mailchimp!

Publicar un comentario

0 Comentarios