TUTORIAL | Formularios de suscripción con Elementor y MailerLite

Quien me conoce sabe que, para mí, la herramienta más potente para realizar acciones de email marketing es ActiveCampaign. Pero debo reconocer que en los últimos años han ido incrementando bastante sus precios y por lo tanto ha dejado de ser una herramienta asequible para aquellos emprendedores que se encuentran en una fase inicial o temprana de su proyecto, por lo que necesitan encontrar alternativas más asequibles. Y es ahí donde entra MailerLite.

Hoy voy a enseñarte cómo puedes crear tus formularios de suscripción con Elementor Pro y conectarlos con MailerLite. Y por supuesto, adaptados a la RGPD.

Herramientas necesarias

Para poder seguir el paso a paso de este tutorial sólo necesitas 3 cosas:

• Tener creada una web con WordPress.
• Tener instalado Elementor y Elementor Pro en tu web.
• Abrirte una cuenta gratuita de MailerLite.

Paso 1: Configura tu cuenta de MailerLite

Abre tu cuenta gratuita de MailerLite cubriendo los datos que te piden. Recibirás luego un correo en tu bandeja de entrada para que verifiques tu dirección y, a partir de ahí, ya podrás completar tu perfil y configurar tu cuenta. Tan sólo tienes que seguir el asistente que la herramienta te proporciona, ir rellenando la información que te solicita y continuar avanzando.

Una vez completada toda esa parte, dirígete a “Configuración de cuenta” y marca la casilla “Si está activado, el nombre del destinatario se mostrará en el campo “Para” de tu cliente de correo electrónico.” Añade tu logotipo o icono, configura tus colores corporativos y tu tipografía. En “Opciones de rastreo“, te recomiendo que si tienes abierta una cuenta de Google Analytics (lo cuál sería muy adecuado) habilites ambas casillas: Rastreo de las tasas de apertura y Rastreo de Google Analytics. Guarda los cambios.

Ahora toca realizar una parte que, si no tienes perfil técnico, puede parecerte complicada: Autenticar el dominio. Dirígete a la pestaña Dominios (dentro de Configuración de cuenta) y verás algo parecido a esto:

Así que pulsa en Autenticar, porque eso es lo que te toca hacer ahora. Se te desplegará un popup con la siguiente información:

• El registro CNAME que tendrás que crear en el lugar donde hayas comprado el dominio de tu web.
• El registro TXT que tendrás que crear.

Así que dirígete a ese lugar. En mi caso el dominio lo tengo junto al hosting en Raiola Networks, por lo que es tan fácil como entrar en mi cPanel e irme al apartado “Editor de zonas“. Una vez allí, pulsar sobre “+ Registro CNAME“:

En el popup que se te abrirá únicamente tendrás que pegar los valores que te ha dado MailerLite para el CNAME y agregarlos. A continuación, harás clic en el botón “Administrar” del pantallazo anterior y pulsarás en el botón “+ Añadir Registro“, eligiendo la opción “TXT”.

Pega los datos del registro TXT que te da MailerLite, continúa en los popups de MailerLite para indicar que ya has introducido todos los valores y, si has realizado todos los pasos correctamente, verás algo como esto:

En función de tu proveedor de dominio, MailerLite puede tardar más en reconocer la autentificación. En el caso de Raiola es prácticamente inmediato, lo cuál resulta tremendamente cómodo.

Habilita el doble opt-in en MailerLite

Esto es un paso que muchas personas pasan por alto. Para que un formulario de suscripción cumpla con la RGPD debe de cumplir una condición: el usuario debe confirmar de forma expresa que ha querido por voluntad propia suscribirse a tu lista de correo. Esto puede hacerse de dos formas:

• Habilitando el doble opt-in: la forma estándar de llevarlo a cabo. Esto implica que el usuario no se suscribe inmediatamente tras rellenar el formulario de suscripción: debe confirmar esta acción haciendo clic en el enlace que se le envía por correo. La parte mala de este proceso es que se pierde un porcentaje de leads por el camino que nunca llegan a confirmarla; la parte buena es que sólo llenas tu lista con leads realmente interesados o comprometidos con tu proyecto. Y la principal ventaja es que podrás enviar cualquier tipo de comunicación a todos los leads.
• Habilitando dos casillas de verificación: a la casilla estándar y obligatoria de “He leído y acepto la política de privacidad” se le suma una segunda casilla que dice “Deseo recibir comunicaciones por email” (que no será obligatoria). De este modo el lead no tiene que confirmar su suscripción, pero tú sí tendrás que hacer una distinción posteriormente en tu proveedor de email marketing para diferenciar a los que sí desean recibir comunicaciones por email de los que no. Esto quiere decir: que los que se han suscrito a la lista y no desean recibir comunicaciones por email, única y exclusivamente podrás enviarles correos estrechamente relacionados con el motivo por el que se han suscrito. Ejemplo: si se suscriben para recibir un lead magnet, una vez se lo envíes… Sólo podrás mandarles correos en los que hables sobre ese tema. En el momento en el que quieras promocionar cualquier otra cosa, tendrían que suscribirse por otro formulario.

