Hay veces que necesitamos crear formularios con muchos campos, pero que no todos los campos se tengan que mostrar a la vez. En algunas situaciones necesitamos que los campos aparezcan/desaparezcan dependiendo de las respuestas del usuario.

Gracias al plugin Contact Form 7 – Conditional Fields, podremos crear este tipo de campos condicionales.

Configuración

Una vez hemos instalado y activado el plugin, nos aparecerá un enlace en el menú: Contacto » Conditional Fields

En esta página encontramos lo siguiente:

Entre estos ajustes tenemos:

• Default Animation Settings: podemos configurar si queremos que haya una animación y su duración.
• Conditional Fields PRO: este plugin es gratuito, pero cuenta con una versión PRO con opciones más avanzadas.
• Advanced Settings: nos permite definir si queremos ver los campos condicionales con los estilos del plugin o en modo texto (recomendable si tenemos muchos campos condicionales)

Crear campos condicionales

A la hora de crear/editar uno de nuestros formularios, ahora nos aparecerá un grupo de campos llamado «Conditional Fields Group»

Este campo nos crea una especie de «grupo» donde podremos añadir los textos y campos que querramos. Funcionará como una especie de «contenedor».

Para este ejemplo, haremos lo siguiente:

• Crearemos un campo para preguntar si contacta como empresa
• Crearemos un campo y le añadiremos un par de campos pidiendo el nombre de la empresa y el teléfono

<label> ¿Eres empresa?
    [checkbox empresa use_label_element "Sí"]</label>
    
[group grupo-empresa]
    <label> Nombre de la empresa
        [text empresa-nombre]</label>
    <label> Teléfono
        [text empresa-telefono]</label>
[/group]

Los campos que están dentro del grupo «grupo-empresa» no estarán visibles en nuestra web.

Crear la condición

Una vez tenemos «el gatillo» y los «campos ocultos», tenemos que crear la funcionalidad que hará que estos campos aparezcan cuando el checkbox sea marcado.

Una vez lo hemos configurado, tendremos el campo condicional funcionando: