X

Cómo crear un formulario de contacto de Divi en WordPress

cómo crear un formulario de contacto de divi

¿Buscas una forma fácil de crear un formulario de contacto de Divi para tu sitio de WordPress?

Divi es uno de los temas de WordPress más populares del mercado. Viene con un constructor fácil de usar que te permite personalizar tu sitio web desde el front-end. Puedes agregar módulos de página como el botón de llamada a la acción, formulario de contacto y más. 

Con el módulo de formulario de contacto de Divi, puedes crear e insertar un formulario de contacto sin ningún servicio de terceros. Esto es genial si quieres una forma fácil de agregar un formulario de contacto básico en tu sitio.

Sin embargo, necesitarás un potente plugin constructor de formularios como WPForms para funciones avanzadas como envíos de usuarios, marketing por correo electrónico y más. 

Es por eso que Divi Builder también viene con un módulo de WPForms para que puedas agregar fácilmente formularios de contacto profesionales en unos pocos clics.

En esta publicación, te mostraremos estos dos métodos para crear un formulario de contacto de Divi en WordPress:

Creación de un formulario de contacto con Divi Builder

Si aún no tienes Divi, primero, deberás registrarte para obtener una cuenta de Divi. Luego, podrás acceder al panel y descargar tu archivo de tema.  

Divi

Después de instalar y activar el tema Divi en tu panel de WordPress, abre cualquier página o publicación donde quieras agregar tu formulario de contacto de Divi. 

En el editor de publicaciones, verás el botón Usar Divi Builder. Haz clic en el botón para iniciar el constructor en el front-end de tu sitio. 

editor de publicaciones del constructor Divi

En la siguiente pantalla, verás las opciones para construir una página desde cero, elegir un diseño predefinido o clonar una página existente.

Para este tutorial, comenzaremos con una página nueva y agregaremos el formulario de contacto. 

construir desde cero divi

Luego verá el constructor Divi donde puede elegir una plantilla de fila que se ajuste a sus necesidades.

agregar fila constructor divi

Después de agregar la fila, puede ver el panel Insertar Módulo que le permite agregar diferentes tipos de módulos de contenido.

Si se desplaza hacia abajo, encontrará el módulo Formulario de Contacto. Simplemente haga clic en él para insertar el formulario de contacto de Divi en su sitio. 

módulo de formulario de contacto divi

Por defecto, el formulario de contacto consta de tres campos: Nombre, Correo electrónico y Mensaje. Puede hacer clic en el botón Agregar Nuevo Campo para agregar otros campos según sus necesidades. 

editor de formulario de contacto divi

Además, encontrará opciones para editar el título, el mensaje de envío exitoso y el texto del botón de envío en la configuración de Texto

nombre y configuración del formulario divi

Divi también le permite enviar mensajes de correo electrónico para que pueda recibir notificaciones sobre nuevos envíos de formularios. 

Además, encontrará otras opciones útiles como enlaces de redirección, protección contra spam, configuración de fondo y más.

configuración del formulario de contacto divi

Con el módulo de formulario de contacto de Divi, puede agregar fácilmente un formulario de contacto simple a su sitio de WordPress. Hay muchas opciones de personalización para que pueda igualar el estilo de su marca. 

Si desea agregar funciones más avanzadas a su formulario de contacto de Divi, necesitará usar un buen plugin constructor de formularios. 

Y eso es exactamente lo que haremos en el siguiente método. Le mostraremos cómo crear un formulario de contacto de Divi utilizando el constructor de formularios de WordPress más potente, WPForms

Crear un formulario de contacto de Divi con WPForms

página de inicio de WPForms

WPForms es el mejor plugin constructor de formularios de arrastrar y soltar para WordPress. Le permite crear cualquier tipo de formulario, como formularios de contacto, formularios de registro, formularios de descarga y más, en solo unos pocos clics. 

WPForms viene con más de 1,200 plantillas de formularios prediseñadas para que no necesites crear un formulario de contacto desde cero. Puedes agregar o eliminar cualquier campo del formulario y personalizarlos como quieras. Y ni siquiera necesitas conocimientos de codificación para esto. 

Todos los formularios de contacto que crees con WPForms serán 100% responsivos, por lo que se mostrarán perfectamente en cualquier tamaño de pantalla. Incluso hay una opción de protección contra spam incorporada para que puedas prevenir envíos de spam y fraudes en tu sitio. 

