Cómo crear un formulario de contacto de Divi con WPForms

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

Divi 5 trajo mejoras reales al módulo de formularios, incluida la lógica condicional y mejores opciones de estilo. Dicho esto, el formulario integrado todavía carece de características clave que la mayoría de los sitios web empresariales necesitan. No hay almacenamiento de entradas, procesamiento de pagos, e incluso las funciones de protección contra spam son limitadas.

WPForms es un creador de formularios dedicado para WordPress que cubre todas esas carencias y se integra directamente con Divi a través de un módulo nativo. Obtienes un constructor de arrastrar y soltar real con funciones de generación de formularios con IA, más de 2100 plantillas, y cada formulario que creas se inserta directamente en el constructor visual de Divi desde un menú desplegable sencillo.

¡Crea un formulario de contacto Divi con WPForms! :)

Cómo crear un formulario de contacto de Divi con WPForms

A continuación, cubriré las diferencias clave entre el módulo de formularios de Divi y WPForms, y luego te guiaré a través de la configuración completa, 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 la apariencia del formulario utilizando los controles de diseño de Divi y exploraré algunos tipos de formularios avanzados que puedes crear una vez que todo esté conectado.

Por qué usar WPForms en lugar del formulario de contacto integrado de Divi

El módulo de formulario de contacto de Divi maneja lo básico lo suficientemente bien. Obtienes campos de texto, campos de correo electrónico, menús desplegables y lógica condicional si estás en Divi 5. Pero en el momento en que necesites algo más allá de recopilar un nombre, correo electrónico y mensaje, las limitaciones comienzan a acumularse.

No hay forma de aceptar cargas de archivos, no hay procesamiento de pagos integrado y los envíos de formularios van directamente al correo electrónico sin forma de verlos o administrarlos dentro de WordPress. Aquí tienes una comparación rápida lado a lado para mostrar dónde difieren las dos opciones.

Si un formulario de contacto simple de "Nombre, Correo electrónico, Mensaje" es todo lo que necesitas, el módulo de Divi lo maneja bien por sí solo. Pero para cualquier cosa más compleja, WPForms cubre todas esas lagunas en un solo plugin en lugar de requerir que conectes tres o cuatro extras.

Paso 1: Instalar el plugin WPForms

WPForms es un creador de formularios de arrastrar y soltar hecho específicamente para WordPress. Viene con más de 2100 plantillas de formularios que cubren todo, desde formularios de contacto y formularios de pago hasta encuestas, formularios de registro y formularios de cálculo.

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

Para un formulario de contacto básico, WPForms Lite (gratuito) te permite empezar. Si necesitas subir archivos, lógica condicional o almacenar entradas, opta por el plan Pro.

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

¡Actualiza a WPForms Pro ahora! :)

Paso 2: Crea tu formulario de contacto Divi

Con WPForms activo, ve a WPForms » Añadir nuevo para crear tu primer formulario. Tienes dos maneras de empezar aquí. La ruta tradicional es la biblioteca de plantillas, que se carga con cientos de formularios predefinidos organizados por categoría.

Busca "Formulario de contacto simple" y haz clic en Usar plantilla para obtener un punto de partida limpio con los campos Nombre, Correo electrónico y Comentario/Mensaje ya incluidos.

La opción más rápida es el generador de formularios con IA, que te permite describir lo que tu formulario debe hacer, como "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 funciona para rellenar las opciones de los campos. Si añades un menú desplegable para "¿Cómo nos conoció?" y no te apetece escribir todas las opciones, Opciones de IA generará una lista relevante que podrás editar.

Una vez que tengas tus campos, el constructor de arrastrar y soltar te permite reorganizar, renombrar y configurar todo visualmente. Puedes establecer campos como obligatorios, añadir texto de marcador de posición, ajustar el tamaño de los campos y usar lógica condicional para mostrar u ocultar campos según lo que el visitante seleccione.

