En esta entrada de blog quiero mostraros lo fácil que es crear un formulario de contacto con el módulo “Formulario de contacto” de la plantilla Divi (Divi builder).

También quiero indicaros como poder adaptar dicho formulario a la RGPD (Reglamento General de Protección de Datos).

DESCUENTOS PLANTILLA DIVI

 

Si habitualmente utilizas el plugin Contact Form 7, no te preocupes. También te voy a indicar cómo adaptarlo un formulario de contacto creado con este plugin a la RGPD.

 

 

 

 

1.- Cómo crear un formulario con el módulo Formulario de contacto de Divi

 

Lo primero que debemos hacer para crear un formulario de contacto con el módulo de contacto del Divi builder, es añadir dicho módulo a la página que queramos.

 

 

1.1.- Añadir módulo de formulario de contacto de Divi

 

Entraremos a la página en la que queramos añadir el formulario e insertaremos el módulo “Formulario de contacto”.

Según la distribución de columnas que tanga la fila en la cual insertemos el formulario, este será más o menos ancho dependiendo de la anchura de la columna en la cual se inserte. Si insertamos el módulo Formulario de contacto en una fila con una única columna, pues saldrá un formulario del ancho de la página. Por el contrario, si lo insertamos en una fila con 2 columnas (50% + 50%), pues el formulario ocupará la mitad de la página.

Aquí tienes un post explicativo sobre el Divi builder, en el que puedes aprender más sobre los diferentes elementos estructurales del constructor de la plantilla Divi.

 

 

1.2.- Crear campos adicionales al formulario de contacto de Divi

 

Al acceder a la configuración del módulo formulario de contacto de Divi, verás en la pestaña “Contenido”, en su parte superior, los campos actuales del formulario.

Seguramente verás los campos: “Name”, “Email” y “Message” (creados por defecto).

 

campos formulario de contacto divi builder

Campos por defecto del módulo formulario de contacto de Divi

 

Puedes hacer diferentes acciones sobre estos campos, según en qué icono hagas clic:

 

  • i.- icono engranaje: accedes a la configuración de dicho campo del formulario.
  • ii.- icono flecha: duplicas el campo del formulario (con las mismas características)
  • iii.- icono papelera: eliminas el campo.
  • iv.- Cambio posición: si acercamos el ratón a uno de los campos, cuando nos aparezca la cruz, podremos hacer clic y arrastrar el campo para ponerlo en otra posición.

 

 

1.2.1.- Crear campo teléfono para el formulario.

 

Podemos añadir nuevos campos al formulario. Por ejemplo, vamos a añadir un campo para el teléfono.

Para ello, haremos clic en el botón “+” de “Añadir nuevo campo” que aparece debajo del último campo existente. Ahora rellenaremos las siguientes opciones de configuración del campo:

 

 

PESTAÑA CONTENIDO:

Texto:

i.- Identificación del campo: aquí pondremos un nombre que identifique al campo. Este nombre NO aparece en el formulario. Por ejemplo, pondremos: telefono (mi recomendación es que no pongas acentos)

ii.- Título: este será el nombre que SI mostrará el campo del formulario. Aquí pondremos, por ejemplo: Teléfono

 

Opciones de campo:

i.- Tipo: aquí seleccionaremos el tipo de campo que queremos. En este caso pondremos “Campo de entrada” que nos servirá para cualquier tipo de texto.

ii.- Campo obligatorio: Si ponemos “SI” en este selector, el campo será “requerido”. Es decir, obligatorio de rellenar. Si, por el contrario, ponemos el selector en “NO”, el campo no será obligatorio de rellenar para poder enviar el formulario de contacto.

 

 

PESTAÑA DISEÑO:

i.- Hacer que tenga anchura completa: aquí seleccionaremos si el campo queremos que tenga el 100% de la achura del contenedor (si marcamos anchura completa) o el 50% de la anchura del contenedor.

Cuando guardemos y visualicemos todos los campos, podremos cambiar las posiciones como vimos anteriormente. Finalmente guardaremos el módulo y la página completa.

 

