Reading time aprox: 5 minutes, 26 seconds
Formulario con Campos Condicionales en WordPress.
Este artículo ha surgido de una pregunta hecha por un lector, además de estar cocinandose desde hace tiempo (empecé a escribirlo hace meses, pero no encontraba el momento de terminarlo).
La verdad es que estoy casi reescribiéndolo para que salga actualizado.
Una pregunta sencilla: «Que un campo aparezca, dependiendo de la respuesta de otro campo».
Formulario con Campos Condicionales en WordPress.
Esto que parece una tontería, puede resultar muy útil en algunos casos y resulta, cuanto menos, sorprendente que no aparezca en cualquier plugin de formularios.
La verdad es que, como en casi todas las cosas, depende del punto de vista.
Si lo que se desea es que el formulario de contacto sea básico y cumpla su función de contacto, con los campos «normales» suele ser suficiente.
Los campos de un formulario de contacto típico, suelen ser los de la filiación básica (nombre(s) y apellido(s)), correo de contacto (para responder), asunto del mensaje y, el cuerpo del mensaje.
No hay variaciones, no hay condicionantes, es todo «tan simple». 😉
Sin embargo, puede haber casos en los que, elucubrando un poco, si el usuario introduce una dirección de correo que interesa destacar (@yandex.ch, por ejemplo) conviene que aparezca un campo nuevo para identificar si se trata de la China continental o China Insular.
O por ejemplo, que el campo del idioma deseado sea «Chino Mandarín o Ruso» para los de China continental y «Chino Cantonés o Inglés» en caso contrario.
Pero … ¡vamos por partes!
Un formulario básico
Un formulario básico no nos permite hacer ningún ejercicio de lógica, se limita a recoger información y almacenarla convenientemente.
Es el caso del plugin Contact Form 7, no es solamente el formulario de contacto más básico que podemos encontrar, sino que es uno de los más extendidos (quizá por su simplicidad y porque aún sorprende que WordPress no cuente con esta facilidad integrada en su núcleo).
Ya mencioné este plugin cuando hable del Formulario de Contacto».
Este plugin se limita a solicitar la información suministrada por el usuario (visitante) y almacenarla en la base de datos de WordPress.
Su comportamiento es tan básico que no permite interactuar con el contenido, más allá de preguntas elementales como el caso de los campos «cuestionario» que permiten hacer una pregunta y que avisará de un error si no se ha suministrado la respuesta correcta (Campo «quiz»), o seleccionar una entre varias respuestas posibles en un desplegable (Campo «select»).
Decisiones lógicas
Si queremos que el formulario tenga comportamientos distintos dependiendo de la entrada que suministre el usuario, debemos tomar decisiones lógicas. Esto también se conoce como condiciones y, por tanto, hablamos de «campos condicionales».
Para que es formulario tenga un comportamiento condicional, puedes ayudarte de otro plugin, que debe trabajar en colaboración con el plugin de formularios que tengas instalado.
En este caso, ya que el plugin de formulario es el Contact Form 7>, deberás instalar otro plugin que te permita tomar decisiones y ese plugin es: Contact Form 7 – Conditional Fields.
Este plugin permite agregar lógica condicional al formulario de Contact Form 7.
Para lograr esta magia, debes agrupar los bloques de actuación, que este plugin (como tiene un nombre tan largo, lo voy a abreviar a cf7cf) se encargará de hacer visible o no, en función de que cumpla a no las condiciones establecidas.
Con el ejemplo, lo entenderás mejor:
[group group-234] Por favor, especifica dónde tienes tu residencia: [select cualchina first_as_label "-- Selecciona dónde vives --" "China continental" "China insular"] [/group] [acceptance your-consent] He leído y acepto la política de privacidad. [/acceptance] Escribe en números el resultado de...
[quiz cap-cha "TREINTA + 27 =|57"] ¡Gracias por contactar con nosotros! [submit "Enviar"]
Este es un ejemplo un tanto absurdo, pero vale para su propósito, el de ilustrar el funcionamiento del plugin; quiero que te fijes en las líneas siete (7) a catorce (14).
Con las líneas siete y ocho, creamos un campo de texto requerido u obligatorio, que el usuario deberá contestar con la palabra «Si» o con la palabra «No»; está limitado a «2» caracteres.
Con las líneas diez (10) a catorce (14) es donde se realiza la magia, en la primera línea aparece la etiqueta «[group group-234]» que inicia el bloque condicional; esto es, el bloque que sólo aparecerá si se cumplen las condiciones.
Este bloque se cierra con la etiqueta «[/group]» en la línea 14, por lo tanto, todo lo que aparece delimitado por estas dos etiquetas será visible solo cuando el bloque esté activo, es decir, cuando se cumplan las condiciones.
Este bloque podemos crearlo simplemente introduciendo las etiquetas de principio y fin y otorgándole un nombre que quieras, como,
[group miPrimerGrupo] . . . [/group]
O si prefieres hacerlo de forma asistida, sitúa el cursor en la línea en la que quieres que empiece el bloque o grupo y haz clic sobre el botón «Conditional Fields Group»
Aparecerá una ventana modal preguntando por el nombre que queremos asignar al grupo (le asigna un valor por defecto (no dudes en cambiarlo para que sea algo más significativo para ti), junto a dos opciones:
- «Clear on hide» que si lo marcas significa que cuando se oculte el bloque porque la condición no se cumple, se borrará el contenido de los campos en el grupo.
- «Inline» que indica que todos los elementos del grupo se presentarán uno tras otro, en la misma línea.
Una vez identificados y creados los bloques, procede a indicar la lógica que regirá su visualización (del grupo o bloque entero).
Para eso debes cambiar a la pestaña llamada «Conditional fields» en la que identificarás que condiciones se han de cumplir para que un grupo en concreto, aparezca en el formulario.
En la imagen vemos los dos métodos posibles para indicar la lógica de verdad; en la parte superior el método asistido y en la inferior el método de texto.
Cualquiera de los dos métodos, lo que indican es: La regla se aplica el grupo que aparece después de «Show », en este caso, es el grupo «group-234» (expresado entre corchetes), a continuación la condición a cumplir («if») seguida del campo que debe cumplir la regla («vivoEnChina») también entre corchetes.
Luego viene la condición propiamente dicha («equals») y el valor a comparar («Si»).
Esto significa que, el grupo group-234» se hará visible si el campo vivoEnChina es igual a «Si», en cualquier otro caso, el grupo no será visible.
Indudablemente, es cuestión de imaginación; este caso es rudimentario y sin sentido, pero seguro que tu encuentras la forma de hacerlo servir a tus necesidades.
La forma nativa del plugin gratuito, está bastante corto en posibilidades, por lo que si ves que te interesa avanzar más, debes conseguir la versión Pro, que al momento de escribir esto está en 25€ por año.
Creando mi propia lógica
Si no te convence la lógica simple de este plugin que te he mostrado, siempre puedes hacer tu propia lógica, solo tienes que lanzarte y realizar tu programa en Javascript1; el plugin Contact Form 7 o el que sea que uses, hacen uso de las etiquetas HTML2 lo que hace que todos los campos y por consiguiente sus valores, formen parte de DOM3.
Lo más sensato si vas intentar manejar datos de usuarios, es que el usuario esté registrado y «logueado» en tu WordPress, no sólo por cuestión operativa sino también por cuestión legal.
Cuando un usuario está registrado, los campos de los formularios adquieren «una nueva dimensión» de forma que puedes, por ejemplo, rellenar ciertos campos con información obtenida previamente del usuario, como en el caso de:
| Opción | Descripción |
|---|---|
| default:user_login | Nombre de registro del usuario |
| default:user_email | Correo electrónico del usuario |
| default:user_url | URL de la web del usuario |
| default:user_first_name | Primer nombre del usuario |
| default:user_last_name | Apellido del usuario |
| default:user_nickname | Apodo del usuario |
| default:user_display_name | Nombre o apodo del usuario |
De forma que puedes poner en tu formulario, algo como:
Tu nombre: [text* your-name default:user_display_name] Tu correo: [email* your-email default:user_email]
Todo en uno
Si lo que buscas es un solo plugin que haga las funciones de los dos que he citado antes, estás de suerte, puedes usar el plugin Everest Forms que es de lo mejor que he probado.
Existen muchos plugi para formularios y caso todos funcionan de forma parecida, en la que puedes crear grupos que aparecen o no aparecen, dependiendo de la lógica aplicada.
Los precios suelen ser muy parecidos, aunque cambie la fórmula.
«Everest Forms» es quizá el más potente dentro de los de precio reducido (0€)
El plugin «Everest Forms» te proporciona una manera fácil de crear cualquier tipo de formulario, incluidos los formularios de contacto. Los campos de arrastrar y soltar hacen que ordenar y crear formularios sea tan fácil que incluso un principiante en WordPress puede crear hermosos formularios en cuestión de minutos.
El plugin es liviano, rápido, extensible y 100% responsivo.
Puedes obtener este plugin en el repositorio de WordPress: (https://es.wordpress.org/plugins/everest-forms/).
Conclusión
Se pueden hacer cosas simples sin hacer un gran desembolso, pero si quieres hacer algo realmente «profesional», te aconsejo que te des un paseo por los diferentes sitios de los plugin y mires cuál se ajusta a tu presupuesto.
En el momento en que realmente entiendas el funcionamiento de uno de ellos, cambiar a otro te resultará muy fácil, aunque has de tener en cuenta que no son exactamente iguales en comportamiento, por lo que es bueno dedicar un tiempo al análisis y tomar una decisión informada.
Recuerda, #QuédateEnCasa, juega, experimenta y, sobre todo, ¡divertirte!
¡Gracias por leernos!
¡Tus comentarios y preguntas nos ayudan a mejorar, por favor comenta!