Cómo crear una formulario de contacto con Elementor que cumpla la RGPD

El elemento “Form” de Elementor Pro es el que nos permite la crear un formulario de contacto con Elementor Page builder.

Este elemento “Form” pertenece al plugin de pago “Elementor Pro”. Es decir, si quieres añadir un formulario de contacto con Elementor, debes comprar el plugin Elementor Pro, ya que la versión gratuita del page builder Elementor no dispone de este elemento “Form”.

La configuración del elemento “Form”, como el resto de elementos, esta dividida en 3 apartados diferentes: contenido, estilo y avanzado.

ACCEDE A TODOS MIS CURSOS ONLINE POR SOLO 10€/MES

VER CURSOS

1.- Configuración Elemento “Form” de Elementor -> CONTENIDO

En la pestaña de contenido del elemento Form, encontraremos las opciones de configuración más importantes en cuanto a la estructura y funcionalidad del formulario de contacto.

1.1.- Añadir campos al formulario: Opción “Form field” a widget «Form» de Elementor

• Form Name: establece el nombre que quieres dar al formulario. Este nombre es a modo de identificación del formulario y no será visible en la página.
• Campos: bajo el nombre del formulario aparecen los diferentes campos que componen el formulario de contacto. Sobre cada campo tienes tres posibles acciones: “configurar” (hacemos clic sobre el campo), “duplicar” (icono forma de archivos) o “Eliminar” (icono forma de aspa). Para añadir un nuevo campo, tendremos que hacer clic en el botón “ + AÑADIR ELEMENTO”
• Input size: desde aquí podremos establecer la altura de los campos texto
• Label: con este selector podremos establecer si queremos mostrar en el formulario o no las etiquetas de cada campo.
• Required Mark: con este otro selector, podremos establecer si queremos mostrar u ocultar el signo * en los campos que sean obligatorios de rellenar.

1.1.1.- Añadir un ckeckbox de “He leído y acepto la política de privacidad”.

Para cumplir la RGPD tendremos que añadir un checkbox, en el que el visitante acepte la política de privacidad antes de enviar el formulario.

Haremos clic en el botón “+ AÑADIR ELEMENTO”, nos aparecerá un nuevo campo desplegado con las opciones de personalización.

a.- Type: seleccionaremos “Acceptance”, que es una especie de checkbox especial, con un solo valor y con la posibilidad de establecer que sea obligatorio que el usuario lo seleccione para que se pueda enviar el formulario.

b.- Label: aquí pondremos, opcionalmente, un texto que se mostrará de título del checkbox. En este caso, por ejemplo, podremos poner “Consentimiento: “.

c.- Required: Aquí seleccionaremos “SI”. Para que sea obligatorio aceptar la política de privacidad para poder enviar el formulario.

d.- Acceptance text: aquí estableceremos el texto de aceptación “He leído y acepto la política de privacidad”. Podemos, si queremos, establecer un enlace en “política de privacidad” hacia nuestra página de política de privacidad.

Si queréis poner un enlace tenéis que hacerlo poniendo el código HTML. Lo más sencillo, es utilizar el editor de WordPress (creando una página o post de prueba), crear el texto, ponerle el enlace, y después copiar el código y pegarlo aquí.

El texto HTML resultante será algo parecido a esto: He leído y acepto la <a href="https://miweb.com/politica-de-privacidad">Política de privacidad</a>

e.- Checked by Default: esta opción sirve para que se muestre o no por defecto marcada la opción. Según la RGPD esta opción debe estar en “NO”

f.- Column Width: aquí podremos establecer la anchura máxima del contenedor en el cual está incluido este elemento. En este caso, podemos establecer 100%

Añadir checkbox con formulario de Elementor Pro para aceptar la política de privacidad RGPD

1.2.- Submit Button (botón de enviar) del widget Formulario de Elementor

En este apartado “Submit Button” tenemos diferentes opciones de personalización del botón de enviar del formulario.

• Text: aquí puedes poner “Enviar” para que se muestre dicho texto en el botón.
• Size: tamaño del botón
• Column Width: estableceremos 100% en la anchura del contenedor o columna que contiene el botón.
• Alignament: a mí me gusta alinearlo a la derecha.
• Icon: en caso de que queramos añadirle algún icono.

Personalizar botón de enviar del formulario

1.3.- Actions After Submit (Acciones tras rellenar el formulario) del elemento form de Elementor

En este apartado vamos a establecer que debe hacer Elementor, una vez un usuario haya rellenado y enviado el formulario.

Evidentemente, lo más importante es que se nos envíe un email con los datos introducidos por el usuario. Pero, se pueden hacer otras muchas acciones. Vamos a ver las tres más habituales.

Ten en cuenta que puedes establecer varias acciones de manera simultánea. Es decir, no son excluyentes.

Haz clic en el campo “Add Action” y te aparecerán diferentes opciones. Una vez selecciones una opción, debajo te saldrán nuevos apartados con las opciones de configuración asociadas a dicha opción que hayas seleccionado.

1.3.1.- Email: acción de recibir un email con los datos rellenados por el usuario en el formulario

Esta opción la vamos a utilizar para recibir un email con los datos que ha rellenado el cliente en el formulario.

Los campos a configurar son los siguientes:

