Excluir saltos de página al utilizar lógica condicional

¿Desea omitir los saltos de página en su formulario cuando no se cumple la lógica condicional? Cuando se utiliza lógica condicional con saltos de página, se muestra la página siguiente aunque no se cumplan las condiciones, dejando a los usuarios con una página vacía. Con un simple fragmento de JavaScript, puede omitir fácilmente esas páginas innecesarias.

En este tutorial, le mostraremos cómo saltar páginas vacías con un simple fragmento de JavaScript.


Creación del formulario

En primer lugar, tendrá que crear un nuevo formulario o editar uno existente para acceder al constructor de formularios. Hemos creado un formulario de presupuesto que tiene varios saltos de página.

En la primera página, recopilamos información básica sobre los usuarios. También hemos añadido un campo de opción múltiple para preguntarles si desean programar un presupuesto gratuito en persona en ese momento.

Si seleccionan , mostraremos la segunda página y les pediremos algunos datos personales. Sin embargo, si seleccionan No, queremos saltarnos la segunda página por completo y pasar directamente a la página final del formulario.

Asegúrese de revisar nuestro tutorial para aprender más sobre la creación de formularios multipágina en WPForms.

Creación del formulario

Configuración de la lógica condicional

En nuestro ejemplo, sólo queremos mostrar los campos Fecha / Hora y Dirección en la segunda página si han seleccionado en la primera página que están interesados en recibir un presupuesto gratuito en persona. Esto ahorrará tiempo a nuestros visitantes si no están interesados, por lo que podemos omitir esta página por completo si no desean visitarla.

Los dos campos de la segunda página tendrán la misma lógica. Para configurar la lógica, seleccione cada campo y haga clic en Lógica inteligente. A continuación, active la opción Activar lógica condicional.

Haga clic en la pestaña Smart Logic

En el menú desplegable, seleccione la pregunta en la que basó sus campos. Para este tutorial, nuestra pregunta era un campo de opción múltiple que pregunta ¿Desea concertar una cita gratuita en persona?

Configuración de la regla lógica condicional

Nuestra condición es que si la respuesta al campo Opción múltiple es Sí, muestre el campo. Si es No, ocultar el campo.

Para saber más sobre la lógica condicional de WPForms, consulte esta documentación.

Cada campo de la segunda página tendrá la misma lógica, por lo que deberá repetir este paso para cada campo. Como alternativa, puede utilizar el campo Presentación para agrupar campos similares y, a continuación, activar la lógica condicional para el campo Presentación.

Añadir el fragmento

Ahora, necesitarás añadir el snippet de abajo a tu sitio. Si necesitas ayuda sobre cómo y dónde añadir fragmentos a tu sitio, consulta este tutorial.

Este fragmento de código recorrerá cada página del formulario para determinar si alguna está vacía. Si hay una página vacía, el script saltará esa página completamente y pasará a la siguiente. Esto mejorará la experiencia general de su formulario.

Preguntas frecuentes

A continuación, respondemos a algunas de las preguntas más frecuentes sobre el uso de la lógica condicional en formularios multipágina.

P: ¿Funcionará este fragmento en una ventana modal como una ventana emergente de Elementor?

R: De momento, no.

Ya está. Ahora ha aprendido cómo saltar páginas si están ocultas en su formulario debido a la lógica condicional.

¿Le gustaría mostrar u ocultar condicionalmente el botón Enviar en un formulario basándose en uno de sus campos de formulario? Echa un vistazo a nuestro tutorial sobre Cómo mostrar condicionalmente el botón Enviar.

Acción de referencia

wpforms_wp_footer_end