Cómo crear un formulario de contacto en Divi

Un formulario de contacto es una herramienta fundamental para que nuestros futuros clientes puedan contactar con nosotros a través de nuestra página web. Por ello, es vital contar con un formulario que sea fácil de entender y que vaya acorde con nuestra imagen de marca o empresa.

En este post vamos a ver cómo podemos crear un formulario de contacto desde cero utilizando Divi.

¡A por ello!

También te puede interesar:
¿Cómo instalar Divi en WordPress?
¿Qué es Divi? Guía de Divi Theme para WordPress
¿Cómo instalar WordPress en pocos pasos?
Mejores plantillas para diseñar tu página web en WordPress (2021)

¿Qué es un formulario de contacto?

Un formulario de contacto es un apartado de tu página web donde los usuarios que estén visitando tu web van a poder contactar contigo siempre que lo necesiten. Suelen ser muy intuitivos y, por ello, suele ser el primer sitio al que suelen acudir los usuarios para poder contactar con la empresa o con la marca.

En este tipo de formularios, los usuarios tendrán que indicar su nombre, su email o número de teléfono y el motivo por el que está realizando la consulta para poder contactar contigo.

Igualmente, existen diferentes tipos de formularios en base a lo que la empresa o marca necesite saber del usuario que está contactando. Por ejemplo, puedes pedir también un asunto, añadir un desplegable, etc.

Antes de empezar a crear tu formulario de contacto, vamos a ver qué aspectos debemos tener en cuenta:

Ubicación del formulario de contacto

Lo más recomendable es que puedas crear una apartado específico dentro de tu página web para poder poner tu formulario. Para ello, puedes crear una página de contacto en el que puedas incluir tu formulario de contacto y también añadir información adicional sobre tu empresa. Por ejemplo, podrías añadir también el mapa de tu sitio físico, más datos de contacto de la empresa, etc. Cualquier información que quieras compartir y que pueda ayudar al usuario a contactar contigo, es bienvenida.

Igualmente, también es recomendable que puedas poner tu formulario de contacto dentro de la página de inicio o al final de tus servicios. Esto hará que sea mucho más fácil y rápido para el usuario el poder contactar contigo.

Campos a rellenar

Es muy importante que definas aquellos campos que quieres que el usuario complete para poder ponerse en contacto.

Añadir un campo para el nombre, el email o teléfono y un asunto sería más que suficiente para que el usuario pudiese contactar ya contigo. Sin embargo, también puedes añadir otros campos que puedan ser importantes para tu empresa. Igualmente, mi recomendación es que no añadas demasiados campos para evitar que el usuario pueda abandonar tu formulario.

A su vez, para poder evitar el spam que pueda entrar a nuestra web y dar una mayor fiabilidad, prueba a añadir un Recaptcha.

Diseño y llamada a la acción

Para que el formulario pueda ir acorde con tu página web, es importante que tengas en cuenta los colores de tu empresa o marca y el tamaño de tu formulario. A su vez, también es importante que añadas un texto al inicio para que el usuario pueda conectar contigo con mayor facilidad.

Cómo crear un formulario de contacto en Divi

Aunque existen plugins como Contact Form 7 para poder crear tu formulario de contacto, con Divi también puedes hacerlo de una manera visual, personalizable y muy muy rápida. Por ello, vamos a ver cómo podemos crear un formulario de contacto utilizando el constructor de Divi:

1. Entramos al constructor de Divi

Para poder empezar a crear nuestro formulario, lo primero que debemos hacer es crear una página nueva en nuestro WordPress.

Una vez dentro, tendremos que elegir la opción de “Empezar a Construir” o “Usa Divi Builder”, según la versión de WordPress que tengas.

Después, marcaremos “Editar con el Divi Builder” y  “Construir desde cero” para poder empezar a trabajar con Divi.

2. Insertamos una fila

Nosotros estaremos editando desde la parte de front end de Divi. Por ello, una vez que hayamos realizado el paso anterior, se nos abrirá una serie de opciones para poder elegir las filas y columnas que queremos añadir a nuestro formulario de contacto.

Seleccionaremos una única fila (primera imagen a la izquierda) para poder crear un formulario de contacto básico. Igualmente, esta opción podremos editarla y personalizarla siempre que lo necesitemos.

3. Elegimos el módulo

Una vez elegida la fila, se nos desplegarán una serie de opciones. Esto se conoce como módulos.

Los módulos de Divi son una serie de apartados que nos ayudan a ir dándole forma a nuestra página web. Cuentan con una gran variedad de diferentes opciones como un acordeón, poder insertar código, un botón, deslizador, una imagen, etc.

En este caso, seleccionaremos la opción de “formulario de contacto” para que pueda añadirse por defecto a nuestra página web.

4. Formulario de contacto creado

Como ves, después de seleccionar el módulo de formulario de contacto, Divi ya nos ha creado un formulario de contacto predeterminado y básico que ya podríamos utilizar sin problema dentro de nuestro sitio web. En él, se incluye por defecto el nombre, el email, un bloque de texto y un botón de enviar, elementos imprescindibles para cualquier formulario.

Este formulario es completamente personalizable. Por ello, Divi siempre nos ofrece la opción de duplicar, borrar, eliminar o añadir más campos a nuestro gusto.

Para poder borrar cada campo tendríamos que seleccionar el icono de la papelera.

En caso de querer añadir uno nuevo, haremos click en el botón de + y se nos aparecerán una serie de opciones.

En ellas podremos elegir los títulos, la longitud y todas aquello que queramos modificar del nuevo cambio.

Una vez completado, lo validaremos haciendo click en el botón verde para poder añadirlo a nuestro formulario.

 

5. Modificando el diseño de nuestro formulario

Por último, para poder cambiar el diseño de nuestro formulario, simplemente tenemos que ir al apartado de diseño.

Dentro de este apartado, podremos elegir una gran multitud de opciones como el color de nuestras cajas, el tipo de texto, sombras, estilo del botón de enviar, etc. que queremos que lleve nuestro formulario. Lo más recomendable en este caso es que uses una tipografía legible y un diseño que vaya a acorde el resto de tu página web.

A su vez, dentro del apartado de “Avanzado”, podremos elegir entre una gran cantidad de opciones como añadir código CSS personalizado, seleccionar donde queremos que sea visible el formulario o elegir el tipo de scroll para el usuario.

¡Y ya estaría! Con estas últimas opciones ya podríamos tener nuestro formulario 100% personalizado dentro de nuestro sitio web.

Conclusiones

Crear un formulario de contacto utilizando Divi puede ser una gran opción para hacer que nuestros nuevos clientes puedan contactar con nosotros. Además, su constructor es muy visual e intuitivo, haciendo que podamos personalizarlo y adaptarlo sin ningún problema.

Recuerda que si necesitas ayuda con Divi o tienes cualquier duda, puedes contactar conmigo. Estaré encantado de poder ayudarte en todo lo que tu proyecto necesite.

¿Y tú? ¿Sabías que se podían crear formularios de contacto con Divi Builder?