Sacude tus formas de WordPress con las formas de gravedad Lógica condicional

Crear un formulario de contacto en WordPress puede ser una propuesta desalentadora. Pero una vez que te metes en él, el formulario suele estar bien, siempre y cuando sea un formulario simple.

Desafortunadamente, muchas formas resultan ser complicadas, desordenadas y aburridas. ¿No sería genial si pudieras crear una forma que fuera súper limpia, y que mostrara sólo lo necesario para cada usuario en particular? ¿Y qué tan genial sería si pudieras impresionar a tus visitantes con un efecto dinámico, ya que las diferentes partes de la forma aparecen, desaparecen y reaparecen al seleccionar varias opciones?

Con la lógica condicional de las formas de gravedad puedes hacer todo eso y más. La lógica condicional no es exactamente simple, pero las Formas de Gravedad lo hacen fácil.

Uno de los problemas es que una forma con muchas opciones variadas puede expandirse rápidamente, y la forma se vuelve desordenada, atestada y difícil de manejar. Las formas abarrotadas apagan a la gente, y a veces los visitantes del sitio se rinden y se van después de un rápido vistazo. Eso es exactamente lo que no quieres.

Aunque la frase “lógica condicional” apesta a “matemáticas avanzadas”, lo único que realmente significa (en este caso) es una forma de configurar un formulario interactivo de manera que cuando un usuario hace clic en algo de su formulario, alguna otra cosa cambia en el formulario. El usuario podría hacer clic en una casilla de verificación y, como por arte de magia, podría aparecer un campo del formulario previamente oculto . Y al mismo tiempo, algunos otros campos de formulario innecesarios podrían desaparecer .

Veamos cómo puede configurar fácilmente sus formularios con lógica condicional en su sitio web.

La lógica condicional es genial.

¿Magia? No. Es lógica condicional

Formulario listo para ser trabajado.

Asumiré que ya sabes cómo configurar una forma estática con formas de gravedad, así que ahora te mostraré exactamente cómo hacer que la lógica condicional funcione para ti.

Digamos que estás creando un formulario de solicitud en línea que la gente puede rellenar para unirse a tu Club de PC, algo muy similar al formulario de ejemplo en el que trabajaremos en los próximos párrafos.

En la parte superior del formulario, los solicitantes tienen que rellenar la información habitual, como el nombre, la dirección, la dirección de correo electrónico, etc. Es muy sencillo. Pero las cosas se complican en el área de pago cerca de la parte inferior del formulario, ya que se empiezan a crear campos de formulario con muchas casillas de verificación y opciones.

Leer
El New York Times desarrolla un plugin de colaboración de WordPress para los editores

Como pueden ver en el gráfico de la derecha, hay un encabezado, una casilla de verificación, un pop-up y una línea de texto explicativo para aquellos que quieren pagar ahora, y debajo de eso, hay una sección para aquellos que quieren pagar más tarde. Hay varias líneas de texto, casillas de verificación, ventanas emergentes, etc. en esta sección, y todos estos diversos pesos de tipos, ventanas emergentes, etc. parecen desordenados, y pueden ser confusos para el usuario.

Si piensa que esto no es un gran problema, considere que el solicitante ya ha rellenado varias casillas de texto antes de llegar a este punto del formulario, y en algunos formularios, puede haber incluso más áreas que se aproximan, con muchas opciones antes de terminar el formulario. No quieres que el usuario se fatigue, y quieres un formulario de aspecto limpio, así que sería genial si pudieras limpiar esta área.

Eso es lo que vamos a hacer.

Entrando en condición(al)

Primero, es una pena que no puedas esconder ese desordenado menú desplegable y el texto explicativo en el área de “PAGAR AHORA” hasta que realmente se necesiten. Pero espera. Tú puedes hacer eso – con la lógica condicional de las Formas de Gravedad. Aquí está cómo:

Mostrando la zona emergente a ocultar.

  1. En el “Editor de formularios”, mueva el ratón sobre el campo llamado “MEMBRESÍA DE CLUBES DE PC”, que contiene la ventana emergente de elección de miembros y el texto explicativo para aquellos que quieran pagar ahora. Este es el campo que quiere hacerse invisible y permanecer invisible hasta después de que el usuario marque la casilla bajo “PAGAR AHORA”.
  2. A medida que mueva el cursor sobre el campo, notará que el campo se resalta. Haz clic en el triángulo de simetría (resaltado en amarillo en el gráfico anterior) para expandir el campo de modo que puedas elegir las opciones que se aplicarán a ese campo.
  3. Salta la pestaña “Propiedades” y haz clic en la pestaña “Avanzado”. Dentro de la pestaña “Avanzado”.
  4. Cerca de la parte inferior del área de la pestaña, haga clic en la opción “Habilitar la lógica condicional” – y entonces aparecerán nuevas opciones donde podrá elegir exactamente lo que quiere que ocurra, como puede ver en el gráfico de arriba. Recuerda que quieres mantener este campo oculto, y sólo mostrarlo cuando un solicitante elige la opción “Pagaré ahora con tarjeta de crédito” en “PAGAR AHORA”. Las dos líneas directamente debajo de la casilla de verificación “Habilitar la lógica condicional” contienen ventanas emergentes que permiten elegir opciones para “rellenar los espacios en blanco” en estas dos líneas.
  5. En la primera línea, mantenga presionado el primer pop-up y elija “Mostrar” de las opciones que aparecen.
  6. Luego mantenga presionada la segunda ventana emergente y elija “Todo” de las opciones que aparecen. El resultado es una declaración condicional que dice: “Mostrar este campo si todos los siguientes coinciden”.
  7. En la segunda línea, elige opciones de los pop-ups hasta que obtengas una declaración condicional que diga, “Paga ahora es que pagaré ahora con tarjeta de crédito “. Traducido a un inglés más conversacional, esto le dice al formulario que inicialmente no muestre esta área del formulario, pero luego la muestra cuando el usuario hace clic en la casilla de verificación “Pagaré ahora con tarjeta de crédito” bajo “PAGAR AHORA ” .
  8. Cuando termines, haz clic en el triángulo giratorio para cerrar el campo.
  9. Por supuesto, en algún momento tendrás que hacer clic en el botón “Actualizar el formulario” y luego en el botón “Vista previa” para ver la vista previa del formulario para ver una aproximación de cómo se verá el formulario una vez que lo instales en una página o un post.
