Seleccionar página

En este post quiero hablaros cómo poder implementar un formulario de suscripción realizado con MailChimp y el plugin Bloom que cumpla con la RGPD (Reglamento General de Protección de datos).

Bloom es un plugin incuido en los planes de Elegant Themes (plantilla Divi), y que sirve para crear diferentes tipos de formularios de suscripción.

 

En este post utilizaremos un Radio button para la aceptación de la política de privacidad, ya que en principio Mailchimp no permite añadir un campo tipo checkbox obligatorio, que sería lo ideal. En mi plataforma de cursos online he creado un curso para aprender a crear el formulario con un checkbox obligatorio, realizando un truco. Puedes acceder a todos los cursos de la plataforma por solo 10 €/mes VER CURSOS

 

SUPER DESCUENTO DIVI y BLOOM

 

Cómo seguramente sabes, las principales novedades que incluye la RGPD son:

 

a.- Aceptación explícita política de privacidad: la necesidad de que el usuario, cuando rellene cualquier tipo de formulario, acepte de manera explícita la política de privacidad del sitio web.

Para ello, el usuario deberá marcar de manera obligatoria un campo que refleje dicha aceptación.

 

b.- Almacenar la aceptación: esa aceptación de la política de privacidad anteriormente mencionada debe quedar almacenada. En el caso que nos ocupa deberá quedar reflejada en MailChimp junto al resto de campos (habitualmente nombre y email)

 

En este post puedes ver como hacer que los comentarios del blog wordpress cumplan la RGPD

 

c.- Primera capa de información: en el mismo formulario se debe añadir una información básica sobre la política de privacidad, que colocaremos en la parte inferior del formulario. Además, debe haber un enlace a la Política de Privacidad (sería la segunda capa).

 

 

 

 

1.- El problema de MailChimp y el campo checkbox requerido para cumplir la RGPD

 

El problema que presenta MailChimp para poder implementar este campo para confirmar la aceptación de la política de privacidad es que no permite poner tipos de campo checkbox que sean obligatorios de rellenar. Es decir, que sean “requeridos” como se suele llamar.

Si implementamos un campo tipo checkbox y permitimos que el usuario pueda enviar el formulario de suscripción sin marcar el checkbox en que acepta la política de privacidad, pues no hemos hecho nada. Y legalmente, no podríamos enviar ningún correo a estas personas que no han aceptado la política de privacidad.

En internet he leído alguna acción a realizar sobre el código del formulario para hacer que este campo generado por el constructor de MailChimp fuera obligatorio, pero yo lo he probado y no me ha funcionado.

Entonces, ¿Qué podemos hacer? – seguro, que te lo estarás preguntando.

Bueno, pues vamos a verlo.

 

En este post puedes ver cómo crear un formulario de contacto con el módulo formulario de contacto de Divi y con contact form 7, que cumpla la RGPD: Módulo formulario divi RGPD
En este post podemos ver como cumplir la RGPD con Woocommerce

 

 

2.- Solución para implementar un campo requerido con MailChimp y cumplir la RGPD.

 

Yo he aplicado la siguiente solución a este problema. He decidido utilizar un campo tipo radio button en vez de un checkbox.

En MailChimp, los campos tipo radio button si se pueden hacer requeridos. Es decir, se pueden hacer que sean obligatorios de marcar para el usuario que está rellenado el formulario.

Los checkbox son cuadrados y los radio buttons circulares. Esa, será la diferencia estética de aplicar un campo de este tipo en vez del checkbox.

 

diferencia entre usar radio button y checkbox rgpd

Radio button VS Checkbox

 

 

3.- Crear lista en MailChimp

 

Lo primero que vamos a hacer es crear una nueva lista de MailChimp (si ya la tienes creada, te puedes saltar este paso)

 

Aprende a crear un blog con WordPress y Divi: blog wordpress + Divi

 

Para ello haremos clic en el ítem de menú: “Lists” que aparece en la parte superior. A continuación, haremos clic en el botón “Create List” que aparece en la parte derecha de la pantalla.