Cuando tus campos estén listos, haz clic en la pestaña Configuración para configurar las notificaciones del formulario. Esto controla a qué dirección de correo electrónico se envían los envíos y cómo se ve el correo electrónico de notificación.

Tómate un minuto para revisar esta configuración antes de publicarla, porque la configuración predeterminada envía notificaciones a tu correo electrónico de administrador de WordPress, que puede que no sea la bandeja de entrada correcta.

Una cosa a tener en cuenta con la entrega de correo electrónico de WordPress. WordPress utiliza la función de correo electrónico integrada de PHP por defecto, y muchos proveedores de alojamiento la bloquean o limitan.

Si has tenido envíos de formularios que nunca llegaron a tu bandeja de entrada, esa es casi con seguridad la causa. El plugin WP Mail SMTP soluciona esto enrutando tus correos electrónicos a través de un servidor SMTP autenticado.

Recomiendo configurarlo antes de que tu formulario se publique, porque solucionar problemas de correos electrónicos perdidos después del hecho es frustrante. Haz clic en Guardar en la esquina superior derecha cuando todo tenga buen aspecto.

Paso 3: Abre el constructor de Divi

Una vez que crees tu nueva Página de Contacto (o la página que desees para tu formulario de contacto), querrás hacer clic en el botón Editar con el constructor Divi para iniciar el creador de páginas de WordPress Divi.

Si es una página existente, puede que tenga un aspecto un poco diferente. Si es así, simplemente haz clic en Usar el constructor Divi para iniciarlo. Cualquiera de las dos opciones te llevará al mismo editor visual.

Una vez que el constructor esté abierto, se te preguntará sobre el diseño de tu página.

Paso 4: Elige el diseño de tu página de formulario de contacto Divi

Una vez que cargue el constructor, haga clic en Empezar a construir para abrir un lienzo en blanco. Divi le pedirá que elija un diseño de fila para su primera sección. Yo elegiría la fila de una sola columna aquí.

Le da al formulario de contacto ancho completo y mantiene la atención del visitante centrada en completarlo, en lugar de dividir el diseño con otro contenido que compite por la atención.

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

Verá una ventana emergente que le pregunta qué tipo de diseño (usando filas) le gustaría agregar a su página de Divi. Para esta publicación, elijamos la primera opción.

Esto hará que el formulario de contacto sea el único 'objeto' que entre en esa fila, por lo que recibe mucha atención y la gente lo completa. Continúe y seleccione la primera opción (la fila única) para sus filas.

Ahora, se le invitará a insertar un módulo. Vamos a poner su increíble formulario de WPForms a continuación.

Paso 5: Inserta el módulo Divi de WPForms

Este paso es extra fácil porque WPForms tiene su propia integración con Divi y un módulo de formulario de contacto. Para agregarlo, busque WPForms en el cuadro de búsqueda y luego seleccione el módulo que aparece.

En la pestaña Contenido, elija su formulario de contacto en el menú desplegable Formulario. Esto enumera todos los formularios que ha creado en WPForms.

También puede activar o desactivar el título y la descripción del formulario, aunque la mayoría de la gente los desactiva para una apariencia más limpia en la página.

El formulario se renderiza en la página inmediatamente, por lo que puede ver exactamente cómo encaja en su diseño antes de publicarlo. Si todo se ve bien, haga clic en la marca de verificación verde para guardar el módulo.

Buen trabajo, su formulario de contacto está incrustado y listo. Ahora, puede publicarlo de la misma manera que publica cualquier página en Divi. Haga clic en los 3 puntos en la parte inferior del constructor de páginas para mostrar configuraciones adicionales de Divi.

A continuación, seleccione el botón Publicar para verlo en vivo. Su formulario de contacto de Divi está en vivo. Los envíos fluirán tanto a su correo electrónico de notificación como al panel de WPForms » Entradas.

Aquí es donde puede ver, buscar, marcar, exportar y administrar cada envío desde dentro de WordPress. Eso solo ya es una mejora importante con respecto al formulario incorporado de Divi, que envía las entradas al correo electrónico y luego desaparecen.

