Contact Form 7 es el plugin de formularios más instalado de WordPress, pero sus estilos por defecto no se integran bien con el diseño personalizado de un sitio en Divi. En este tutorial te mostramos cómo personalizar el formulario de CF7 en Divi usando un plugin gratuito, sin necesidad de conocer CSS.
Si quieres una alternativa con más integración nativa con Divi, revisa nuestro tutorial sobre formulario de contacto avanzado con Divi.
CF7 vs formulario nativo de Divi vs Gravity Forms
Antes de entrar en la personalización, vale entender cuándo conviene usar CF7 y cuándo no:
| Característica | CF7 | Formulario nativo Divi | Gravity Forms |
|---|---|---|---|
| Precio | Gratis | Incluido en Divi | Desde $59/año |
| Integraciones CRM/Email | Excelente (cientos de add-ons) | Limitada | Excelente |
| Personalización visual | Requiere plugin/CSS | Nativa en Divi | Requiere CSS |
| Lógica condicional | Con add-on | No | ✅ Nativa |
| Base de datos de entradas | Con add-on (Flamingo) | No | ✅ Nativa |
| Integración con Divi | Con Divi CF7 plugin | Perfecta | Manual |
CF7 es la mejor opción cuando necesitas integraciones con herramientas externas (CRMs, email marketing, Slack, Zapier, Salesforce) que no están disponibles para el formulario nativo de Divi. Si solo necesitas un formulario de contacto básico que se vea bien, el formulario nativo de Divi es suficiente.
Paso 1: Instalar Contact Form 7 y crear un formulario
Si aún no tienes CF7, ve a tu panel de WordPress → Plugins → Añadir nuevo → busca "Contact Form 7" → instala y activa. El plugin es 100% gratuito y está disponible en el repositorio oficial de WordPress.
Al activarlo, aparece la sección "Formularios de contacto" en tu menú de WordPress. CF7 crea automáticamente un formulario de contacto básico. Para crear uno nuevo:
- Ve a Formularios de contacto → Añadir nuevo.
- Usa los botones de campo para agregar los campos que necesitas: nombre, email, asunto, mensaje, teléfono, fecha, etc.
- Configura el email de destino en la pestaña "Correo".
- Guarda y copia el shortcode generado (lo necesitarás después).
Tipos de campos disponibles en CF7
CF7 ofrece una variedad de tipos de campo que puedes configurar con sus botones en el editor:
- text / email / tel / url / number: campos de texto básicos con validación automática.
- textarea: área de texto multilínea para mensajes.
- date / time: selector de fecha y hora.
- select / radio / checkbox: opciones de selección simple o múltiple.
- file: carga de archivos (PDF, imágenes, etc.) — requiere configuración extra en el email.
- acceptance: checkbox de aceptación de términos y condiciones.
- quiz: pregunta simple de verificación anti-spam.
Paso 2: Instalar el plugin Divi Contact Form 7
El plugin Divi Contact Form 7 (anteriormente llamado CF7 Styler for Divi) es gratuito y está disponible en el repositorio de WordPress. Búscalo por su nombre o por "cf7-styler-for-divi" y actívalo.
Una vez activo, agrega un nuevo módulo al constructor visual de Divi: el módulo de formulario CF7. Este módulo reemplaza el shortcode manual y expone todas las opciones de diseño directamente en el panel de Divi, exactamente como si fuera un módulo nativo.
Paso 3: Insertar y personalizar el formulario en Divi
En el constructor visual de Divi, añade el nuevo módulo "Contact Form 7". En las opciones del módulo:
- Selecciona el formulario que creaste en CF7 desde el dropdown.
- Ve a la pestaña Diseño para empezar a personalizar.
Las opciones de diseño disponibles incluyen:
- Campos de entrada: color de fondo, color del borde, radio del borde, relleno interno, tipografía del texto ingresado.
- Labels: tamaño, color y peso de las etiquetas de campo.
- Botón de envío: color de fondo, color de hover, ancho, tipografía, borde.
- Mensajes de error y éxito: color y tipografía de los mensajes de validación.
- Espaciado: margen y padding de cada elemento.
¿Quieres aprender a crear formularios más avanzados con lógica condicional? Mira cómo usar formularios Optin de Divi o explora los tutoriales premium de UXDivi.
Solución de problemas comunes con CF7 en Divi
El email no llega después de enviar el formulario
Este es el problema más frecuente con CF7 y no tiene que ver con Divi — es un problema de configuración de correo del servidor. La solución más confiable es instalar el plugin WP Mail SMTP y configurar el envío a través de Gmail, SendGrid o cualquier servidor SMTP. Nunca confíes en la función mail() nativa de PHP para emails de producción.
El formulario recibe demasiado spam
CF7 incluye un sistema básico de protección anti-spam, pero en sitios con mucho tráfico no es suficiente. Opciones:
- Activar la integración con Akismet (gratis para sitios personales).
- Activar Cloudflare Turnstile (menos intrusivo que reCAPTCHA).
- Usar el campo "Quiz" de CF7 como filtro simple (pregunta matemática básica).
El formulario se ve diferente en móvil
Divi Contact Form 7 hereda los breakpoints de Divi. Usa las opciones de diseño responsive del módulo para ajustar el padding y el tamaño de fuente en tablet y móvil independientemente del desktop.
Preguntas frecuentes sobre CF7 con Divi
¿Puedo conectar CF7 con Mailchimp o MailerLite?
Sí. CF7 tiene add-ons gratuitos y de pago para las principales plataformas de email marketing. También funciona perfectamente con Zapier para conectarlo a cualquier herramienta que no tenga integración directa.
¿El módulo Divi Contact Form 7 funciona con Divi 5?
El plugin Divi Contact Form 7 sigue actualizándose. Verifica la versión mínima requerida en la página del plugin antes de actualizar a Divi 5. En caso de incompatibilidad, puedes usar el shortcode de CF7 dentro de un módulo de código de Divi y agregar CSS personalizado manualmente.
¿Puedo guardar las respuestas del formulario en la base de datos?
CF7 por defecto no guarda las respuestas — solo las envía por email. Para guardarlas, instala el plugin complementario Flamingo (del mismo autor de CF7, totalmente gratuito). Flamingo registra cada envío en una sección del panel de administración.
Cómo integrar CF7 con herramientas de email marketing
Una de las razones por las que muchos diseñadores web prefieren CF7 sobre el formulario nativo de Divi es su ecosistema de integraciones. Con unos pocos plugins gratuitos o de pago puedes conectar cada envío del formulario con tu plataforma de email marketing:
- MailerLite: el plugin oficial de MailerLite para WordPress detecta los formularios de CF7 y te permite mapear campos del formulario a grupos y campos de MailerLite automáticamente.
- Mailchimp: el plugin MC4WP (Mailchimp for WordPress) soporta CF7 nativamente y es una de las integraciones más robustas disponibles.
- ActiveCampaign: el plugin oficial de ActiveCampaign se integra con CF7 para añadir contactos, asignar etiquetas y activar automatizaciones con cada envío del formulario.
- Cualquier herramienta via Zapier: si no hay integración directa, un webhook de CF7 puede enviar los datos a Zapier y desde ahí a cualquiera de las miles de aplicaciones disponibles.
Para activar estas integraciones, revisa que el campo de email en tu formulario de CF7 tenga el nombre correcto que espera el plugin de integración — generalmente your-email o el nombre que configures en el campo.
Conclusión
CF7 sigue siendo la opción más flexible para formularios de contacto en WordPress cuando necesitas integraciones con herramientas externas. El plugin Divi Contact Form 7 resuelve el problema de la personalización visual de forma elegante y accesible. Combina ambos con WP Mail SMTP para garantizar la entrega de emails y tendrás un sistema de formularios completo y profesional en tu sitio con Divi.
¿Quieres seguir mejorando tu sitio WordPress con Divi? Accede a nuestros cursos de Divi o explora el plan de membresía UXDivi para tener acceso a todo el contenido.
Comentarios
4 comentariosPara dejar un comentario, accede a tu cuenta de UXDivi.
Acceder a mi cuenta →Hola Jefferson una vez que tu le das estilo al formulario solo va a funcionar en la página donde le diste los estilos o como CF7 trabaja con shortcode, si utilizas ese shortcode en otra página sigue teniendo los estilos?
Saludos y gracias por este tutorial
Hola Miriam, un gusto saludarte.
Esto dependerá de donde coloques el código CSS para los estilos, si los colocas en las opciones generales de Divi, entonces no importará en que parte del sitio coloques el shortcode con el formulario, tomará todos los estilos siempre.
Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐
Hola Mr Jeff.
¿Cómo puedo colocar el «Acepto política de privacidad», al final del formulario, y enviar solo si la acepta el usuario?
Gracias Mil
Que tal Wilmer, deberías poder crear una casilla condicional. Con ello podrás activar lo que necesitas.