Posiblemente, tras la acción anterior tengas que volver a hacer clic en un botón: “Create List”.

En la siguiente pantalla rellenaremos los datos:

 

  • i.- List name: aquí pondremos el nombre que daremos a la lista de suscriptores
  • ii.- Default from email adres: dirección de email a la que responderán los clientes que reciban los correos, si responden el correo
  • iii.- Default from name: Nombre de la lista que verán los usuarios.
  • iv.- Remind people how they signed up to yor list: aquí recordaremos a los usuarios, porque están recibiendo correos nuestros.
  • v.- Contact information for this list: aquí pondremos nuestros datos, nombre y dirección.
  • vi.- Enable double opt-in: SI. Lo marcaremos para evitar que los robots se puedan suscribir al blog.
  • vii.- Enable GDPR Fields: NO. No, lo marcaremos. Esta opción nos añade un checkbox para aceptar la política de privacidad. Pero, ya hemos visto que al no poder hacerlo obligatorio de marcar no nos va a valer.
  • viii.- Save: haremos clic para guardar.

 

crear lista de suscriptores Mailchimp adaptada RGPD

Crear Lista MailChimp

 

 

4.- Añadir campo Radio button obligatorio (requerido) a MailChimp para Política de Privacidad y cumplir la RGPD

 

Ahora, haremos clic en: “Signup forms” (dentro de nuestra lista). Después, haremos clic en: “Form Builder” (Constructor de formularios).

 

 

4.1.- Ocultar campos no necesarios.

 

En primer lugar, ocultaremos los campos que no nos hagan falta. En mi caso, he ocultado los campos: “First Name”y “Last Name”.

Para ocultar un campo, pon el ratón sobre dicho campo en el dibujo y haz clic con el botón izquierdo del ratón. A continuación, verás que a la derecha de salen las opciones de configuración del campo. Pues, en el campo “Field Visibility”, marca la opción “Hidden” y haz clic en el botón: “Save Field”.

 

quitar campos que no hagan falta formulario mailchimp

Ocultar campos no necesarios formulario de sucripción de MailChimp

 

En este post podrás ver todas las etapas por las que pasa un blog. ¿en qué estapa estás?: Épocas por las que pasa un bloguer

 

 

4.2.- Añadir el campo obligatorio Radio Button para la política de Privacidad de la RGPD

 

Para añadir el campo de aceptación de la política de privacidad, haremos clic en el enlace “Add a field” situado en la parte derecha.

A continuación, haremos clic en la opción: “Radio Buttons” y rellenaremos los siguientes campos:

 

  • i.- Field Label: este será el nombre de la etiqueta y aparecerá antes del Radio Button. Puedes poner: “Consentimiento”.
  • ii.- Required Field: Marcaremos esta opción, para que el Radio Button sea obligatorio de marcar. Es decir, sea un campo “requerido”.
  • iii.- Field Visibility: marcamos la opción: “Visible”.
  • iv.- Menú option: verás que te aparecen tres opciones por defecto para seleccionar con el Radio button. Quitaremos 2 opciones, haciendo clic en el botón menos (-), y nos quedaremos con una única opción. A continuación, editaremos el texto del interior. En vez de “First Choice” pondremos “Acepto la Política de Privacidad”. Después, haremos clic en el botón “Save Field”.

 

configurar campo aceptación política de privacidad con mailchimp

Añadir radio button obligatorio con MailChimp para aceptar la política de privacidad

 

añadir campo aceptar política privacidad con mailchimp

Una opción radio button: Acepto la política de Privacidad

 

 

4.3.- Traducción al español proceso de suscripción con MailChimp.

 

Puedes cambiar los nombres de las etiquetas de los campos “Email Adress” y “First Name”. Para ello, haz clic en el campo que quieras y cambia el texto del campo “Field Label” (no te olvides de guardar después)

 

Para cambiar la traducción al español del correo de confirmación y demás textos que se muestran al usuario para que se suscriba adecuadamente, deberás hacer clic en la pestaña: “Translate it”.

