Resumen de IA
¿Estaría interesado en crear un formulario de calificación condicional utilizando menús desplegables? Con el complemento Encuestas y Sondeos, ya está equipado para generar un formulario que recopile opiniones de los visitantes y les permita votar sobre diversos aspectos.
Sin embargo, para fines de nuestra documentación, nuestro objetivo es diseñar un formulario que permita a los usuarios priorizar características basándose en valores numéricos. Dado el sistema numérico para la priorización, es esencial evitar números de prioridad duplicados para diferentes características elegidas por nuestros visitantes.
En este tutorial, construiremos nuestro formulario de calificación utilizando un breve fragmento de código que elimina un número de prioridad si ya ha sido seleccionado. Esto asegura que podamos obtener decisiones perspicaces de las prioridades que expresan nuestros clientes.
Creación del formulario
Comencemos estableciendo un nuevo formulario e integrando los campos necesarios. Nuestro formulario constará de un campo Nombre, un campo Email opcional y cinco campos Desplegable, cada uno presentando características para calificar.
Para obtener ayuda en la configuración de su formulario, no dude en consultar esta útil guía sobre cómo crear su formulario inicial.
Configuración de las opciones del campo Desplegable
Ahora, para nuestros campos Desplegable, tendremos que revisar cada uno y agregar nuestro sistema de calificación. Para el propósito de esta documentación, nuestras calificaciones se basan numéricamente en 1-10, lo que significa que 1 es la opción menos favorita y 10 es la más alta.
Por supuesto, puede usar el sistema que mejor funcione para usted, ya sea numérico o de texto.
Selección del estilo Desplegable
Desde la pestaña Avanzado del campo Desplegable, recuerde seleccionar el estilo Clásico para sus campos. Esto es muy importante ya que el fragmento funcionará solo con este estilo.
Creación de la lógica de calificación condicional
Es hora de agregar el fragmento a su sitio. Si necesita ayuda sobre dónde y cómo agregar fragmentos a su sitio, consulte este tutorial.
/**
* WPForms Conditional Rating Form
*
* @link https://wpforms.com/developers/how-to-create-a-conditional-rating-form/
*/
function wpf_dev_conditional_dropdown_options( ) {
?>
<script type="text/javascript">
// only run on dropdown fields inside the form ID 2552
jQuery( 'form#wpforms-form-2552 select' ).on( 'change', function() {
jQuery( 'option' ).prop( 'disabled', false);
jQuery( 'select' ).each(function() {
var val = this.value;
jQuery( 'select' ).not(this).find( 'option' ).filter(function() {
return this.value === val;
}).prop( 'disabled', true);
});
}).change();
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_conditional_dropdown_options', 30 );
Este fragmento de código escaneará los campos Desplegable dentro del formulario identificado con el ID 2552. Una vez que se elija una opción de uno de los campos, esa opción en particular se volverá no disponible para su selección en los campos restantes.
Asegúrese de actualizar el ID del campo 2552 para que coincida con el ID de su formulario. Si necesita ayuda para localizar su ID, consulte este tutorial sobre cómo encontrar estos IDs específicos.
Ahora, a medida que se seleccionan las opciones, observará que se deshabilitan en los otros campos.
¡Y eso es todo! Ha creado con éxito un formulario de calificación condicional utilizando los campos Desplegable de WPForms. ¿Le gustaría ocultar condicionalmente su botón de envío basándose en las respuestas proporcionadas en su formulario? Consulte nuestro tutorial sobre Cómo mostrar condicionalmente el botón de envío.
Acción de referencia
Preguntas frecuentes
P: ¿Cómo puedo restablecer las opciones?
R: Si un usuario cambia de opinión sobre alguna opción, simplemente volverá atrás y hará nuevas selecciones, lo que restablecerá esos valores preseleccionados.
P: ¿Se puede usar la Lógica Condicional para mostrar y ocultar el desplegable?
R: ¡Absolutamente! Puedes usar la Lógica Condicional de WPForms para ocultar todos y cada uno de los desplegables hasta que se haya realizado una selección. Deberás asegurarte de que, al agregar esta lógica, verificar y probar la lógica necesaria para aplicarla, por ejemplo: La Característica 2 está oculta mientras la Característica 1 no sea –Selecciona una—.
