Hacer un formulario de contacto en Divi: Tutorial práctico

por | Jul 29, 2020 | Aprender WordPress, Temas WordPress

Hacer un formulario de contacto en Divi

Como ya sabrás, gracias a su sistema de plugins, WordPress permite instalar en tu web todo aquello que necesitas.

Y con los formularios de contacto en WordPress no van a ser menos.

Un formulario de contacto es esencial en una web y existen muchas maneras de implementarlos en WordPress. Usar un Page builder como Divi es una de las mejores formas de hacerlo.

La razón es simple, Divi permite crear formularios a medida de forma sencilla. Simplemente arrastra y suelta los elementos que incluye el constructor y listo.

Usar los formularios de Divi tiene dos ventajas:

  1. Estás aprovechando las múltiples opciones de campos que ofrece.
  2. Estarás ahorrando instalar otro plugin adicional al llevarlo ya Divi integrado.

Ahora que ya sabes que optar por Divi para crear formularios de contacto es una buena elección, vamos a ver cómo se crean paso a paso.

 

Cómo crear un formulario de contacto en Divi paso a paso

Te dejo este video tutorial práctico, no obstante también tienes el artículo explicativo donde te lo explico desde cero.

 

 

Instalar Divi es muy sencillo, instalas el constructor que incluye Divi junto a la plantilla (Elegant Themes) y ya puedes empezar a disfrutar de su constructor, Divi Builder.

Ahora podrás editar las páginas en lugar del editor por defecto de WordPress (Gutenberg) con un constructor web con múltiples opciones para crear una web.

Para ello edita cualquier página y haz clic en el botón “Usar el constructor Divi”.

Usar constructor Divi

Por ejemplo, vamos a editar la página de Inicio.

Lo primero que te encontraras es un mensaje de bienvenido a Divi donde puedes hacer un breve tour explicativo o comenzar a editar directamente.

Si saltas el Tour del Tema Divi te ofrece crear una página desde cero, usar la copia de otra para modificar o emplear plantillas prediseñadas.

De esta manera podrás aligerar mucho el proceso, incluso plantillas de página o plantillas de categoría en divi predefinidas ya traen el formulario de contacto integrado siendo incluso más rápido de hacer todo al poder editar encima.

Otra ventaja de usar plantillas es que te permite conocer como está ya creado.

Para el ejemplo haremos la construcción del formulario desde cero, haremos clic en “empezar a construir”.

Opcion construir desde cero Divi

Si te fijas, el page builder te permite trabajar desde el backend de WordPress o hacerlo en vivo desde la página frontend.

Hay personas a las que le gusta trabajar desde la parte trasera. Para mí y creo que es un avance, lo mejor y más fácil es trabajar en vivo.

Para ello haz clic en “construir en la parte delantera”.

Construir en la parte delantera

 

Editando desde el Front end con Divi

Una vez accedas al front end veras una cruz, si haces clic en ella tendrás la opción “insertar nueva fila”.

Puedes seleccionar el número de columnas y la forma de las mismas que tendrán dentro de la fila. Esto se puede cambiar más adelante pudiendo insertar las filas que quieras.

  1. Para el ejemplo cogeremos una sola columna.
    Ahora seleccionar el elemento que querrás incluir.
  2. Como ya sabes Divi es magnífico y puedes incluir acordeones, botones, comentarios, contadores, galerías, llamadas a la acción, slider, tabla de precios, videos y por supuesto formularios.
  3. Selecciona la opción formularios de contacto.
    Ya tienes insertado un formulario simple en tu página y puedes empezar a ver la configuración del mismo para incluir los campos que necesites.

Opciones formulario Divi

Vamos a ello.

 

Configuración general de un formulario de contacto en Divi

Como acabas de ver, aparece por defecto el campo nombre, email y mensaje.

Además de añadir un sistema de Captcha en WordPress por seguridad y para asegurarse de que quien intenta rellenar los datos no es un robot.