En el selector “Set default language” selecciona: “Spanish” y haz clic en el botón: “Save Translation Settings” (situado en la parte inferior).

 

SUPER DESCUENTO DIVI

 

 

5.- Copiar código HTML del formulario de suscripción de MailChimp para la RGPD

 

Ahora procederemos a copiar el código HTML del formulario que acabamos de crear con MailChimp para posteriormente pegarlo en Bloom.

Para copiar el código del formulario MailChimp iremos a: “Signup forms > Embedded forms”.

 

Realizaremos las siguientes acciones:

  • i.- Include form title: desmarcaremos esta opción para que no se muestre el título en el formulario.
  • ii.- Show required field indicators: yo he desmarcado esta opción. No veo sentido que con tan pocos campos haya que indicar cuales son obligatorios.
  • iii.- Show format options: desmarcaremos esta opción
  • iv.- Disable all JavaScript: Marcaremos esta opción, para que en el código no se añada javascript (solo HTML).

 

Conforme hemos ido haciendo cambios en las opciones, el código ha ido cambiando.

Ahora, es el momento de copiar el código html que posteriormente pegaremos en nuestro plugin de formulario de suscripción Bloom para WordPress.

 

formulario mailchimp incrustado embedded que cumple RGPD

Código HTML Formulario MailChimp incrustado (Embedded)

 

 

6.- Conectar Plugin Bloom con MailChimp para cumplir la RGPD

 

Accedemos a la administración del plguin Bloom, haciendo clic sobre el ítem de menú: “Bloom”, dentro del panel de administración de WordPress.

Ahora, haremos clic en el botón: “New Optin”, para crear un nuevo formulario de suscripción con Bloom

A continuación, seleccionaremos el tipo de formulario: PopUp, Fly In, InLine, etc. Y realizaremos las siguientes acciones:

 

i.- Optin Name: aquí pondremos el nombre que daremos al formulario de suscripción. Este nombre nos servirá para diferenciarlo de otros que podamos crear, pero este nombre no será visto por los usuarios.

Form Integration

ii.- Select Email Provider: aquí debemos elegir la opción “Custom HTML Form”(está al final). Es decir, vamos a conectar Bloom con MailChimp no a través de una API, sino directamente a través del código HTML que hemos generado antes. Esta opción nos puede servir para conectar Bloom con cualquier proveedor de email marketing que permita la creación del código HTML del formulario de suscripción.

Ahora verás que nos aparece un área de texto, en el cual tendremos que pegar el código HTML generado por MailChimp, que hemos copiado en el apartado anterior.

 

A continuación, haremos clic en el botón: “SAVE & EXIT”.

 

 

7.- Diseño formulario Bloom

 

Vamos ahora a ver las opciones de diseño del formulario Bloom. Para ello haremos clic en la opción: “Bloom” del menú de la administración de WordPress.

En el formulario que acabamos de crear, haremos clic en el icono en forma de “engranaje”.

A continuación, haremos clic en la pestaña lateral: “DESIGN” o en el botón de la parte inferior: “NEXT: DESING YOUR OPTIN”.

En la parte derecha de la pantalla de diseño tienes un botón que pone “PREVIEW” o un icono de un ojo. Esta opción sirve para hacer una previsualización del estado actual del formulario.

 

  • i.- OPTIN TITLE: podrás personalizar el título del formulario
  • ii.- OPTIN MESSAGE: Podrás personalizar el texto que se mostrará debajo del título.
  • iii.- IMAGE SETTINGS: Podrás añadir una imagen al formulario, con el típico lead magnet o regalo para suscriptores.
  • iv.- OPTING STYLING y FORM STYLING: Tendremos algunas opciones de personalización de diseño del formulario. Algunas opciones pueden no funcionar correctamente porque entran en conflicto con las opciones de diseño de MailChimp
  • v.- FORM FOOTER TEXT: En este área de texto podremos la primera capa informativa de la newsletter a la que nos obliga la RGPD. Este texto aparecerá en al parte inferior del formulario.

 

