Cómo crear un formulario de contacto Divi con WPForms

El módulo de formulario de contacto integrado en Divi cumple su función para mensajes sencillos. Pero si has intentado añadir la posibilidad de subir archivos, cobrar pagos o, simplemente, guardar los envíos en tu panel de control de WordPress, probablemente te hayas topado con sus limitaciones.

Divi 5 introdujo mejoras significativas en el módulo de formularios, entre las que se incluyen la lógica condicional y mejores opciones de estilo. Dicho esto, el formulario integrado sigue careciendo de funciones clave que la mayoría de los sitios web empresariales necesitan. No hay almacenamiento de entradas ni procesamiento de pagos, e incluso las funciones de protección contra el spam son limitadas.

WPForms es un creador de formularios específico para WordPress que cubre todas esas carencias y se integra directamente en Divi a través de un módulo nativo. Dispondrás de un auténtico editor de arrastrar y soltar con funciones de generación de formularios mediante IA, más de 2.100 plantillas, y todos los formularios que crees se incorporarán directamente al editor visual de Divi con solo seleccionar una opción en un sencillo menú desplegable.

¡Crea un formulario de contacto de Divi con WPForms! 🙂

Cómo crear un formulario de contacto Divi con WPForms

A continuación, voy a explicar las diferencias clave entre el módulo de formularios de Divi y WPForms, y luego te guiaré paso a paso por todo el proceso de configuración, desde la instalación del plugin hasta la publicación de tu formulario en una página de Divi.

También te mostraré cómo personalizar el aspecto del formulario utilizando los controles de diseño de Divi y veremos algunos tipos de formularios avanzados que puedes crear una vez que todo esté conectado.

¿Por qué utilizar WPForms en lugar del formulario de contacto integrado en Divi?

El módulo de formulario de contacto de Divi cumple bastante bien con lo básico. Dispones de campos de texto, campos de correo electrónico, menús desplegables y lógica condicional si utilizas Divi 5. Pero en cuanto necesitas algo más que recopilar un nombre, un correo electrónico y un mensaje, las limitaciones empiezan a acumularse.

No hay forma de aceptar la subida de archivos, no hay un sistema de procesamiento de pagos integrado y los envíos de formularios se dirigen directamente al correo electrónico, sin posibilidad de verlos ni gestionarlos desde WordPress. A continuación, te ofrecemos una breve comparación para mostrar en qué se diferencian ambas opciones.

Si solo necesitas un sencillo formulario de contacto con los campos «Nombre, correo electrónico y mensaje», el módulo de Divi se encarga perfectamente de ello por sí solo. Pero para cualquier cosa más compleja, WPForms cubre todas esas necesidades en un único plugin, en lugar de obligarte a añadir tres o cuatro complementos adicionales.

Paso 1: Instalar el plugin WPForms

WPForms es un creador de formularios de arrastrar y soltar diseñado específicamente para WordPress. Incluye más de 2.100 plantillas de formularios que abarcan desde formularios de contacto y de pago hasta encuestas, formularios de registro y formularios con calculadora.

Lo que más me gusta de WPForms para sitios web de Divi es la integración nativa de los módulos. He configurado formularios tanto en sitios web de Divi como de Elementor, y el módulo de Divi ofrece, sin duda, una experiencia mucho más fluida.

Si buscas un formulario de contacto básico, WPForms Lite (gratuito) es una buena opción para empezar. Si necesitas subir archivos, lógica condicional o almacenamiento de entradas, opta por el plan Pro.

Para empezar, compre la licencia Pro. Luego, instale WPForms en su sitio web. Si necesitas ayuda, sigue estas instrucciones sobre cómo añadir un plugin a WordPress.

Actualice ahora a WPForms Pro 🙂 ...

Paso 2: Crea tu formulario de contacto de Divi

Una vez activado WPForms, ve a WPForms » Añadir nuevo para crear tu primer formulario. Tienes dos opciones para empezar. La forma más habitual es utilizar la biblioteca de plantillas, que incluye cientos de formularios prediseñados organizados por categorías.

Busca «Formulario de contacto sencillo» y haz clic en «Usar plantilla» para obtener un punto de partida sencillo con los campos «Nombre», «Correo electrónico» y «Comentario/Mensaje» ya configurados.

La opción más rápida es el generador de formularios con IA, que te permite describir lo que debe hacer tu formulario, por ejemplo: «Necesito un formulario de contacto con nombre, correo electrónico, teléfono, un menú desplegable para el departamento y un campo de mensaje», y WPForms lo crea por ti.

La IA también sirve para rellenar las opciones de los campos. Si añades un menú desplegable con la pregunta «¿Cómo nos has conocido?» y no te apetece escribir todas las opciones, AI Choices generará una lista relevante que podrás editar.

