Divi

Formulario de contacto avanzado para Divi (nativo)

Jefferson Maldonado
Por Jefferson Maldonado 8 Feb 2022 10 min de lectura 9 comentarios

En este videotutorial premium te voy a mostrar cómo potenciar la funcionalidad del formulario de contacto nativo de Divi, agregándole capacidades avanzadas que normalmente solo conseguirías con plugins externos pesados. Lo vamos a hacer usando el plugin premium Divi Contact Module PRO, que podrás descargar desde la parte inferior de este tutorial si eres miembro.

El formulario de contacto es, sin exagerar, uno de los elementos más importantes de cualquier sitio web. Es el puente entre tu visitante y tú: ahí es donde un lector anónimo se convierte en un contacto, un prospecto o un cliente. Sin embargo, el módulo de contacto que trae Divi de fábrica es bastante básico. Sirve para lo elemental (nombre, email, mensaje), pero se queda corto en cuanto necesitas algo más sofisticado como recibir archivos, agendar fechas o enviar correos de confirmación automáticos. Y la realidad es que muchos proyectos profesionales necesitan justamente eso.

Divi Contact Module PRO es un plugin premium de la empresa Divi Jet que incrementa la funcionalidad básica que trae el formulario de contacto dentro de Divi, agregando opciones que pueden serte de muchísima utilidad si estás buscando generar campos de fechas, de carga de archivos o de generación de valoraciones a través del mismo formulario.

La gran ventaja de este enfoque es que todo se mantiene dentro del ecosistema de Divi. No estás sumando un plugin de formularios completamente externo (como los típicos constructores de formularios) que cargaría sus propios estilos, scripts y dependencias, muchas veces chocando con el diseño de tu sitio. Aquí simplemente extiendes el módulo que ya conoces y usas, conservando la coherencia visual y el rendimiento. Para mí ese es el punto clave: potencia lo nativo en lugar de reemplazarlo.

Puedes comprar el plugin aquí: Comprar plugin (comprar con el desarrollador, ya no está disponible por otros medios).

Formulario de contacto avanzado para Divi nativo con Divi Contact Module Pro

Características principales del plugin

Este plugin agregará 5 nuevas funciones al módulo de contacto de Divi existente. Cada una de ellas resuelve una necesidad concreta que muchos usuarios buscan y que el formulario nativo no cubre por sí solo:

  • Correo electrónico de confirmación de 'Gracias' personalizado.
  • Campo para carga de archivo.
  • Campo selector de fecha.
  • Campo de valoración por estrellas.
  • Opción de buscar en campos desplegables.

Cada una de estas nuevas opciones aumentará la funcionalidad del formulario básico de Divi. Para mí la más interesante es probablemente la posibilidad de carga de archivos desde el formulario, pues es una opción muy demandada por muchos usuarios y algo que, francamente, le hace falta a Divi de forma nativa. Veamos las características de cada una de ellas en detalle, porque entender bien para qué sirve cada función te va a ayudar a decidir cuáles realmente necesitas en tus proyectos.

Correo electrónico de confirmación de gracias

Con esta opción puedes programar un email automático que se envíe al cliente, dándole las gracias o colocando cualquier mensaje personalizado que quieras que reciba. Esta función puede ser especialmente útil también si quieres que al cliente le llegue un enlace de descarga en automático, con algún recurso que le quieras regalar.

Más allá del simple "gracias por contactarnos", este tipo de correo de confirmación cumple un rol importante en la percepción de profesionalismo de tu marca. Cuando alguien envía un formulario y recibe de inmediato un correo bien redactado confirmando que su mensaje llegó, genera confianza. La persona sabe que su consulta no se perdió en el vacío. Es una pequeña atención que mejora muchísimo la experiencia, y que en negocios de servicios puede marcar la diferencia entre que un prospecto te perciba como serio o como improvisado.

Mi recomendación es que aproveches este correo automático no solo para agradecer, sino para dar el siguiente paso. Por ejemplo: confirma la recepción, indica un tiempo estimado de respuesta ("te responderé en menos de 24 horas") y, si aplica, comparte un recurso de valor o un enlace a contenido relacionado. Así conviertes un mensaje de cortesía en una herramienta de relación con tu audiencia.

Consejo: En el correo de confirmación automático, evita que parezca un mensaje robótico. Personalízalo con el tono de tu marca y, si puedes, incluye el nombre de la persona usando los campos del formulario. Un "Hola [nombre], recibí tu mensaje" se siente mucho más cercano que un genérico "Su solicitud ha sido recibida".

Campo para carga de archivo

Esta es quizá de las opciones que más me gusta de este plugin, pues le permitirá al usuario la carga de cualquier tipo de archivo a través de un simple selector, que podrá adjuntar al correo para enviarlo al administrador a través del módulo de contacto de Divi de manera nativa.