nuevo campo en el módulo formulario de contacto

Añadido campo teléfono al formulario Divi

 

 

1.3.- Configuraciones generales

 

Vamos a ver ahora las opciones de configuración más importantes del módulo de formulario de contacto del Divi Builder.

 

PESTAÑA CONTENIDO

i.- Mensaje de éxito: aquí pondremos el texto que se mostrará al visitante cuando el mensaje se envíe correctamente. Por ejemplo: “tu mensaje ha sido enviado correctamente. Pronto nos pondremos en contacto”.

ii.- Texto del botón enviar: si no rellenamos este campo, el botón del formulario tendrá el texto: “Enviar”. Pero podemos personalizar el texto que queramos para el botón.

iii.- Correo electrónico: aquí pondremos la dirección de correo en la cual queremos recibir el mensaje cuando se envíe el formulario de contacto.

iv.- Patrón del mensaje: lo vemos en detalle en el siguiente apartado.

v.- Mostrar captcha: Si establecemos el selector en “SI” será necesario acertar una suma para poder enviar el email. Muy recomendable para evitar los correos tipo SPAM enviados por robots.

 

PESTAÑA DISEÑO

i.- Texto: en el bloque “Texto” tendremos una serie de opciones relacionadas con el nombre del campo que aparece el formulario (orientación del texto y sombreado)

ii.- Campo de formulario de texto: aquí tendremos una serie de opciones de diseño sobre los campos del formulario de contacto como: color de fondo, fuente del texto, grosor de la fuente, color del texto, tamaño del texto, etc.

iii.- Botón: en este apartado podremos personalizar el diseño del botón de enviar del formulario de contacto.  Para ello, tendremos que poner el selector de “Utilizar estilos personalizados para botón” en “SI”.

 

 

1.4.- Configurar correo de recepción del formulario (Patrón del mensaje Divi).

 

Vamos a ver ahora una parte fundamental en la configuración del formulario, que es la forma en que recibiremos los datos rellenados por el visitante, que en el módulo de formulario de contacto se denomina: “Patrón del mensaje”.

En el patrón del mensaje usaremos el signo %% antes y después del identificador del campo, para llamar a la variable de dicho campo.

Es decir, por ejemplo, la variable %%Email%% se sustituirá por lo que ponga el visitante en el campo “Email”.

Un patrón de ejemplo podría ser:

 

Mensaje enviado desde el formulario de contacto de la web: mipagina.es

Nombre: %%Name%%

Email: %%Email%%

Teléfono: %%telefono%%

Mensaje: %%Message%%

 

patrón de mensaje modulo formulario divi builder

Ejemplo de patrón de mensaje de módulo formulario de contacto de divi

 

Con el anterior patrón de mensaje, recibiríamos por ejemplo un email con el siguiente contenido:

 

Mensaje enviado desde el formulario de contacto de la web: mipagina.es

Nombre: Pedro Alonso

Email: pedroalo3@gmail.com

Teléfono: 655 55 55 55

Mensaje: hola, muy buenas. Me gustaría que me mandaras un presupuesto detallado para la creación de una web sencilla. Gracias

 

 

Nota: ten en cuenta que para llamar una variable se ha de poner el signo %% antes y después del identificador del campo. Ojo, no te equivoques, el identificador del campo y no del título del campo, que son cosas diferentes.

 

 

2.- Cómo adaptar el formulario de contacto realizada con Divi a la RGPD

 

Para que un formulario de contacto cumpla a la RGPD (Reglamento general de protección de datos) tendremos que realizar fundamentalmente dos acciones:

i.- Añadir campo checkbox (requerido) de consentimiento: tendremos que añadir un campo tipo checkbox requerido (obligatorio de marcar), en el cual el visitante acepte explícitamente la política de privacidad.

ii.- Añadir enlace a la página de política de privacidad: tendremos que añadir un enlace a la página de política de privacidad. Lo que en la RGPD se ha denominado segunda capa informativa.

