Saltar al contenido
Curso Contact Form 7

Crear campos condicionales

Curso apoyado por

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.

Campos condicionales - Contact Form 7

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:

Ajustes campos condicionales - Contact Form 7

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»

Grupo condicional - Contact Form 7

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.

Campo condicional - Contact Form 7

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.

Condicional - Contact Form 7

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

Ejemplos campos condicionales - Contact Form 7

¿Tienes dudas?

Aquí tienes un par de opciones:

Comunidad Trinchera WP
Soporte oficial gratuito