Vamos a ver como crear un test de salud súper sencillo orientado para la detección  al nuevo corona virus.

Este test se basa en que el usuario tiene que seleccionar los síntomas comunes que presenta esta nueva enfermedad.

Empezamos!

¿Que necesitamos antes de empezar?

Primero tener instalado contact form 7 y dentro del mismo el addon Conditionals Fields.

La idea que test sea dinámico en base a la selección que haga el usuario.

Empezamos con el esqueleto del formulario:

Creamos un nuevo formulario.

contact-form-7-para-crear-un-test-de-salud

Una vez que creamos el formulario Visualizamos las pestañas y los elementos que nos interesan.

contact-form-7-para-crear-un-test-de-salud1

Modificamos el contenido de la pestaña de correo electrónico quedando de esta maneara.

contact-form-7-para-crear-un-test-de-salud2

Volvemos al formulario y ponemos titulo y algún texto que nos guste.

<div class=»test-salud» align=»center»>
<h3 id=»test-virtual» style=»text-align: center;»>Test Virtual Covid 19</h3><hr/>
<h3 style=»text-align: center;»>¿En los últimos 7 días usted ha tenido alguno de los siguientes síntomas?</h3><br/>
</div>

Bien ya que tenemos el titulo y el subtitulo, empezaremos por colocar un checkbox para que el usuario seleccione que síntomas esta presentando.contact-form-7-para-crear-un-test-de-salud3

Bien los campos que están marcados en rojo son los que nos interesan. 

 

La configuración del formulario se vería de esta manera.contact-form-7-para-crear-un-test-de-salud5

Ahora vamos a agregar algo de CSS para poder ver el formulario en bloque es decir una linea debajo de la otra ya que de esta manera si así la dejamos, quedaría algo así.

contact-form-7-para-crear-un-test-de-salud6

El código CSS que tenemos que agregar es este:

span.wpcf7-list-item { display: block; }

Lo podemos poner en nuestra hoja de estilos en alguna sección donde nos permita agregar código CSS personalizado y o también podemos crear nosotros mismo una etiqueta de estilos y ponerlo en un modulo de código, lo mejor que el codigo css este todo en un solo lugar, eso ayuda bastante al rendimiento. Este caso yo lo puse acácontact-form-7-para-crear-un-test-de-salud7:

Guardamos los cambios y tendríamos que ver algo como esto.

contact-form-7-para-crear-un-test-de-salud8

Bueno ahora volvemos al formulario y tenemos que empezar a usar los campos condicionales, ¿por que vamos a usar esta pestaña? bueno por que en base a la interacción del usuario se mostrará en el formulario una cosa u otra. Para que puedas entender mejor a que me refiero continua leyendo.

Vamos a seleccionar el elemento Conditional Fields Group y dentro de este elemento tendremos la opción de ponerle un nombre al grupo que queremos mostrar. Es decir que cuando el usuario selecciones alguna de las casillas anteriores se muestre lo que contenga el grupo ¿Esta bueno no?, bueno seguimos. Además también tenemos que seleccionar el atributo clear on hide. Esto lo que hace que cada vez que el contenido del grupo se esconda se borra los campos seleccionados.

contact-form-7-para-crear-un-test-de-salud9

 

 

Dentro del Grupo tenemos que colocar los elementos que queremos que se muestren cuando el usuario seleccione alguna de las opciones anteriores. También en este conjunto de checkbox a diferencia del anterior lo hacemos que sea exclusivo, es decir que solo se pueda seleccionar un solo elemento. (De esta forma aseguramos que solo necesita escoger un solo elemento de las casillas de verificación para obtener el resultado).También se le cambió el nombre a sintomas2 lo que en la imagen se muestra como checkbox-904.

contact-form-7-para-crear-un-test-de-salud10

Bien ahora tenemos que crear 2 grupos mas, 1 grupo que va a ser el que va a ser mostrado en caso que el usuario selecciones que no tiene ningún síntoma y otro grupo que se muestre en caso que el usuario selecciones algún síntoma del primer grupo. Todo esto suena como algo muy confuso pero al final te vas a dar cuenta como funciona y finalmente entenderás la configuración de cada grupo.

Seguimos…

La siguiente imagen muestra el grupo sin síntomas.

contact-form-7-para-crear-un-test-de-salud11

La siguiente imagen muestra el grupo positivo

contact-form-7-para-crear-un-test-de-salud12

Ahora que ya tenemos los grupos creados, muy importante guardar los cambios para el próximo paso. Solo resta darle la función que le corresponde a cada uno, y cual es la función, bueno que se muestren según la interacción del usuario. También aclaro que el contenido del grupo va depender de tipo de información quieran mostrar yo en este caso coloqué texto, botones titulos, etc. 

Vamos a eso…

Abrimos la pestaña de campos condicionales y seleccionamos los grupos que queremos ir mostrando en función de la interacción del usuario.

Presionamos el botón verde donde dice agregar nueva regla condicional.

contact-form-7-para-crear-un-test-de-salud13

Este paso es súper importante para asegurar el funcionamiento deseado. Despúes de presionar el botón verde, se abrirá las opciones de la regla condicional. Básicamente es seleccionar el grupo  que queremos mostrar si el usuario presiona determina casilla. Vamos a detallar bien este ejemplo.

contact-form-7-para-crear-un-test-de-salud14

Vamos a explicar a imagen anterior, en el mismo orden de lectura:

MOSTRAR – GRUPO X – SI EL CAMPO SELECCIONADO ES X – IGUAL – OPCIÓN DE LA CASILLA DE VERIFICACIÓN.

Es decir…

que se mostrará el grupo con síntomas, si el campo seleccionado sintomas1 es igual a ¿Fiebre? (temperatura mayor a 37.8°C). 

El texto o valor de cada casilla de verificación tiene que ser exacto no puede variar en nada ni comas, ni punto, ni espacios, recomiendo copiar y pegar. 

De esta manera vamos completando el resto de las reglas condicionales. Obteniendo como resultado algo similar a la siguiente imagen. 

contact-form-7-para-crear-un-test-de-salud15

Sigamos con el resto de los grupos.

contact-form-7-para-crear-un-test-de-salud16

La idea de este tutorial es mostrar de una manera muy básica el potencial que tienen estos dos complementos juntos, seguramente ustedes puedas lograr ejemplos mas complejos. 

    Test Virtual Covid 19


    ¿En los últimos 7 días usted ha tenido alguno de los siguientes síntomas?


    ¿También presenta?




    En hora buena

    No es sospechoso de Covid19

    Iniciar Test

    Nota*: Tenga en cuenta que esta es solo una prueba virtual en base a los síntomas conocidos y puede no ser precisa, si seleccionó algún síntoma de los anteriores recomendamos realizar la prueba rápida Covid19

    Ver Prueba Rápida Covid19 X Test




    Sospechoso de covid 19 positivo, se recomienda quedarse en casa y realizar la prueba.