• To: aquí pondremos el email donde queremos recibir los datos rellenados por el cliente. Podemos poner varios email separados por comas.
• Subjetct: aquí pondremos el asunto de dicho email
• Message: Aquí estableceremos el contenido del email. Lo más habitual es poner el shortcode [all-fields], en cuyo caso recibirás el contenido de todos los campos rellenados por el cliente. Si quieres recibir solo algunos de estos campos o con una distribución o estructura específica, en vez de el shortcode [all-fields] puedes escribir el shortcode de cada campo en la forma y orden que prefieras. Para ver el shortcode de un campo específico, ve al apartado “Form Fields”, haz clic sobre el campo en cuestión para que se desplieguen sus opciones y haz clic en la pestaña “Advanced”.
• From Email: aquí pon tú email. Es decir, el email del remitente.
• From Name: nombre del remitente (nombre de tu web)
• Reply-to: aquí seleccionaremos a qué email contestamos cuando, tras leer el correo, hacemos clic en “Responder”. Lo lógico es seleccionar “Email Field”, para que la contestación se realice a el email que el usuario estableció en el campo “Email”.
• Cc: Aquí puedes añadir, opcionalmente, uno o varios email separados por comas. Serán los buzones a los que se enviará copia del email.
• Bcc: Aquí podemos añadir destinatarios de copia oculta.
• Meta data: puedes establecer si quieres que se muestren meta datos al final del email.
• Send as: aquí puedes decidir si envías el email como texto plano o como HTML

Configurar email que recibimos con los datos del cliente

1.3.2.- Email 2: acción de enviar un email al visitante (Autoresponder)

En realidad la opción Email 2 es igual que la de Email (tiene las mismas opciones), pero en este caso le vamos a dar un uso diferente.

La opción Email 2 del widget “form” de Elementor, lo utilizaremos para enviar un email de confirmación a la persona que ha rellenado y enviado el formulario en nuestra web (autoresponder)

Las opciones son las siguientes:

• To: aquí pondremos el shortcode asociado al campo email, para que este correo se envíe al email que introdujo el cliente en el formulario. El shortcode habitualmente es: [field id="email"]
• Subjetct: aquí pondremos el título del email. Por ejemplo, podemos poner: “Gracias por contactar con nosotros”
• Message: aquí pondremos el texto que queremos que se muestre en el interior del email. Por ejemplo: “Gracias por contactar con miempresa.com. En breve nos pondremos en contacto con usted”
• From email: nuestro email
• From name: nuestro nombre o el de nuestra empresa
• Replay-to: el email en el que queremos recibir respuesta, en caso de que el cliente responda a este email.

El resto de campos los dejamos en blanco.

1.3.3.- Redirect: redireccionar al cliente a una página de éxito

Utilizaremos esta opción si queremos que cuando el usuario rellene y envíe el formulario sea dirigido a una página específica.

Simplemente, tendremos que añadir la url de destino en el campo: “Redirect To”

1.4.- Additional Options – Opciones adicionales

Haremos clic en el selector “Custom Messages” y traduciremos los diferentes mensajes que se pueden mostrar al usuario que ha rellenado el formulario:

• Success Message: El formulario ha sido rellenado y enviado correctamente.
• Error Message: Ha ocurrido un error y formulario no se ha podido enviar.
• Required Message: Este campo es obligatorio.
• Invalid Message: Existe algún error. El formulario contiene algún error.

1.5.- Añadir primera capa informativa debajo del formulario con widget de texto

La RGPD nos obliga a incluir un texto informativo en el formulario, que se denomina “Primera capa informativa”.

Mi recomendación es usar un elemento tipo “Editor de texto” y colocarlo justo debajo del formulario.

El motivo de este post no es explicar en que consiste esta primera capa informativa (ya que es más un tema legal que de diseño web), sino de cómo se puede incluir en el formulario.

Pero, te pongo un ejemplo de esta primera capa informativa:

• *** RESPONSABLE: Juan Pérez Alonso (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.

2.- Pestaña Estilo y Avanzado del elemento Form de Elementor Pro

El apartado anterior es, sin duda, el más importante para poder crear una formulario con Elementor. Pero, os voy a comentar muy brevemente las opciones más interesantes de los apartados “Estilo” y “Avanzado”. En mi curso de Elementor, también podéis ver las principales opciones y funcionamiento del constructor

2.1.- Pestaña Estilo elemento “Form” Elementor Pro

En el apartado estilo tenemos 4 apartados:

• a.- Form: aquí encontraremos opciones de espaciado del formulario como separación entre cada fila o entre cada columna. Espaciado de las etiquetas de cada campo, color del texto y tipo de fuente.
• b.- Field: Aquí podremos establecer el color del texto dentro del campo, tipo de fuente, color texto, color de fondo y borde.
• c.- Button: aquí podremos personalizar todas las opciones de diseño del botón de “enviar” del formulario.
• d.- Messages: en este apartado podremos establecer algunas características de los mensajes predefinidos del formulario.

2.2.- Pestaña Avanzado elemento “Form” Elementor Pro

Desde esta pestaña, podremos establecer algunos parámetros generales para todo el módulo “form” como: margin y padding, efectos de movimiento, color de fondo, borde del elemento, etc.