Leer
WordPress - Integración con Facebook: Qué hay de nuevo en 2012

Nuestra forma después de la primera ronda de lógica condicional.

CONSEJO ESPECIAL PARA EL USUARIO : Si quieres ver cómo se va a ver realmente tu formulario mientras haces ajustes – para obtener una mejor vista que la vista previa – instala el formulario en una página o un post, y luego ábrelo en una ventana separada del navegador. Mantén esa ventana abierta al lado, y luego cada vez que actualices el formulario, simplemente actualiza la página en esa ventana abierta, y verás los cambios que hiciste como se verán realmente en tu proyecto terminado.

He usado una línea amarilla en el gráfico de arriba para mostrarte que la forma es un poco más limpia, porque ahora cuando la forma aparece por primera vez en la página, el pop-up y la línea explicativa ya no son visibles en el área de “PAGAR AHORA”. Y esos dos elementos sólo serán visibles si el usuario marca la casilla en el área de “PAGAR AHORA”.

Bonito pero…

…puedes hacerlo mejor.

La forma sigue siendo muy concurrida, y todavía existe la posibilidad de confusión para el usuario porque todas las opciones y el texto explicativo siguen siendo visibles en la zona de “PAGAR DESPUÉS CON CHEQUE”.

Es una distracción, pero no será un problema por mucho tiempo.

Ajustes de lógica condicional.

Quieres que todo lo que hay entre el área de “PAGAR AHORA” y el botón de “ENVIAR” desaparezca cuando un usuario elige pagar con tarjeta de crédito en el área de “PAGAR AHORA CON CHEQUE”. Aquí está cómo hacer que eso suceda:

  1. En el “Editor de formularios”, mueva el cursor sobre el campo de formulario “PAGAR DESPUÉS CON CHEQUE”, haga clic en el triángulo volteador para ampliar el campo.
  2. Entra en la pestaña “Avanzado”.
  3. Como antes, compruebe para activar la lógica condicional.
  4. Establezca las opciones condicionales como se muestra en el gráfico de arriba. Asegúrate de elegir Ocultar esta vez, porque quieres ocultar este campo hasta que sea necesario.
  5. Cierra el campo de formulario cuando termines.
  6. Actualice el formulario y vea la vista previa o la página real (como se describe arriba) para comprobar su trabajo.
Leer
Cómo ocultar un post de WordPress de la primera página

Ahora ha configurado la lógica condicional para que esta área de la forma sea visible hasta que el usuario marque la casilla en el área “PAGAR AHORA” – en cuyo momento esta área desaparecerá.

Hazlo un poco más

El área de forma final.

Ahora haz lo mismo con los otros campos de forma que quieres ocultar: Abra los campos, elija la opción de lógica condicional, establezca las opciones condicionales, cierre, actualice y vea para comprobar su trabajo.

Como pueden ver arriba, el usuario ha pulsado la opción “PAGAR AHORA”, y la lógica condicional ha hecho lo suyo. No sólo ha puesto a la vista la opción de elección del miembro, sino que ha causado que todo el ya superfluo “PAGAR DESPUÉS CON CHEQUE” desaparezca. Todas las distracciones innecesarias han desaparecido.

¿Pero qué pasa si el usuario decide de repente no pagar ahora, y quiere pagar más tarde, con un cheque? No hay problema. Tan pronto como el usuario deselecciona la opción de tarjeta de crédito, toda la información de “PAGAR DESPUÉS CON CHEQUE” reaparece.

Véalo usted mismo

Reproduzca el siguiente video para que vea la magia por usted mismo. Las áreas de la forma desaparecerán y reaparecerán dependiendo de lo que el usuario haga clic.

Sólo hemos arañado la superficie de la lógica condicional, pero ahora que entiendes cómo funciona, es seguro que se te ocurrirán muchas más formas de usarla.

Gravity Forms es un plugin premium, lo que significa que tienes que comprarlo. Está disponible bajo tres licencias diferentes, dependiendo de con cuántos sitios quieras usarlo. Gravity Forms ofrece un gran soporte para su producto, tienen muchos complementos para ampliar el plugin básico, y su documentación está muy por encima de la media. Visita su sitio para saber más.

A menudo usamos demasiado “¡Genial!” cuando describimos cosas que creemos que son, bueno, geniales. Pero, en realidad, cuando lo pruebas por ti mismo, y ves cómo la lógica condicional de las formas de gravedad puede transformar tus propias formas, no exagerarás ni un poco si exclamas, “¡¿Como de guay es eso?!”

¿Utiliza la lógica condicional en los formularios de su sitio web? Háganoslo saber en los comentarios de abajo.

1,6 millones de superhéroes de WordPress leen y confían en nuestro blog. Únete a ellos y recibe entradas diarias en tu bandeja de entrada – ¡gratis!

Deja una respuesta