Una vez que hayas colocado los campos, el generador de arrastrar y soltar te permite reorganizarlos, renombrarlos y configurarlos todo de forma visual. Puedes marcar los campos como obligatorios, añadir texto de marcador de posición, ajustar el tamaño de los campos y utilizar lógica condicional para mostrar u ocultar campos en función de lo que seleccione el visitante.

Cuando los campos estén listos, haz clic en la pestaña «Configuración» para configurar las notificaciones del formulario. Aquí puedes elegir qué dirección de correo electrónico recibirá los envíos y cómo se verá el correo electrónico de notificación.

Tómate un minuto para comprobar estos ajustes antes de publicar, ya que, por defecto, las notificaciones se envían al correo electrónico de administración de WordPress, que quizá no sea la bandeja de entrada adecuada.

Hay algo que debes tener en cuenta con respecto al envío de correos electrónicos en WordPress. Por defecto, WordPress utiliza la función de correo integrada en PHP, y muchos proveedores de alojamiento la bloquean o limitan su rendimiento.

Si has recibido envíos de formularios que nunca han aparecido en tu bandeja de entrada, es casi seguro que ese sea el motivo. El plugin WP Mail SMTP soluciona este problema enviando tus correos electrónicos a través de un servidor SMTP autenticado.

Te recomiendo que lo configures antes de que el formulario se publique, ya que resolver los problemas relacionados con los correos electrónicos que no se reciben una vez publicado resulta frustrante. Haz clic en «Guardar» en la esquina superior derecha cuando todo esté en orden.

Paso 3: Abrir el Constructor Divi

Una vez que hayas creado tu nueva Página de Contacto (o cualquier otra página en la que quieras tu formulario de contacto), deberás hacer clic en el botón Editar con el Constructor Divi para iniciar el creador de páginas Divi WordPress.

Si se trata de una página ya existente, es posible que tenga un aspecto ligeramente diferente. En ese caso, solo tienes que hacer clic en «Usar Divi Builder » para abrirlo. Cualquiera de las dos opciones te llevará al mismo editor visual.

Una vez abierto el constructor, se le preguntará por el diseño de su página.

Paso 4: Elija su diseño de página de formulario de contacto Divi

Una vez que se haya cargado el constructor, haz clic en «Empezar a crear» para abrir un lienzo en blanco. Divi te pedirá que elijas un diseño de fila para tu primera sección. Yo optaría por la fila de una sola columna.

De este modo, el formulario de contacto ocupa todo el ancho de la página y mantiene la atención del visitante centrada en rellenarlo, en lugar de dividir el diseño con otros contenidos que compiten por su atención.

A continuación, verás que aparece una página en blanco. ¡Este es tu espacio para crear! Y, así es como decidirás cómo quieres que se vea tu página Divi y dónde quieres que esté tu formulario de contacto WPForms.

Aparecerá una ventana emergente en la que se te preguntará qué tipo de diseño (con filas) deseas añadir a tu página de Divi. Para esta entrada, elijamos la primera opción.

De este modo, el formulario de contacto será el único «elemento» que aparezca en esa fila, por lo que llamará mucho la atención y la gente lo rellenará. Selecciona la primera opción (la fila única) para tus filas.

Ahora, serás invitado a insertar un módulo. Vamos a obtener su formulario WPForms impresionante allí a continuación.

Paso 5: Inserta el módulo WPForms para Divi

¡Este paso es muy sencillo, ya que WPForms cuenta con su propia integración con Divi y un módulo de formulario de contacto! Para añadirlo, busca «WPForms» en el cuadro de búsqueda y, a continuación, selecciona el módulo que aparezca.

En la pestaña «Contenido », selecciona tu formulario de contacto en el menú desplegable «Formulario ». Aquí aparecerán todos los formularios que hayas creado en WPForms.

También puedes activar o desactivar el título y la descripción del formulario, aunque la mayoría de los usuarios los desactivan para que la página tenga un aspecto más limpio.

El formulario se muestra en la página al instante, por lo que podrás ver exactamente cómo queda en tu diseño antes de publicarlo. Si todo se ve bien, haz clic en la marca de verificación verde para guardar el módulo.

Buen trabajo, tu formulario de contacto ya está integrado y listo. Ahora puedes publicarlo igual que cualquier otra página en Divi. Haz clic en los tres puntos situados en la parte inferior del constructor de páginas para mostrar algunas opciones adicionales de Divi.

A continuación, haz clic en el botón «Publicar» para verlo en directo. Tu formulario de contacto de Divi ya está activo. Las entradas se recibirán tanto en tu correo electrónico de notificaciones como en el panel de control de WPForms » Entradas.

Aquí es donde puedes ver, buscar, marcar como favorito, exportar y gestionar todas las inscripciones desde dentro de WordPress. Solo eso ya supone una mejora considerable con respecto al formulario integrado de Divi, que envía las inscripciones por correo electrónico y luego desaparecen.