Desde mi punto de vista, habilitar el doble opt-in es lo mejor para todas las partes. Y más a estas alturas de la película, donde el usuario ya está más que familiarizado con estos procesos de suscripción y verificación.

Así que, ¿cómo se habilita el doble opt-in en MailerLite? Desde Ajustes de suscripción > Double opt-in para API e integraciones. Y esto sólo podrás habilitarlo una vez MailerLite haya aprobado tu cuenta: porque sí, desde que abres tu cuenta de MailerLite debe superar una revisión que puede tardar unos días.

Así que ponte cómodo/a mientras esperes a que terminen de revisarla, y cuando recibas la notificación de que está aprobada, vete a habilitar el doble opt-in. La notificación, por cierto, te llegará en forma de email con este aspecto unas horas después:

Y entonces ya podrás activar el doble opt-in con un clic:

Personaliza los emails de confirmación

Desde la misma pantalla en la que habilitas el doble opt-in en tu cuenta puedes personalizar el email de confirmación (que será el mismo para todas tus listas de correo y para todos los formularios que vayas a crear), así como la página de gracias estandar:

Si no lo personalizas, a tus leads les llegará un correo con contenido en inglés… Lo cuál no es nada profesional y da bastante mala imagen, ¿no crees? Así que primero en la pestaña “Email de confirmación” vete a Editar el asunto, que por defecto dice “Confirmation email” y cámbialo por algo que sea más atractivo e indique la importancia que se merece. Algo como por ejemplo: “[IMPORTANTE] Confirma tu suscripción y completa el proceso”. Y luego modifica el contenido del email pulsando sobre el botón de “Editar” que encontrarás a la derecha de Vista previa.

¿Ves ese botón que dice “Página de agradecimiento”? Bueno, en realidad no es una página como tal, sino un email de gracias. El contenido que verán tras completar la suscripción a menos que crees una página de gracias en tu web y la asignes (te recomiendo hacer esto último y no el email). Modifica también su contenido de todas formas, dado que por defecto estará en inglés.

Una vez hayas terminado de modificarlo todo, pulsa sobre el botón “Edición finalizada”.

Crea tu primer grupo de leads en MailerLite

MailerLite no trabaja con listas de correo ni con etiquetas. En su lugar utiliza Grupos y Segmentos. Por eso, como mínimo necesitas tener un grupo creado en tu cuenta a la que dirigir a tus suscriptores. Si no quieres complicarte la vida puedes utilizar un nombre genérico al principio, ya tendrás tiempo luego según lo que vayas a exprimir tu estrategia de email marketing de ir afinando. Mi consejo es que al primer grupo le llames Principal o General. Así que vete al apartado Suscriptores > Grupos y pulsa en el botón “Crear Grupo” para ponerle el nombre que quieras:

Adaptación a la RGPD nivel Pro con MailerLite

Por defecto, MailerLite no va a recoger el consentimiento de tus leads en ningún campo. Por ello debes crearlo.

Dentro del mismo apartado Suscriptores verás una pestaña llamada Campos. Haz clic en ella y luego en el botón “Crear campo”, y configura lo siguiente:

Paso 2: Diseña el formulario en tu web con Elementor Pro

Necesitas tener la versión premium de Elementor para poder crear formularios con él en tu web, tanto de contacto como de suscripción. Una vez hayas adquirido Elementor Pro y activado en tu web, el siguiente paso es diseñarlo. En este caso será un formulario que formará parte del contenido principal de la web (por ser el más sencillo de implementar), pero también puedes crear de tipo popup o cualquier otro que se te ocurra. Así que en este caso vamos a incrustar el formulario como parte del contenido de nuestra página de captación (también conocida como squeeze page).

Una squeeze page es una landing cuyo principal objetivo es captar un lead. Por tanto, esta página no tiene distractores (menú principal) y utiliza un pie de página lo más minimalista posible (únicamente lo ponemos por cumplir con la legalidad, por lo que debe contener los enlaces hacia los textos legales de nuestra web y nada más). Por ello es buena opción al crear la página elegir como Plantilla la opción “Lienzo de Elementor“:

Una vez hayas configurado así tu página de WordPress, entonces ya puedes pulsar sobre el botón “Editar con Elementor” para abrir el maquetador. Si el diseño no es lo tuyo, puedes partir de una plantilla de Elementor para darle forma a tu página. Esto puedes hacerlo seleccionando el icono de la carpeta, en el maquetador:

Una vez ahí te vas a la pestaña “Páginas“, buscas la que más te encaje y haces clic en el botón “Insertar” que te aparece al posar el ratón en cada diseño. Para este tutorial voy a elegir “Mobile app – Maintenance Mode – page“:

