Sí, lo sé. Me ha quedado un titulo demasiado largo, pero es que eso es precisamente lo que hoy quiero compartir con vosotros: Cómo incluir una casilla de aceptación de la Política de privacidad al pie de los formularios DIVI.
Si has llegado hasta aquí seguro que no debo explicarte qué es DIVI y que es genial, pero tampoco que a este potente editor visual, todavía le quedan cosas por desarrollar.
Una de ellas es como incluir en sus formularios, una casilla de aceptación o checkbox de la política de privacidad o aviso legal para cumplir con la ley RGPD. Que si bien entró en vigor el día 25 de mayo de 2016, desde mayo de 2018 ya es de obligado cumplimiento.
Hay muchas formas de hacerlo. Ellos proponen enlazarlo con un gestor de correos como Mailchimp o usar un plugin como Caldera Forms Plugin… que incluyan la opción de incluir una casilla de aceptación. Pero esta es la que yo sigo, sin usar plugins o desarrollos de terceros, y estos son los pasos a seguir…
Pasos para incluir una casilla de aceptación de la Política de privacidad al pie de los formularios DIVI:
1.-Primero
Vamos a la página que contenga el formulario y la editamos. Entra en el módulo del formulario e incluye un campo al final del mismo
Da igual el nombre de identificación y el titulo que le quieras dar) pero que sea de tipo Checkboxes o casillas para marcar. Y la dejamos con una sola opción, que vamos a llamar policy, por ejemplo, y que debemos dejar desmarcada por defecto, comprobando que quede activada como campo obligatorio. Tal y como se ve en la imagen siguiente…
2.- Segundo
Para terminar en la pestaña Avanzado introducimos un Identificador CSS, por ejemplo: titulo_formulario
3.- Tercero
Vale. Guardamos todo y actualizamos. Y ya que estamos aquí nos apuntamos el numero de id de esta página que tiene el formulario. Es el numero que aparece en la url de la página, mientras la editas, entre el post= y el &action=edit.
4.- Cuarto
Ahora vamos a Divi, Opciones del tema, en el menú de la izquierda, y seleccionamos la pestaña de Integration, arriba. Y donde pone Agregar código al <head> de su blog copiamos este código en el que hemos de sustituir las partes en negrita por el id de la página del formulario y por el texto que quieras que aparezca con el enlace a tu política de privacidad:
<script>
jQuery(document).ready(function() {
jQuery(‘.page-id-XXXXX .et_pb_contact_field label’).each(function() {
var text = jQuery(this).text();
jQuery(this).html(text.replace(‘Policy’, ‘<i></i> He leído y acepto la <a http://tudominio.es/politica-de-privacidad/” target=”_blank”>política de privacidad </a>de la empresa.‘));
});
});
</script>
5.- Quinto
Ya sólo nos resta ir a la pestaña de General, todavía dentro de las Opciones del tema, y añadir en el CSS personalizado (abajo del todo) el siguiente código:
.titulo_formulario .et_pb_contact_field .et_pb_contact_field_options_title {display: none;}
Donde titulo_formulario será el nombre que pudimos en el Identificador CSS del segundo paso. De esta forma evitamos que aparezca el Titulo del campo de aceptación.
De esta forma tendremos nuestra casilla de aceptación al pie del formulario, con su enlace a la política de privacidad y la necesidad expresa de aceptarla para poder finalizar el envió del formulario, tal y como dice la RGPD.
Espero que os valga y como siempre, si conoces otra forma de hacerlo, por favor compártela en los comentarios para que todos podamos leerla…