Con más de 6 millones de instalaciones activas, WPForms es amado por todo tipo de negocios en todo el mundo. Si eres un usuario de Divi y quieres agregar formularios de contacto increíbles a tu sitio, también puedes optar por WPForms. 

Aquí te presentamos algunas de las razones por las que deberías crear tu formulario de contacto de Divi con WPForms:

  • Fácil de usar y configurar
  • Notificaciones y confirmaciones avanzadas del formulario
  • Funcionalidad de carga de archivos y envío de contenido
  • Sistema de gestión de envíos de formularios integrado
  • Integración con marketing por correo electrónico para hacer crecer tu lista de suscriptores
  • Opción de abandono de formulario para capturar entradas parciales
  • Campos de formulario para comercio electrónico y opciones de pago

Y la gran noticia es que hay un módulo de WPForms en el Divi Builder. Así que puedes agregar fácilmente el formulario de contacto que creas con WPForms en tu sitio.

Además, puedes usar WPForms en cualquier sitio de WordPress, con o sin Divi. Si alguna vez decides dejar de pagar por Divi, los formularios que crees con WPForms permanecerán intactos en tu sitio.

Dicho esto, aprendamos cómo crear un formulario de contacto con WPForms + Divi. 

Paso 1: Instalar y Activar el Plugin WPForms

Primero, necesitarás registrarte para obtener una cuenta de WPForms

WPForms ofrece planes de precios flexibles diseñados para adaptarse a los requisitos de todo tipo de negocios. Puedes elegir un plan que sea adecuado para tu negocio. Y hay una versión lite que está disponible gratis.

Después de registrarte, podrás acceder a tu panel de WPForms. Encontrarás el archivo del plugin junto con tu clave de licencia en la pestaña Descargas

clave de licencia de WPForms

Necesitas instalar este archivo de plugin en tu sitio de WordPress. Para más detalles sobre esto, puedes consultar nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez que instales y actives WPForms en tu sitio, navega a la pestaña WPForms » Configuración en tu panel de administración. 

Aquí, deberás ingresar la clave de licencia y hacer clic en el botón Verificar Clave.

verificar licencia de wpforms

Luego, verás el mensaje de verificación exitosa. Ahora puedes comenzar a crear tu formulario de contacto usando WPForms.

Paso 2: Crear un formulario de contacto

Para crear un nuevo formulario, dirígete a la pestaña Agregar nuevo en tu panel de WordPress. Esto iniciará la biblioteca de plantillas donde puedes buscar una plantilla de formulario de contacto adecuada para tu sitio. 

Para este tutorial, comenzaremos con la plantilla Formulario de contacto simple. Esta plantilla incluye todos los campos básicos necesarios para un formulario de contacto como nombre, correo electrónico y mensaje. También puedes previsualizar cualquier otra plantilla para ver cuál es mejor para ti.

Ingresa un nombre para tu formulario de contacto y haz clic en el botón Usar plantilla en la plantilla de formulario de tu elección. 

formulario de contacto simple en wpforms

En la siguiente pantalla, verás el constructor de formularios de arrastrar y soltar de WPForms. Todos los campos del formulario están en el lado izquierdo y la vista previa del formulario está en el lado derecho de la página. 

Encontrarás una amplia gama de campos útiles como números, desplegables, opción múltiple, carga de archivos, calificación, texto enriquecido y mucho más.

panel de wpforms para formulario de contacto

Para insertar un campo de formulario, solo necesitas arrastrarlo desde el lado izquierdo y colocarlo en la vista previa del formulario. 

wpforms arrastrar y soltar

Si deseas personalizar alguno de estos campos del formulario, puedes hacer clic en ellos y verás las opciones del campo. Hay opciones para cambiar la etiqueta del formulario, la descripción, si es obligatorio y otras opciones adicionales dependiendo del campo del formulario.

agregar carga de archivos al formulario de contacto divi

Una vez que agregues todos los campos requeridos a tu formulario de contacto de Divi, haz clic en el botón Guardar en la parte superior del constructor de formularios. 

A continuación, deberás configurar los ajustes del formulario, las notificaciones y las confirmaciones. 

Paso 3: Configurar los Ajustes del Formulario

Para cambiar la configuración del formulario, abre la pestaña Configuración » General desde el panel del menú izquierdo en el constructor de formularios. Aquí, puedes cambiar el nombre del formulario, la descripción del formulario, el texto del botón de envío y más. 

configuración general de wpforms

En la siguiente pestaña llamada Protección contra spam y seguridad, existe la opción para habilitar la protección contra spam en tu sitio. Esto también te ayudará a configurar Google reCAPTCHA para tu formulario de contacto