Adapta la página o la plantilla como tú quieras y una vez hayas terminado con esa parte, vamos a ponernos con el formulario de suscripción. Lo importante del formulario y lo imprescindible que debe de tener es: campo de email, casilla de aceptación y botón para enviar. Y bajo el botón, la nota legal correspondiente que puedes poner dentro de un acordeón.

Fíjate que el campo de tipo “Aceptación” tiene por etiqueta el mismo nombre que el campo que creamos en el paso anterior en MailerLite. Ambos campos deben coincidir para que la información viaje correctamente y se guarde en MailerLite.

<script>
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
 $('.elementor-tab-content').css('display', 'none'); }, delay);
});
</script>

Por tanto, el formulario quedará como algo parecido a esto:

No olvides crear, aparte, 2 páginas en tu web: una de ellas será a la que se dirija al suscriptor cuando envíe el formulario, recordándole que debe de revisar su bandeja de entrada y hacer clic en el email que recibirá para confirmar su suscripción (es la típica página que dice “Sólo te falta un paso“); y la otra página será la de gracias por suscribirte (la que señala que el proceso de suscripción se ha completado).

Cuando tengas tu página de gracias publicada, regresa a la pantalla de doble opt-in de MailerLite y pulsa sobre la pestaña “Página de agradecimiento de confirmación“. Ahí podrás introducir la URL de tu página de gracias.

Una vez que ya tenemos creado el formulario con Elementor Pro, vamos a por el último paso: conectarlo a MailerLite. Guarda los cambios de esa página como borrador, de momento.

Paso 3: Conecta el formulario a MailerLite

Lo primero que debemos hacer en este punto es conectar Elementor a MailerLite. Para ello tendremos que abrir en una nueva pestaña nuestra web y dirigirnos al apartado Elementor > Ajustes > Integraciones:

Una vez en esa pantalla, desplázate por ella hasta que encuentres el campo que hace referencia a MailerLite. Ahí tendremos que pegar la API que nos dará MailerLite.

¿Y dónde encontrar la API en MailerLite? Muy fácil: dirígete en MailerLite al apartado Integraciones y pulsa sobre el botón “Usar” que aparece al lado de API:

Te aparecerá que no hay tokens para mostrar, así que pulsa sobre el botón “Generar nuevo token”. En nombre introduce Elementor, marca la casilla de He leído y acepto los términos de uso y haz clic en el botón Crear token. ¿Ves esa línea llena de letras, números y signos? Esa es tu clave API: cópiala, regresa a tu web y pégala en el campo de MailerLite. Y luego, pulsa sobre el botón “Validar la clave API”. Si todo está bien, te saldrá un check verde y ya podrás dirigirte a la parte baja de la página en WordPress a pulsar sobre el botón Guardar cambios.

¡Bien! Ya falta menos.

Ahora vuelve a la pestaña en la que estás creando tu squeeze page. Vuelve a guardar un borrador (que no me fío de que lo hubieses hecho todavía) y… Actualiza esa página o refréscala (puedes pulsar F5 o el icono de actualizar de tu navegador).

Ahora, haz clic encima del formulario de suscripción y despliega el apartado “Acciones después del envío“:

Por defecto, los formularios de Elementor recopilan los envíos y envían un aviso por correo electrónico. Pero no tienes por qué dejar esto. En el caso de los formularios de suscripción puede ser un auténtico engorro recopilar tooodos los envíos y recibir un email por cada suscriptor, así que yo quitaría esas 2 acciones: basta con hacer clic encima de la cruz que aparece a su izquierda. Tras hacer esto, haz clic en el símbolo + que aparece a la derecha de “Correo electrónico” y en el desplegable elige primero la opción “Redirigir”. A continuación vuelve a hacer clic en el símbolo + para añadir una opción más, “MailerLite”.

Tras hacer eso, dos nuevos apartados aparecerán dentro de esa configuración del formulario. El primero se llama “Redirigir”: ábrelo e introduce en él la página de “Sólo te falta un paso” que has diseñado en el paso anterior de este tutorial. Es la página que el lead verá tan pronto rellene el formulario y haga clic en el botón: un buen lugar para recordarle que le estás enviando un correo muy importante a su bandeja de entrada, que debe abrir y hacer clic en su interior para completar el proceso.

El segundo apartado que aparecerá se llama “MailerLite”. Haz clic encima para desplegarlo y en “Grupo” selecciona el que hayas creado. Tras hacerlo, te aparecerán todos los campos y tendrás que indicar a qué campo de MailerLite se corresponde cada campo que has creado en Elementor:

¡Fantástico! Un último paso: abre el desplegable “Opciones adicionales” y habilita la opción “Mensajes personalizados” para adaptar cada frase a lo que quieras indicar. Por defecto aparecen en inglés.

¡Y listo! Ya puedes publicar tu página. ¡Ya tienes tu página de captación lista para recoger suscriptores!

Prueba el formulario y difunde

Ahora ya sólo te queda realizar una prueba real para comprobar que tu formulario funciona a la perfección.

¿No quieres hacerlo tú o te atascas en algún paso? Hablemos.