Acá hay un par de detalles importantes. El primero es que el archivo es cargado a tu servidor de hosting, por lo que es recomendable que limites el tamaño de los archivos desde las mismas opciones del plugin. El segundo es que el archivo no te llegará como un adjunto, sino como un enlace de tu mismo sitio web, para que puedas abrirlo y verlo a través de un navegador.

Acá debes tomar en cuenta las limitantes de WordPress en la carga de algunos tipos de archivos, por lo que también podrás limitar la carga de ciertos formatos desde las mismas configuraciones de este módulo. Esto último no es un capricho: es una medida de seguridad fundamental. Si dejas la carga de archivos completamente abierta, le estás dando a cualquier visitante la posibilidad de subir archivos a tu servidor, lo que abre una puerta a posibles abusos. Restringe siempre los formatos permitidos a lo que realmente esperas recibir (PDF, imágenes, documentos) y limita el tamaño máximo.

Los casos de uso de la carga de archivos son muchísimos. Piensa en una imprenta que necesita que el cliente suba su diseño para cotizar, una agencia que pide que le envíen el brief, un despacho legal que solicita documentación, o un servicio de soporte técnico donde el usuario adjunta una captura de pantalla del error. Todos esos flujos, que antes te obligaban a usar formularios externos o a pedir que te mandaran las cosas por correo aparte, ahora los resuelves dentro del propio formulario de Divi.

Consejo: Configura un límite de tamaño razonable para los archivos (por ejemplo, 5 MB) y avisa al usuario de ese límite en la etiqueta del campo. Nada frustra más que llenar un formulario completo y que falle al enviar porque el archivo era demasiado grande. La claridad por adelantado evita abandonos.

Campo de selector de fecha

Con este campo podrás incluir un "calendario" donde el usuario podrá escoger una fecha específica y dejarla marcada en las opciones del formulario cuando se envíen.

Campo selector de fecha en el formulario de contacto de Divi

Esta opción es muy interesante para poder crear una especie de sistema de reservas "manual" a través del formulario de contacto nativo de Divi. No reemplaza a un sistema de reservas completo con sincronización de calendario y pagos, claro está, pero para muchos negocios pequeños es más que suficiente. Piensa en un consultorio que quiere que le pidan cita, un restaurante que recibe reservas, un freelance que agenda llamadas de descubrimiento, o un servicio a domicilio donde el cliente propone el día que prefiere.

La ventaja del selector de fecha frente a un campo de texto libre es enorme. Si pides la fecha como texto, la gente la escribe de mil formas distintas ("el 5", "5/3", "viernes", "la próxima semana") y terminas con datos imposibles de interpretar. Con el selector, el usuario elige sobre un calendario visual y tú recibes una fecha clara y estandarizada. Esa diferencia, que parece menor, te ahorra un montón de idas y vueltas por correo para confirmar de qué día estamos hablando.

Campo de valoración por estrellas

Este campo te permite colocar una especie de estrellas o corazones para generar una valoración dentro de los formularios de Divi. Honestamente, no lo veo tan útil como las opciones anteriores, pero puede tener su lugar en ciertos escenarios.

Donde sí le encuentro sentido es en formularios de feedback o encuestas de satisfacción. Por ejemplo, si después de prestar un servicio quieres que el cliente te deje una valoración rápida junto con su comentario, el campo de estrellas hace que esa acción sea visual e inmediata. La gente está acostumbrada a calificar con estrellas, así que la barrera de entrada es mínima. También puede servir en formularios de testimonios, donde recoges la opinión del cliente y su puntuación al mismo tiempo.

Dicho esto, para la mayoría de formularios de contacto tradicionales (los que buscan generar consultas o leads), este campo probablemente sobra. No todo lo que un plugin ofrece tienes que usarlo: parte de diseñar bien un formulario es saber qué dejar afuera. Un formulario sobrecargado de campos espanta más de lo que ayuda.

Opción de buscar en campos desplegables

Este campo lo que hace es generar una opción de "búsqueda" en los campos de tipo lista que vienen con el formulario de contacto de Divi. Es muy útil si tienes una lista con muchas opciones en un desplegable dentro del formulario.

Opción de búsqueda en campos desplegables del formulario de Divi

Imagina un formulario donde el usuario tiene que seleccionar su país, su ciudad o un producto de un catálogo de cincuenta opciones. Hacer scroll por una lista interminable es tedioso y propenso a errores. Con el campo de búsqueda, la persona simplemente empieza a escribir y el desplegable filtra las opciones en tiempo real, mostrando solo las que coinciden. Es una mejora de usabilidad que reduce la fricción y hace que completar el formulario sea mucho más ágil.

Esta función brilla especialmente en formularios B2B o de soporte donde las listas de opciones tienden a ser largas: selección de modelo de producto, departamento al que se dirige la consulta, motivo de contacto entre muchas categorías, y similares. En esos casos, el buscador en el desplegable no es un lujo, es prácticamente una necesidad para que el formulario sea usable.

¿Qué sucede si los correos de Divi no se envían o llegan vacíos?