NOTA: En este post no vamos a profundizar en como cambiar las opciones de diseño de MailChimp. Esto se verá más adelante en otro post o en una ampliación de éste.

 

Te pongo un ejemplo de primera capa informativa para mi caso concreto:

 

*** RESPONSABLE: Joaquín Barberá Aledo (servidor) | *** FINALIDAD: enviarte mis nuevos contenidos y lo que vea que puede interesarte (Nada de SPAM) | *** LEGITIMACIÓN: tu consentimiento (que estás de acuerdo) | DESTINATARIOS: los datos que me facilitas estarán ubicados en los servidores de MailChimp (proveedor de email marketing de horizonweb.es) fuera de la UE en EEUU. MailChimp está acogido al acuerdo EU-US Privacy Shield, aprobado por el Comité Europeo de Protección de Datos. | *** DERECHOS: por supuesto tienes derecho, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

 

formulario suscriptores MailChimp y plugin Bloom

Previsualización formulario de suscripción que cumple la RGPD con MailChimp y Bloom

 

No te olvides de guardar los cambios, con el botón: “SAVE & EXIT”.

 

SUPER DESCUENTO DIVI + BLOOM

 

 

8.- Cambios en el código HTML (AL FINAL)

 

En la imagen anterior puedes ver una previsualización de como está quedando el formulario de suscripción que cumpla la RGPD con Bloom y MailChimp.

Hay dos cosas que debemos arreglar. Ambas las realizaremos modificando el código HTML del formulario que copiamos de MailChimp y pegamos en Bloom.

Para modificar el código iremos a: “Bloom”, y haremos clic en el icono en forma de “engranaje” del formulario en cuestión.

 

i.- Añadir enlace de política de Privacidad:

Para añadir un enlace a tu página de política de privacidad, he sustituido:

Política de privacidad

añadir enlace política privacidad de la web en formulario suscripción

Sustituir: Política de privacidad

Por

<a href="http://www.diseñowebmurcia1.es/politica-de-privacidad/" target="_blank"><span style="color:#CCCCCC;">política de Privacidad</span></a>

 

mailchimp añadir enlace rgpd aceptar politica de privacidad

Añadir enlace política de privacidad

 

NOTA: Tienes que sustituir la url de la página de política de privacidad por la tuya.

 

ii.- Cambiar texto del botón de enviar formulario:

Para cambiar el texto del botón de enviar formulario, que por defecto es: “Suscribe”, iremos a la línea:

<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

Y cambiaremos

Value=”Susbscribe”

Por

Value=”Suscríbete”

 

Recuerda guardar, haciendo clic en el botón: “SAVE & EXIT”.

 

 

9.- Insertar formulario Bloom en una página

 

Para insertar el formulario en una página de WordPress, haz clic sobre el icono [ ] del formulario en cuestión.

Copia el Shortcode y añádelo a la página que quieras, en la posición deseada.

Puedes añadirlo en la pestaña HTML del editor por defecto de WordPress, en el módulo código de Divi, y en el módulo texto de Divi (en la pestaña HTML)

 

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO WORDPRESS (44 Clases)
2.- CURSO SEGURIDAD Y ACTUALIZACIONES WORDPRESS (9 Clases)
3.- CURSO DIVI (33 Clases)
4.- CURSO DISEÑADOR WEB FREELANCE (10 Clases)
5.- CURSO MEMBERSHIP SITE (14 Clases)
6.- CURSO ELEMENTOR (14 Clases)
7.- CURSO ASTRA PRO (17 Clases)
8.- CURSO BLOOM + MAILCHIMP (7 Clases)
9.- CURSO SEO (19 Clases)
10.- CURSO BLOG WORDPRESS (32 Clases)
11.- CURSO WOOCOMMERCE (39 Clases)
12.- CURSO FLATSOME WORDPRESS (36 Clases)
13.- CURSO COLORES WEB (9 Clases)
14.- CURSO ANALYTICS (10 Clases)
15.- CURSO SEO PARA TIENDAS ONLINE (12 Clases)
16.- ETC. ETC...(Más de 30 cursos)
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com