spam y seguridad en wpforms para wordpress

Luego, para crear notificaciones de correo electrónico automatizadas, dirígete a la pestaña  Configuración » Notificaciones para configurar las notificaciones por correo electrónico para tu formulario de contacto de Divi. Verás que hay una notificación predeterminada que se envía a la dirección de correo electrónico del administrador. 

Puedes agregar múltiples direcciones de correo electrónico o hacer clic en el botón Agregar nueva notificación para enviar más de una notificación del formulario. 

Con esto, puedes notificarte a ti y a los miembros de tu equipo sobre nuevos envíos de formularios, enviar a los clientes los detalles de sus envíos y más. 

agregar nueva notificación por correo electrónico en wpforms

Si deseas más información sobre esto, puedes consultar nuestra guía sobre Cómo configurar las notificaciones y confirmaciones correctas del formulario.

De igual manera, WPForms te permite decidir qué sucede después de que un usuario envía su información de contacto en tu sitio. Ve a la pestaña Configuración » Confirmaciones y verás la opción para elegir la acción de confirmación.

wpforms-confirmations

Así puedes mostrar un mensaje personalizado de 'gracias' en el frontend después de que el usuario presiona el botón de enviar. O, elige las opciones de redirección para enviar a los usuarios a una página diferente en tu sitio o a una URL externa.

Una vez que hayas terminado con la configuración del formulario, asegúrate de hacer clic en el botón Guardar.

Ahora que tu formulario de contacto está listo, puedes insertarlo en tu sitio web usando Divi Builder. 

Paso 4: Agregar el Módulo WPForms en Divi

Para agregar este formulario de contacto en cualquier página o publicación, abre Divi Builder y elige un diseño de fila como lo hicimos para el módulo del formulario de contacto de Divi.

La única diferencia aquí es que necesitarás buscar el módulo WPForms

formulario de contacto divi wpforms

Después de insertar el bloque WPForms, verás la configuración para elegir el formulario de contacto que acabas de crear. También hay opciones para mostrar el título y la descripción de tu formulario de contacto. 

elegir formulario de contacto wpforms

Incluso puedes cambiar el diseño y el estilo de tu formulario de contacto con Divi Builder. Cuando estés satisfecho con el aspecto de tu formulario de contacto de Divi, haz clic en el botón de la marca de verificación correcta.

Paso 5: Publica tu formulario de contacto de Divi

El último paso es publicar tu formulario de contacto. Para ello, haz clic en el botón de los 3 puntos en la parte inferior de Divi Builder.

publicar formulario de contacto divi

Luego, verás diferentes opciones como zoom, vista previa adaptable y más. En el lado derecho, hay dos botones: Guardar borrador y Publicar. 

Haz clic en el botón Publicar para publicar tu página y formulario de contacto en tu sitio de WordPress. 

publicar tu formulario de contacto divi

Has creado con éxito un formulario de contacto usando Divi y WPForms. Si bien Divi ofrece un módulo de formulario de contacto, carece de algunas funciones como carga de archivos, gestión de entradas e integración de listas de correo electrónico. 

Con WPForms, puedes resolver fácilmente estos problemas. Está repleto de funciones y funcionalidades que te ayudan a crear todo tipo de formularios de contacto, desde básicos hasta profesionales. 

WPForms también te permite crear formularios de WordPress para cualquier propósito, según tus requisitos. Puedes crear formularios de pedido, formularios de registro de eventos, formularios de registro y mucho más.

¡Y eso es todo por hoy! Esperamos que este tutorial te haya ayudado a aprender cómo crear un formulario de contacto de Divi en WordPress con facilidad. 

Si necesitas más ayuda con los formularios de WordPress, puedes consultar estos recursos:

Estas publicaciones te ayudarán a registrar usuarios en tus formularios de WordPress y a hacer crecer tus listas de correo electrónico. La última te ayudará a reducir las tasas de abandono de tu formulario y a mejorar tus conversiones.

Comentarios   Dejar una respuesta

Agrega un comentario

Nos complace que hayas elegido dejar un comentario. Ten en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de privacidad, y todos los enlaces son nofollow. NO uses palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.

Lista de verificación para lanzar WordPress

La lista de verificación definitiva para lanzar WordPress

Hemos recopilado todos los elementos esenciales de la lista de verificación para el lanzamiento de tu próximo sitio web de WordPress en un práctico ebook.
¡Sí, envíame el eBook gratis!