Este es probablemente el problema número uno que me reportan con los formularios de Divi, y quiero abordarlo bien porque te puede ahorrar horas de frustración. Si los correos en Divi te llegan vacíos, o simplemente no llegan, casi siempre es un problema de envíos directamente de WordPress, no del formulario en sí. La buena noticia es que tiene solución, y la puedes resolver de dos maneras:

¿Por qué pasa esto? Por defecto, WordPress envía los correos usando la función nativa de PHP (mail), y muchos servidores de hosting tienen esa función mal configurada o directamente limitada para evitar spam. El resultado es que tus formularios "parecen" funcionar (el usuario ve el mensaje de éxito) pero los correos nunca llegan a tu bandeja, o caen en spam. La solución profesional es configurar un servidor SMTP real, que es justo lo que cubren las guías de arriba. Una vez que tienes SMTP bien configurado, tus correos de formulario llegan de forma confiable, y este dolor de cabeza desaparece para siempre.

Consejo: Configura SMTP antes de poner tu formulario en producción, no después de que empieces a perder consultas. Cada correo que no llega es un cliente potencial que se va. Hazte el favor de dejar el envío de correos bien resuelto desde el día uno.

Descarga los recursos de este tutorial acá abajo 👇 siendo premium ⭐

Conclusiones

El plugin Divi Contact Module PRO es superútil para incrementar la funcionalidad del formulario de contacto de Divi. Con este plugin lograrás colocar un selector de fecha, un sistema de carga de archivos, un sistema de valoración o inclusive un mensaje de respuesta automático en el formulario de contacto de Divi, todo manteniéndote dentro del ecosistema nativo y sin sumar constructores de formularios externos que recargan tu sitio.

Mi consejo final es que pienses en tu formulario de contacto como una herramienta estratégica y no como un trámite. Define qué información realmente necesitas pedir, activa solo las funciones que aportan valor a tu flujo (carga de archivos y confirmación automática suelen ser las ganadoras), y no olvides dejar bien configurado el envío de correos vía SMTP. Un formulario bien pensado convierte visitantes en oportunidades de negocio, y eso, al final del día, es de lo que se trata tener un sitio web que trabaje para ti.

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐

// ¿Te sirvió este tutorial?

Imagina lo que aprenderás
con los cursos completos

En UXDivi llevamos los tutoriales del blog al siguiente nivel: proyectos reales de principio a fin, recursos descargables y soporte directo conmigo. Todo por menos del costo de un curso individual en otra plataforma.

+44 cursos +1113 alumnos 4.7 en Trustpilot Garantía 7 días
Jefferson Maldonado
// Escrito por

Jefferson Maldonado

UX Director · Founder UXDivi, MUX Studio y UXDivi Templates

UX Director | fundador de UXDivi y MUX Studio

Comentarios

9 comentarios

Para dejar un comentario, accede a tu cuenta de UXDivi.

Acceder a mi cuenta
Laura Pinilla Miembro Hace 4 años

Hola!

Estoy creando una pagina para un concurso donde tengo un formulario con Nombre, CC, Link y correo (Adicional de campos de autorización de uso de la data). Necesito poder recoger cada formulario en un excel, es posible hacerlo?

Jefferson M. Autor Hace 4 años

Con este plugin no es posible, pero pronto haremos un tutoríal con el que si será posible hacerlo.

Óscar Hace 4 años

Buenos días. Como se pueden cambiar los colores del campo fecha en este plugin? Gracias

Jefferson M. Autor Hace 4 años

Que tal Oscar, sí, en el videotutorial mostramos como hacerlo.

Alex Hace 4 años

Hola muy buenas, muchas gracias por tus tutoriales son tremendos.

Tan solo me interesa saber si ¿Existe la posibilidad que los adjuntos se envíen directamente al mail sin que tengan que quedarse en el servidor?

Jefferson M. Autor Hace 4 años

Que tal Alex, en este caso no, el plugin funciona así por defecto, sin embargo, pronto subiremos otro plugin que si posee esta funcionalidad.

Alex Hace 4 años

Gracias Jefferson, esperaré impaciente!

Luis Z Miembro Hace 3 años

Hola, una pregunta.
Descargue el plugin y al activarlo en mi sitio en todos los menús de WordPress me lanza 17 errores / Alertas con respecto a otros plugins que estoy usando como Eventin, Code Snippets.
¿Alguna solución?, GRACIAS

Jefferson M Autor Hace 3 años

Que tal Luis, un gusto saludarte.
Vale, en este caso no hay mucho que aconsejar, debes verificar si este plugin te da errores de funcionamiento en relación a los otros plugins que tienes activos en el sitio
Si es así, y el sitio pierde funcionalidad, no queda más que elegir que es lo mejor para tu sitio y con eso quedarte.
El conflicto entre plugins es algo que se soluciona solo contactando a los desarrolladores, notificando, y esperando que ellos los actualicen con la resolución de esos conflictos.

Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