Puedes editar los textos dentro de cada campo y poner lo que quieras y que sea mejor para el usuario.

A partir de aquí tienes la posibilidad de meter muchos más campos y adaptarlo a las necesidades de tu proyecto.

Haz clic en añadir nuevo campo con diferentes opciones (Contenido, diseño o avanzado).

Vamos a ver con esto cómo se trabajan los distintos campos de formularios en Divi.

 

Contenido

  • Texto
    Elige un identificador y un nuevo nombre para ese nuevo campo.
    Vamos a ver que incluir en ese nuevo apartado del formulario de contacto.
    Si no sabes lo que es cada opción cuentas con un iconito de interrogación para resolverte la duda.
  • Opciones de campo
    Selecciona el tipo de campo y elige que quieres incluir.

    Opciones campo formulario Divi

    Escoge la longitud mínima y máxima de los caracteres permitidos, si es obligatorio rellenar este campo para poder hacer el envío o establecer los símbolos permitidos.

  • Lógica condicional
    En función de las respuestas que el usuario da se establecen una ejecución de una lógica.
    Esta parte es algo más compleja pero muy útil ya que te permite mostrar una u otra cosa en función de lo que elija.
    Si lo habilitas tienes las diferentes opciones.
  • Enlaces
    Si quieres hacer que se incluya un link dentro del formulario lo puedes hacer y también tienes la posibilidad de que se abra en la misma pantalla o en otra pantalla nueva.
  • Fondo
    Dale diseño al campo del formulario que estés editanto estableciendo un color de fondo para el mismo, usa gradiantes o establece una foto o un video
    Si usas un video puedes establecer opciones de autoreproducción etc…
    *Tienes un sistema de ayuda para darte más soporte si lo necesitas

 