Más allá de un formulario de contacto

El módulo WPForms Divi funciona para cualquier tipo de formulario que cree, no solo para formularios de contacto. Una vez que el plugin esté instalado y el módulo esté disponible en Divi, aquí hay algunos de los tipos de formularios más populares que los usuarios de Divi tienden a configurar.

Formularios de pago y pedidos

Puede aceptar pagos con Stripe, PayPal Commerce o Square directamente desde cualquier formulario. He visto a autónomos usar esto para la recopilación de depósitos de proyectos y a pequeñas empresas para formularios de pedidos simples con selectores de cantidad y códigos de cupón. Si tiene un sitio Divi para un negocio de servicios, esta es una de las mejoras más prácticas que puede hacer.

Formularios de carga de archivos

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

El formulario integrado de Divi no tiene ninguna capacidad de carga de archivos, que es una de las razones más comunes por las que los usuarios de Divi buscan un plugin de formularios independiente en primer lugar.

Formularios de generación de leads de varios pasos

Los formularios largos con una docena de campos en una página tienden a ser abandonados. Con los formularios de varios pasos, puedes dividir esos campos en varias páginas con una barra de progreso para que los visitantes vean una sección manejable a la vez.

He preparado 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ágina condicional si quieres profundizar en la configuración.

Formularios de Encuestas y Comentarios

WPForms Pro incluye puntuación NPS, campos de escala Likert e informes de encuestas interactivas que te ofrecen desgloses visuales de cada respuesta.

Si estás recopilando comentarios de clientes, realizando encuestas de satisfacción o investigando el mercado en un sitio impulsado por Divi, esto elimina la necesidad de una herramienta de encuestas separada por completo.

Preguntas frecuentes sobre formularios de contacto de Divi

WPForms y Divi son una combinación popular para crear formularios de WordPress. Aquí tienes respuestas a las preguntas que surgen con más frecuencia sobre su uso conjunto.

¿WPForms funciona con Divi 5?

Sí. WPForms tiene un módulo nativo de Divi que funciona tanto con Divi 4 como con Divi 5. Busca WPForms en la biblioteca de módulos de Divi, selecciona tu formulario en un menú desplegable y se incrustará directamente en el constructor visual. No se requiere nada adicional para la compatibilidad con Divi 5.

¿Es WPForms gratis para Divi?

WPForms Lite es completamente gratuito e incluye el constructor de arrastrar y soltar, el generador de formularios con IA, Opciones de IA, pagos básicos de Stripe e integración completa del módulo Divi.

Puedes crear e incrustar un formulario de contacto funcional sin gastar nada. Para funciones avanzadas como cargas de archivos, lógica condicional, gestión de entradas y formularios de varias páginas, los planes de pago comienzan en 49,50 €/año.

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

WordPress se basa en la función de correo electrónico integrada de PHP por defecto, y muchos proveedores de alojamiento la bloquean, limitan o la enrutan a través de servidores que acaban activando los filtros de spam en el extremo receptor.

Instalar un plugin SMTP como WP Mail SMTP soluciona esto enviando los correos electrónicos de tu formulario a través de un servidor de correo autenticado. Eso resuelve el problema tanto para el formulario integrado de Divi como para WPForms.

A continuación, lleva tus formularios de Divi más allá

Ahora que tu formulario de contacto de Divi está activo, es posible que desees ajustar su apariencia en tu sitio. Consulta nuestra guía sobre cómo estilizar formularios de contacto en WordPress para obtener consejos sobre cómo hacer coincidir el diseño de tu formulario con los colores, fuentes y espaciado de tu tema Divi.

Si prefieres que tu formulario de contacto aparezca como una superposición en lugar de estar en una página dedicada, aquí te explicamos cómo crear un popup de formulario de contacto en WordPress. Mantiene tus páginas limpias y hace que el formulario sea accesible desde cualquier página de tu sitio a través de un botón o un enlace desencadenante.

Crea tu formulario de contacto Divi ahora

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

Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.