iii.- Añadir un texto resumido sobre el uso de los datos: debemos incluir un texto en el formulario que resuma el uso que se va a hacer de los datos. En la RGPD se ha denominado primera capa informativa.

 

En este post tienes como podemos adaptar los formularios de suscripción realizados con Bloom y MailChimp a la RGPD: Formulario suscripción adaptado RGPD

 

 

2.1.- Añadir campo chekbox de consentimiento al formulario de contacto con Divi para cumplir la RGPD

 

Si has leído el apartado 1.2.1 ya sabrás como se añade un nuevo campo al formulario de contacto del módulo Divi. Si no lo has hecho, te recomiendo que le eches un vistazo.

Iremos a la configuración del módulo formulario de contacto del divi builder y haremos clic en el icono “+” (Añadir un nuevo campo) y rellenaremos las siguientes opciones:

 

i.- identificación del campo: aquí pondremos el id del campo, que será: consentimiento

ii.- Título: aquí pondremos el nombre del campo, que será: Consentimiento

iii.- Tipo: aquí seleccionaremos: “Checkboxes” y en el interior del campo pondremos: “Acepto la política de privacidad”.

No es posible por el momento insertar aquí un enlace a la página de política de privacidad. Lo tendremos que hacer más adelante.

iv.- Campo obligatorio: pondremos el selector en “SI” para que el campo sea requerido. Es decir, para que sea obligatorio de rellenar.

 

A continuación, guardaremos el formulario y la página.

 

campo checkbox aceptar politica de privacidad formulario de contacto

Campo consentimiento aceptar política de privacidad

 

En la configuración general del módulo, en el apartado de patrón del mensaje, que veíamos en el apartado 1.4. Tendremos que añadir este último campo, para que en el correo quede reflejado la aceptación de la política de privacidad por parte del cliente.

Para ello añadiremos siguiente texto al patrón que vimos en el apartado 1.4:

 

Consentimiento: %%consentimiento%%

 

 

2.2.- Poner enlace a la política de privacidad y primera capa informativa

 

No es posible por el momento poner en el texto del checkbox un enlace hacia la página de la política de privacidad. Por este motivo, lo mejor será poner un módulo de texto debajo del módulo de formulario, y en él tanto el enlace como la primera capa informativa.

Podría quedar algo así:

 

Modulo formulario de contacto divi con checkbox de política de privacidad

Módulo formulario de contacto Divi adaptado a la RGPD

 

 

A continuación, te pongo un texto de ejemplo de primera capa. Esto es solo un texto de ejemplo, lo ideal es que este texto te lo proporcione una empresa especializada:

 

*** RESPONSABLE: Es mi deber informarte que los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Pedro Giménez Alonso (servidor) como responsable de esta web.

*** FINALIDAD: La finalidad de la recogida y tratamiento de los datos personales que te solicito es para gestionar la solicitud que realizas en este formulario de contacto.

*** LEGITIMACIÓN: Consentimiento del interesado.

*** DESTINATARIOS: Como usuario e interesado te informo que los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de mipaginaweb.es) dentro de la UE. Ver política de privacidad de Webempresa.

El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no pueda atender tu solicitud

Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos escribiéndome a info@mipagina.es así como el derecho a presentar una reclamación ante una autoridad de control.

Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: http://www.mipaginaweb.es, así como consultar mi política de privacidad.

 

 

3.- Cómo hacer un formulario contacto creado con Contact Form 7 adaptado a la RGPD

 

En caso de que utilices el conocido plugin Contact Form 7 para la creación de tus formularios de contacto, también podrás adaptarlo fácilmente a la RGPD.

Tendrás que crear un campo tipo checkbox (requerido). Es decir, que sea obligatorio de rellenar por parte del cliente. En ese checkbox, el visitante aceptará la política de privacidad, que tendrá que tener un enlace a la página específica dedicada a la política de privacidad.

Tendrás que poner después del formulario un texto correspondiente a la segunda capa informativa.

 

Aprende más en este post sobre los diferentes errores que te puede notificar Contact Form 7

 

 