Más allá del formulario de contacto

El módulo WPForms para Divi funciona con cualquier tipo de formulario que crees, no solo con los formularios de contacto. Una vez instalado el plugin y cuando el módulo esté disponible en Divi, estos son algunos de los tipos de formulario más populares que suelen configurar los usuarios de Divi.

Formularios de pago y de pedido

Puedes aceptar pagos con Stripe, PayPal Commerce o Square directamente desde cualquier formulario. He visto a autónomos utilizar esta función para cobrar anticipos de proyectos y a pequeñas empresas para crear formularios de pedido sencillos con selectores de cantidad y códigos de descuento. Si gestionas una página web con Divi para una empresa de servicios, esta es una de las mejoras más prácticas que puedes implementar.

Formularios de carga de archivos

WPForms incluye un campo de formulario de carga de archivos mediante arrastrar y soltar que admite múltiples tipos de archivos, captura en directo con la cámara, límites de tamaño configurables y sincronización automática con el almacenamiento en la nube de Google Drive o Dropbox.

El formulario integrado de Divi no permite subir archivos, lo cual es uno de los motivos más habituales por los que los usuarios de Divi acaban buscando un plugin de formularios independiente.

Formularios de captación de clientes en varios pasos

Los formularios largos con una docena de campos en una sola página suelen quedar sin completar. Con los formularios de varios pasos, puedes distribuir esos campos en varias páginas con una barra de progreso, de modo que los visitantes vean una sección manejable cada vez.

He elaborado una guía completa sobre cómo crear un formulario de varios pasos con saltos de página, indicadores de progreso y lógica de páginas condicional, por si quieres profundizar en la configuración.

Formularios de encuesta y comentarios

WPForms Pro incluye puntuación NPS, campos con escala de Likert e informes de encuestas interactivos que te ofrecen un desglose visual de cada respuesta.

Si recopilas opiniones de los clientes, realizas encuestas de satisfacción o llevas a cabo estudios de mercado en un sitio web creado con Divi, esto elimina por completo la necesidad de utilizar una herramienta de encuestas independiente.

Preguntas frecuentes sobre los formularios de contacto de Divi

WPForms y Divi son una combinación muy popular para crear formularios en WordPress. A continuación, te ofrecemos respuestas a las preguntas más frecuentes sobre su uso conjunto.

¿Funciona WPForms con Divi 5?

Sí. WPForms cuenta con un módulo nativo para Divi que funciona tanto con Divi 4 como con Divi 5. Solo tienes que buscar WPForms en la biblioteca de módulos de Divi, seleccionar tu formulario en el menú desplegable y se integrará directamente en el editor visual. No se necesita nada más para que sea compatible con Divi 5.

¿WPForms es gratuito para Divi?

WPForms Lite es totalmente gratuito e incluye el editor de arrastrar y soltar, el generador de formularios con IA, AI Choices, pagos básicos con Stripe y una integración completa con los módulos de Divi.

Puedes crear e integrar un formulario de contacto operativo sin gastar nada. Para funciones avanzadas como la subida de archivos, la lógica condicional, la gestión de entradas y los formularios de varias páginas, los planes de pago tienen un precio a partir de 49,50 $ al año.

¿Por qué mi formulario de contacto de Divi no envía correos electrónicos?

WordPress utiliza de forma predeterminada la función de correo integrada en PHP, y muchos proveedores de alojamiento la bloquean, limitan su ancho de banda o la redirigen a través de servidores que acaban activando los filtros de spam en el lado del destinatario.

La instalación de un plugin SMTP como WP Mail SMTP soluciona este problema al enviar los correos electrónicos de tus formularios a través de un servidor de correo autenticado. Esto resuelve el problema tanto para el formulario integrado de Divi como para WPForms.

A continuación, saca aún más partido a tus formularios Divi

Ahora que tu formulario de contacto de Divi ya está activo, es posible que quieras ajustar su aspecto en tu sitio web. Echa un vistazo a nuestra guía sobre cómo personalizar el estilo de los formularios de contacto en WordPress para obtener consejos sobre cómo adaptar el diseño de tu formulario a los colores, las fuentes y el espaciado de tu tema Divi.

Si prefieres que tu formulario de contacto aparezca como una ventana superpuesta en lugar de aparecer en una página específica, aquí te explicamos cómo crear una ventana emergente con el formulario de contacto en WordPress. De esta forma, mantienes tus páginas despejadas y, al mismo tiempo, el formulario es accesible desde cualquier página de tu sitio web mediante un botón o un enlace.

Crea ahora tu formulario de contacto de Divi

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin más sencillo para crear formularios en WordPress. WPForms Pro incluye un montón de plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ha ayudado, síguenos en Facebook y Twitter para más tutoriales y guías gratuitas sobre WordPress.