Diseño

  • Diseño
    En la opción de diseño podrás establecer si quieres que los diferentes campos se establezcan a anchura completa.
  • Campo
    Establece un color de fondo o un color de texto o alinea el texto del nuevo campo a la izquierda, derecha, centrado o justificado…
  • Tamaño
    Escoge el tamaño del campo usando una barra, créalo a tu gusto y usa separadores si lo deseas.
  • Borde
    Escoge si quieres un borde y el color del mismo así como la anchura del mismo.
  • Sombra de la caja
    Establece un sombreado para el formulario dando un efecto de diseño atractivo.
  • Filtrar
    Establece filtros de color usando controles a través de barras.
  • Transformar
    Con un sistema de desplazamiento puedes hacer que el campo se agrande, se gire etc…
    Las posibilidades son muchísimas.
  •  

    Avanzado

    • Css
      Aunque como ves Divi te permite hacer de todo, si quieres darla una vuelta más y personalizarlo al máximo dispones de una campo de CSS para darle estilos a los formularios.
    • Visibilidad
      Haz que el formulario cree una barra de desplazamiento en dispositivos anchos o no.
      *En todo momento haciendo clic en el icono del móvil puedes ver como se va a adaptando el formulario de contacto a mobile.
    • Transiciones
      Establece efectos.
    • Puesto
      Ajustas la separación de los campos etc…

    Esto no ha terminado. Hemos visto las opciones al añadir otro campo pero ahora vas a ver las opciones generales del formulario.

     

    Opciones generales del formulario

    Ahora vuelve a la fecha de retroceso y verás más opciones.

    Opciones generales Formulario de Contacto Divi

    Si hacemos scroll hacia abajo después de añadir campo tenemos las siguientes funcionalidades:

    • Texto

      Pon un título al formulario de contacto para que se muestre encima
      Pon un mensaje de éxito que el usuario leerá cuando envíe el formulario
      Anota el texto que quieres incluir en el botón.

    • Correo electrónico
      Anota el email al que van a llegar los mensajes y define como quieres que te lleguen.
      Si lo dejas en blanco ya se recibe correcto pero si quieres que te llegue de una forma más ordenada a tu gusto defínelo aquí.
    • Redirigir
      Si quieres que el usuario cuando rellene el formulario vaya a a una página personalizada de Gracias por contactar, aquí puedes poner el enlace a esa página
    • Spam protección
      Elige captcha, u otro sistema que se integre con Divi y actívalo por seguridad o desactívalo
    • Enlace
      Igual que antes te permite poner un link en el formulario
    • Fondo
      Personaliza todo lo que quieras el formulario completo usando colores, degradados y mil opciones más de diseño.

    • Etiqueta de administración
      Crear una etiqueta interna identificativa

    Una vez terminado el formulario haz clic en el aspa verde de Guardar y después clic en los tres puntos y guarda para que se publique y listo.

    Pero esto no está del todo bien, este formulario no está completamente bien creado.

    Si quieres usar formularios que sean legales tienes que adaptar la normativa de RGPD en WordPress.

    Vamos a ver como adaptar un formulario al reglamento general de protección de datos.

    Es facilísimo.

     

    Adaptar formulario a la RPGD

    En este video corto te lo explico, pero como siempre también puedes seguir el texto donde te lo cuento todo.

     

     

    Desde mayo del 2018 es necesario integrar cada formulario con la rgpd.

    Es obligatorio integrar una política de privacidad y aviso legal en WordPress que explique al usuario que va a hacer con los datos facilitados.

    Para ello se debe integrar una pestaña de checkbox para dar el consentimiento así como información de la personas o entidad que se encuentra detrás de la web para que el proceso sea legal y permitido.

    Adaptar el formulario a la RGPD con Divi es muy sencillo como vamos a ver.

    Lo primero que necesitas es crear un página de política de privacidad. Esta es necesario que esté en insertada en la web, así que deberías tenerla creada.

    Una vez lista y siguiendo la misma forma que hemos estado viendo de añadir campos, vamos a añadir un nuevo campo y seleccionar la opción de campo “casilla de verificación”.

    Escribe el texto “acepto las políticas de privacidad” y haz clic en el botón del enlace para poner como url de destino la política de privacidad.

    RGPD DIVI

    Marca la pestaña como obligatoria ya que es necesario para dar el consentimiento.

    Para quitar el nombre de “nuevo campo” (como ves en la imagen). Tienes que ir a título y deja el campo en blanco.

     

    Inserta los datos del responsable de la web

    Es necesario incluir los datos personales de la empresa.

    Para ello vamos añade un área de texto al formulario insertar un cuadro de texto debajo del formulario donde integraremos los siguientes datos:

    1. Responsable
    2. Finalidad
    3. Legitimación
    4. Destinatarios

    Esta opción está fuera de las opciones de formulario.

    Para incluir esta área de texto creamos un nuevo módulo en la parte inferior.

    Haremos clic en la cruz negra que está dentro de la sección creada para el formulario e incluiremos la funcionalidad “texto”.

    Aquí incluiremos los datos.

    Datos RGPD

    Ya está, ahora ya tenemos el formulario de contacto creado con Divi al completo y cumpliendo las leyes de la RGPD.

     

    Conclusión

    Cómo has visto, crear formularios con Divi es muy sencillo, no tiene dificultad ninguna.

    Hemos creado un formulario sencillo y adaptado a la rgpd pero puedes incluir más campos y personalizarlo muchísimo más.

    Divi es una de los mejores pages builder y contar con él para crear web con WordPress es una maravilla y si encima te da tantas opciones para los formularios es una herramienta de 10.

    Sabes que la seguridad en WordPress es muy importantes, así que no te lo pienses más y empieza a crear tus formularios de contacto con Divi.

    Además, como sabes el constructor de divi te da millones de herramientas y posibilidades para hacer de tu página una web espectacular.

    Puedes realizar los diferentes cursos gratuitos de Webempresa que te ayudarán a conocer más divi, y harán que te enamores: Curso Divi y Curso Divi Avanzado.