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).

 

Ahora 20% de descuento Plantilla DIVI

SUPER DESCUENTO DIVI

 

->PLAN YEARLY ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra +3 plugins.

Este es un plan de renovación anual. Es decir, para seguir disfrutando de las novedades de Elegant Themes debes renovar el plan de año en año. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 89$ + IVA, pero con el descuento del 20% se te quedará en 70 $ + IVA

NOTA: Si al final de un año no renuevas el plan Yearly Access, podrás seguir utilizando perfectamente tu plantilla en las webs que la hayas instalado. Pero, no podrás actualizarlas.

Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $70 con el descuento ya aplicado.

DESCUENTO PLAN YEARLY ACCESS

 

->PLAN LIFE TIME ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra + 3 plugins.

Este plan se paga una única vez. Es decir, NO hay que renovarlo de manera anual. Podrás disfrutar de los recursos de Elegant Themes de por vida. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 249$ + IVA, pero con el descuento del 20% se te quedará en 199$ + IVA

NOTA: Si contratas el plan Life Time Access, en 3 años habrías amortizado el coste de renovaciones del plan Yearly Access

Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $199 con el descuento ya aplicado.

DESCUENTO PLAN LIFETIME ACCESS

 

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

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.

 

SUPER DESCUENTO 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

SUPER DESCUENTO 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 fo