Necesita un formulario de contacto que se adapte a las elecciones del usuario: soporte técnico muestra un conjunto de campos, ventas muestra un conjunto completamente distinto. El Contact Form 7 estándar no puede hacer esto. Sin lógica condicional, la página muestra una pared con todos los campos a la vez, la mitad de los cuales el visitante no necesita. Se ve desordenado y genera confusión.

El plugin Conditional Fields** para Contact Form 7** resuelve este problema: los campos aparecen y desaparecen según lo que el usuario seleccione. A continuación encontrará una guía paso a paso para construir un formulario de soporte real, desde la instalación del plugin hasta las respuestas de correo personalizadas. El mismo enfoque se aplica a calculadoras, encuestas y solicitudes de varios pasos.

💡 Resumen rápido:

• Instale CF7 y Conditional Fields, cree un formulario básico con un tipo de solicitud
• Agrupe los campos en [group]…[/group], configure las condiciones de visualización mediante la pestaña «Conditional fields»
• Construya el formulario final con grupos anidados, etiquetas dinámicas y una rama personalizada «Otro»
• Configure el correo personalizado: texto diferente y conjuntos de campos diferentes para soporte técnico y ventas

Qué aportan los campos condicionales

Contact Form 7 es el constructor de formularios más popular para WordPress: más de 10 millones de instalaciones activas, sobrecarga mínima. Pero de fábrica es estático: todos los campos están visibles todo el tiempo. Si el formulario tiene tres ramas lógicas (soporte técnico, ventas, alianzas), el visitante ve nueve campos adicionales que no tienen nada que ver con su solicitud.

Conditional Fields for Contact Form 7 añade lógica «si-entonces» directamente al editor de formularios. El plugin es gratuito, tiene una calificación de 4.8 en WordPress.org y más de 100 000 instalaciones activas. El autor, Jules Colle, también desarrolla la versión Pro con campos repetibles, formularios de varios pasos y valores calculados.

Importante: el plugin no elimina los campos ocultos del marcado; solo los oculta mediante JavaScript. Por lo tanto, todos los campos dentro de grupos ocultos se siguen enviando al servidor. Los nombres de los campos deben ser únicos incluso entre grupos diferentes, de lo contrario los valores se sobrescribirán. Esta es la regla número uno y, en la práctica, es el escollo más común.

Instalación y formulario inicial

Instale ambos plugins a través de Plugins → Añadir nuevo:

• Contact Form 7, el constructor de formularios en sí
• Conditional Fields for Contact Form 7, el motor de lógica condicional

Tras la activación, vaya a Contacto → Añadir nuevo y pegue la plantilla del formulario. Sin grupos condicionales todavía, solo todos los campos a la vez:

1
Your name: [text your-name]
2
Your email address: [email your-email]
3
 
4
What kind of support do you want?
5
[select support-type first_as_label "-- Choose support type --" "Technical support" "Sales"]
6
 
7
Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows"]
8
 
9
In case you selected Technical support:
10
Please specify your OS version: [text version]
11
 