3.1.- Añadir checkbox para aceptar política de privacidad con contact form 7

 

Para añadir este campo lo primero que debemos hacer es editar el formulario en el cual queremos añadir este campo. Para ello. Iremos a: “Contacto > Formularios de contacto” y haremos clic en el enlace “Editar” correspondiente al formulario que queremos modificar.

 

 

3.1.1.- Añadir checkbox de la RGPD en contact Form 7

 

En la pestaña Formulario, pondremos el cursor justo encima del texto: [submit “Enviar”], que se corresponde con el botón de “enviar” del formulario de contacto.

A continuación, haremos clic en el botón: “casillas de verificación” y realizaremos las siguientes acciones:

 

i.- Tipo de campo: marcaremos la opción “Campo requerido” (para que sea obligatorio de rellenar por parte del cliente.

ii.- Opciones: aquí pondremos el texto de aceptación de la política de privacidad. Es decir, pondremos: “Acepto la Política de Privacidad”.

 

formulario de contacto contact form 7 adaptado rgpd

Campo checkbox en Contact Form 7 para política de privacidad

 

A continuación, haremos clic en el botón: “Insertar” para insertar el checkbox en el formulario de contacto.

Aparecerá un texto similar a este: [checkbox* checkbox-170 “Acepto la Política de Privacidad”]

Ahora pondremos una etiqueta <label> de apertura y otra </label> de cierre, antes y después del código del checkbox, para respetar el mismo formato que teníamos. Además, pondremos un enlace a la política de privacidad, justo después del código del checkbox.

Podría quedar algo así:

 

<label>[checkbox* checkbox-170 “Acepto la Política de Privacidad”] (Ver <a href=”http://www.miweb.es/politica-de-privacidad”>política de privacidad</a>)</label>

 

NOTA: El código del checkbox en tu caso no será exactamente igual, cambiará el número que aparece en él. También deberás cambiar la url de la política de privacidad.

Deja un salto de línea antes y después del código mencionado anteriormente.

 

enlace checkbox a la página de política de privacidad

Código checkbox con etiquetas label y enlace

 

 

3.1.2.- Añadir texto segunda capa informativa en Contact Form 7

 

Después del texto: [submit “Enviar”], puedes añadir el texto correspondiente a la segunda capa informativa del formulario de contacto.

 

primera capa informativa rgpd contact form 7

Primera capa informativa del formulario de contacto con Contact Form 7

 

El resultado de todo esto sería algo así:

 

Formulario contact form 7 que cumpla la RGPD

Resultado formulario de contacto Contact Form 7 adaptado a la RGPD

 

 

3.1.3.- Recopilar consentimiento en el email recibido.

 

Aún queda algo muy importante, y no es ni más ni menos que aparezca ese consentimiento por escrito en el email que recibimos a nuestro buzón a través del formulario.

Recuerda que podría ocurrir que tuviéramos que demostrar ese consentimiento.

Para ello iremos a la pestaña: “Correo electrónico”, copiaremos el código del checkbox que acabamos de crear, que será algo del estilo a esto: [checkbox-170] pero con otro número y lo pegaremos en el área de texto correspondiente al “Cuerpo del mensaje”, de la manera que te muestro en la imagen:

 

guardar consentimiento en el correo electrónico del formulario de contact form 7

Recopilar consentimiento en el correo electrónico del formulario

 

De esta manera, cuando recibamos los emails generados por el formulario aparecerá de manera explícita que el cliente ha aceptado la política de privacidad.

A continuación, haz clic en el botón de “Guardar”.

 

 

Compártelo ya!!

RECIBE GRATIS CURSO WORDPRESS/DIVI Y MÁS:

 1.- CURSO WORDPRESS Y DIVI (22 vídeos)

2.- GUÍA PARA CREAR UNA PÁGINA WEB PROFESIONAL

3.- VÍDEO TRAINING, MIS PLUGINS IMPRESCINDIBLES WORDPRESS

4.- GUÍA TALLER SEO PARA WORDPRESS

Consentimiento

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.