12
In case you selected Sales:
13
Where is your business located? [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
14
 
15
[textarea comments]
16
 
17
[submit "Send"]

Así se ve el formulario sin lógica: la selección de sistema operativo y los campos de soporte técnico siempre están visibles, incluso si el visitante seleccionó «Ventas». No hay ninguna opción «Otro SO», y la etiqueta del campo de versión no cambia según el sistema seleccionado. Resolvemos esto con grupos.

Creación de grupos de campos

Un grupo es un par de etiquetas [group group-name] ... [/group]. Todo lo que está entre ellas está oculto por defecto y solo aparece cuando se activa una condición. Los grupos pueden anidarse unos dentro de otros, lo cual resulta útil para lógica en cascada.

En el editor de formularios, haga clic en el botón Conditional group sobre el área de texto; añade las etiquetas automáticamente.

En la ventana que aparece, establezca el nombre del grupo y las opciones:

• Clear on hide vacía todos los campos dentro del grupo cuando este se oculta. Útil para que los valores de campos invisibles no se envíen en el correo.
• Inline muestra el grupo como un elemento en línea. Práctico cuando necesita incrustar un fragmento de texto directamente dentro de una oración (lo mostraré más adelante).

Cree el primer grupo technical-support-selected y mueva los campos de sistema operativo y versión dentro de él:

1
[group technical-support-selected]
2
  Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows"]
3
  [group os-selected]
4
    Please specify your OS version: [text version]
5
  [/group]
6
[/group]

Aquí ya hay dos grupos, uno dentro del otro. El externo (technical-support-selected) representa el hecho de que se seleccionó soporte técnico. El interno (os-selected) es la aclaración de la versión del SO, que aparecerá SOLO cuando el usuario seleccione un sistema operativo específico. Sin una condición, ambos grupos permanecen invisibles por ahora.

Lo mismo para el departamento de ventas:

1
[group sales-support-selected]
2
  Where is your business located?
3
  [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
4
[/group]

Guarde el formulario y los grupos desaparecerán del frontend. Esto es normal: aún no hay condiciones.

Configurar la lógica condicional

Después de guardar el formulario, vaya a la pestaña Conditional fields. Hay dos modos: visual (listas desplegables) y texto (usted escribe las reglas manualmente). El modo texto es más rápido para formularios complejos, así que usaremos ese.

Haga clic en Add new conditional rule e ingrese la primera regla:

1
show [technical-support-selected] if [support-type] equals "Technical support"

La sintaxis es sencilla: show <group> if <field> equals "<value>". Después de guardar la regla, el grupo technical-support-selected se volverá visible tan pronto como el usuario seleccione «Technical support» en la lista desplegable.

Agregue la regla para ventas:

1
show [sales-support-selected] if [support-type] equals "Sales"

Ahora el formulario alterna entre dos ramas, pero dentro de soporte técnico el campo de versión sigue mostrándose todo el tiempo. Necesitamos que aparezca solo después de seleccionar un sistema operativo específico:

1
show [os-selected] if [operating-system] not equals ""

La comprobación not equals "" funciona porque usamos first_as_label; el valor -- Choose your operating system -- no se considera seleccionado. El campo operating-system está vacío hasta que el visitante haga clic en una opción.

Continuando: deberíamos añadir una opción «Other» a la lista desplegable de SO. Si el usuario selecciona «Other», no sabemos qué SO tiene, así que le damos dos campos de texto: el nombre del sistema y la versión. Necesitamos un nuevo grupo os-other-selected y una regla con el operador AND:

1
show [os-selected] if [operating-system] not equals ""
2
               and if [operating-system] not equals "Other"
3
show [os-other-selected] if [operating-system] equals "Other"

Dos reglas para un grupo: la primera muestra os-selected para cualquier SO excepto «Other», la segunda muestra os-other-selected solo para «Other». La lógica es mutuamente excluyente, así que no habrá conflictos.

Formulario final: etiquetas dinámicas y la rama «Other»

Ahora vamos a unirlo todo. Añadiremos grupos en línea que cambian la etiqueta del campo de versión según el SO seleccionado (Android, iOS, Linux o Windows). El texto de la etiqueta está «incrustado» directamente en el grupo y aparece solo cuando la condición se cumple:

1
Your name: [text your-name]
2
Your email address: [email your-email]
3
 
4
What kind of support do you want?
5
[select support-type first_as_label "-- Choose support type --" "Technical support" "Sales"]
6
 
7
[group technical-support-selected]
8
  Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows" "Other"]
9
 
10
  [group os-selected]
11
    Please specify your [group os-android inline]Android[/group][group os-ios inline]iOS[/group][group os-linux inline]Linux[/group][group os-windows inline]Windows[/group] version:
12
    [text version]
13
  [/group]
14
 
15
  [group os-other-selected]
16
    Please specify your OS and version.
17
    [text other-os "Operating System"][text other-version "Version"]
18
  [/group]
19
[/group]
20
 
21
[group sales-support-selected]
22
  Where is your business located?
23
  [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
24
[/group]
25
 
26
[textarea comments]
27
 
28
[submit "Send"]

El punto clave: grupos en línea con nombres de SO ([group os-android inline]Android[/group]). El atributo inline convierte el grupo en un elemento en línea, de modo que el texto de la etiqueta no se divide en párrafos. Las condiciones para estos grupos en la pestaña Conditional fields:

1
show [technical-support-selected] if [support-type] equals "Technical support"
2
show [sales-support-selected] if [support-type] equals "Sales"
3
show [os-selected] if [operating-system] not equals ""
4
               and if [operating-system] not equals "Other"
5
show [os-android] if [operating-system] equals "Android"
6
show [os-ios] if [operating-system] equals "iOS"
7
show [os-linux] if [operating-system] equals "Linux"
8
show [os-windows] if [operating-system] equals "Windows"
9
show [os-other-selected] if [operating-system] equals "Other"

Haga clic en Save conditions, luego guarde el formulario. Copie el shortcode [contact-form-7 id="..." title="..."] en una página y pruébelo en el frontend. El cambio entre ramas debería funcionar al instante, sin recargar la página.

Personalizar la respuesta por correo electrónico

Los grupos condicionales funcionan no solo en el formulario, sino también en la plantilla del correo electrónico. Esto significa que el usuario puede recibir un correo diferente según lo que haya seleccionado.

Abra la pestaña Mail en el editor del formulario. En el campo Message body, envuelva el texto en los mismos grupos que usó en el formulario:

1
[technical-support-selected]
2
Thank you for submitting your technical support question
3
[/technical-support-selected][sales-support-selected]
4
Thank you for your sales question
5
[/sales-support-selected]

La etiqueta de cierre [/technical-support-selected] y la de apertura [sales-support-selected] van justo una al lado de la otra, sin espacio; de lo contrario, aparecerá un salto de línea adicional en el correo.

Ahora añadamos una tabla con los campos completados. Dentro de cada grupo, enumeramos SOLO los campos relevantes:

1
<table>
2
<tr><td>your-name</td><td>[your-name]</td></tr>
3
<tr><td>your-email</td><td>[your-email]</td></tr>
4
<tr><td>support-type</td><td>[support-type]</td></tr>
5
[technical-support-selected]
6
  <tr><td>operating-system</td><td>[operating-system]</td></tr>
7
  [os-selected]
8
    <tr><td>version</td><td>[version]</td></tr>
9
  [/os-selected]
10
  [os-other-selected]
11
    <tr><td>other-os</td><td>[other-os]</td></tr>
12
    <tr><td>other-version</td><td>[other-version]</td></tr>
13
  [/os-other-selected]
14
[/technical-support-selected]
15
[sales-support-selected]
16
  <tr><td>continent</td><td>[continent]</td></tr>
17
[/sales-support-selected]
18
<tr><td>comments</td><td>[comments]</td></tr>
19
</table>

Cuando se envíe el formulario, el plugin eliminará del correo todo lo que pertenezca a grupos ocultos. Soporte técnico recibirá las filas con SO y versión; ventas recibirá solo el continente. Limpio y claro.

Si necesita construir correos manualmente y editar el marcado, el autor del plugin creó un convertidor web de código CF7 a cuerpo de correo. Pegue el código del formulario y obtendrá una plantilla de tabla para el correo.

⁉️🤔 Preguntas frecuentes

¿Por qué se ven todos los grupos? Las condiciones no funcionan.

Primero, revise la consola del navegador (F12) en busca de errores de JavaScript. Conditional Fields carga su script al final y cualquier error de JS previo rompe toda la lógica. Segundo, su tema debe llamar a wp_footer() en footer.php. Sin este hook, el script no se cargará. La causa más frecuente es un conflicto de plugins: desactive todo excepto CF7 y Conditional Fields y pruebe el formulario. Si funciona, active los plugins uno por uno hasta encontrar al culpable.

Los campos en el correo llegan con valores incorrectos o vacíos.

Los nombres de TODOS los campos del formulario deben ser únicos, incluso si los campos están en grupos diferentes y nunca son visibles al mismo tiempo. El plugin NO elimina los campos ocultos al enviar; solo los oculta visualmente. Dos campos llamados a en grupos distintos = dos valores para la misma clave, y uno de ellos prevalecerá. Asegúrese de que cada campo tenga su propio nombre.

¿Cómo creo un formulario con pasos y campos repetibles?

La versión gratuita no puede hacerlo; necesita Conditional Fields Pro. Esta añade formularios multipaso (dividir el formulario en pasos con botones «Siguiente»), bloques de campos repetibles (repeater) y campos calculados. El costo, en el sitio web del desarrollador, depende del número de sitios. Si su formulario es simple y no tiene repetidores, la versión gratuita es más que suficiente.

¿Qué debo hacer si el plugin entra en conflicto con mi tema?

Active un tema estándar de WordPress (Twenty Twenty-Five) y pruebe el formulario en él. Si funciona, el problema es de su tema. Normalmente, ayuda llamar manualmente a wp_footer() o mover el formulario a una página diferente sin scripts pesados del tema. Si el tema es a medida, pida al desarrollador que se asegure de que el hook wp_footer() se llame en todas las páginas con formularios.

¿Puedo usar campos condicionales para un calculador de precios?

Sí, y este es uno de los escenarios más comunes. Un conjunto de listas desplegables (tipo de servicio, volumen, urgencia) con grupos condicionales para cada opción. La versión Pro añade campos calculados completos; si necesita multiplicar y sumar valores directamente en el formulario, oriente su búsqueda en esa dirección.

Qué hacer a continuación: del prototipo al formulario de producción

Construimos un formulario de soporte con dos ramas lógicas, grupos anidados y un correo electrónico personalizado. El mismo enfoque funciona para cualquier escenario con condiciones: encuestas ramificadas, calculadores, registros con diferentes roles.

A qué prestar atención antes de ponerlo en producción:

• Verifique la unicidad de TODOS los nombres de campo; de nuevo, esta es la regla número uno.
• Pruebe el formulario en móviles: las listas de opciones largas y los grupos anidados pueden ralentizar dispositivos poco potentes.
• Configure la protección antispam; Contact Form 7 funciona bien con reCAPTCHA v3, Akismet y Turnstile.

Si la lógica de su formulario va más allá de «mostrar/ocultar» y necesita repetidores, cálculos o múltiples pasos, eche un vistazo a Conditional Fields Pro. Pero para la mayoría de las tareas, la versión gratuita es suficiente: es estable, se actualiza cada pocas semanas y funciona con Contact Form 7 versión 6.1.6 y WordPress 7.0.

Vea la demostración en video de todo el proceso, desde la instalación hasta el formulario terminado; reforzará cada paso con un ejemplo en vivo: