¡Atención!

Este artículo contiene código PHP y JavaScript y está destinado a desarrolladores. Ofrecemos este código como cortesía, pero no proporcionamos soporte para personalizaciones de código o desarrollo de terceros.

Para obtener ayuda adicional, consulta el tutorial de WPBeginner sobre cómo añadir código personalizado.

Descartar

Cómo mostrar condicionalmente el botón de envío

Actualizado:
Ver Markdown

¿Desea mostrar u ocultar automáticamente el botón de envío en función de las respuestas a los campos del formulario? Con un sencillo fragmento de código, puede controlar la visibilidad del botón de envío de su formulario utilizando lógica condicional.

Esta guía muestra cómo añadir un fragmento de código y configurar la lógica condicional para controlar la visibilidad del botón de envío.

Configuración del formulario

Para empezar, abra el creador de formularios creando un formulario nuevo o editando uno existente.

Para este ejemplo, crearemos un formulario de donaciones con un campo de opción múltiple que muestre las opciones Sí/No. Todos los demás campos adicionales del formulario se revelarán solo si se selecciona Sí utilizando lógica condicional.

El botón de envío aparecerá solo cuando se seleccione Sí, y los usuarios serán redirigidos a una página de agradecimiento si se selecciona No.

Nota: Anote el ID de su formulario, ya que lo necesitará al añadir el fragmento de código. Si necesita ayuda para encontrar estos IDs, consulte nuestra guía sobre cómo encontrar IDs de formularios y campos.

Crea el formulario y añade tus campos

Configuración de la lógica condicional

Antes de añadir el código para el botón de envío, necesitamos configurar la lógica condicional para los demás campos de su formulario. Estos campos deben permanecer ocultos hasta que el usuario seleccione "Sí" en el campo de opción múltiple.

Para lograr esto, abra la configuración de cada campo y configure la lógica condicional para mostrar el campo cuando su campo de opción múltiple sea igual a Sí. Esto asegura que estos campos permanezcan ocultos por defecto y solo aparezcan cuando sea necesario.

Nota: Si necesita ayuda para entender cómo funciona la lógica condicional en WPForms, consulte nuestra guía detallada sobre lógica condicional.

Creación de la página de agradecimiento

Dado que nuestro formulario ofrece a los usuarios una opción de Sí/No, queremos proporcionar una buena experiencia incluso cuando se selecciona "No". En lugar de simplemente ocultar el botón de envío, redirigiremos a los usuarios a una página de agradecimiento dedicada.

Para ello, cree una nueva página en WordPress y nómbrela Gracias (o cualquier otro nombre que prefiera). Aquí es donde los usuarios que seleccionen "No" serán redirigidos automáticamente.

Anote la ruta de la URL de la página, ya que la necesitará para la redirección en nuestro fragmento de código.

Añadir el fragmento de código

El siguiente fragmento de código controlará la visibilidad de su botón de envío en función de las respuestas del formulario:

Este fragmento utiliza primero CSS para ocultar el botón de envío cuando la página se carga inicialmente. Luego, configura un detector de eventos de JavaScript que observa los cambios en las opciones del campo de opción múltiple de su formulario.

Cuando un usuario selecciona "Sí", el script añade una clase CSS que hace visible el botón de envío. Si seleccionan "No", el script los redirige automáticamente a su página de agradecimiento.

Nota: Si necesita ayuda para añadir fragmentos de código a su sitio, consulte nuestro tutorial sobre cómo añadir fragmentos de código de forma segura.

Personalización del código

Necesitará personalizar varios valores clave en el fragmento de código para su formulario específico:

  • En la línea 12 y línea 16, localiza el selector CSS #wpforms-form-1000 y reemplaza 1000 con el ID de tu formulario.
  • En la línea 30, en el selector de jQuery form#wpforms-form-1000, reemplaza 1000 con el ID de tu formulario una vez más.
  • En la línea 33, encontrarás la ruta de la URL de redirección /thank-you. Actualiza esto para que coincida con la ruta de URL real de tu página de agradecimiento.
    • Por ejemplo, si nombraste tu página "Gracias", la cambiarías a /gracias.

Probando tu implementación

Una vez que hayas agregado y personalizado el fragmento de código, es esencial probar la funcionalidad a fondo:

  • Comienza cargando tu formulario y verifica que el botón Enviar esté oculto por defecto.
  • A continuación, selecciona No en tu formulario y confirma que eres redirigido inmediatamente a tu página de agradecimiento.
  • Luego, prueba la ruta "Sí": selecciona Sí y verifica que no solo aparezca el botón Enviar, sino que también todos tus campos ocultos condicionalmente se vuelvan visibles.
  • Finalmente, completa y envía el formulario con Sí seleccionado para asegurarte de que todo el proceso funcione como se espera.

Preguntas frecuentes

¿Se puede usar esto para un campo de Texto de una sola línea?

¡Absolutamente! Aquí tienes un fragmento de código que funciona con un campo de Texto de una sola línea.

/**
 * Conditionally show the submit button
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 */
 
add_action( 'wp_head', function () { ?>
    
    <style>
  
    /* CSS hide submit button on page load */
    #wpforms-form-1000.wpforms-submit  {
        visibility: hidden;
    }
   
    #wpforms-form-1000.wpforms-submit-container .wpforms-submit.show-submit {
        visibility: visible;
    }
    
    </style>
    
<?php } );
    
    
// Conditional logic for Submit button
function wpf_dev_form_redirect_text_area() {
    ?>
    <script>
        jQuery(function($){
            // Form ID 1000 and Field ID 15
            $( "#wpforms-1000-field_15" ).change(function(){
 
                var inputvalue = $( "div#wpforms-1000-field_15-container input[type='text']" ).val();
                var specificText ="Some Text Here"
                if(inputvalue == specificText){
                    $( ".wpforms-submit" ).addClass( "show-submit" );
                }
            });
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect_text_area', 10 );

¿Puedo usar este fragmento para el campo desplegable?

Sí, puedes usar esto con campos desplegables utilizando el siguiente fragmento de código:

/**
 * Conditionally show the submit button
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 */
 
add_action( 'wp_head', function () { ?>
   
    <style>
 
    /* CSS hide submit button on page load */
    #wpforms-form-1000.wpforms-submit-container .wpforms-submit {
            visibility:hidden;
        }
   
    #wpforms-form-1000.wpforms-submit-container .wpforms-submit.show-submit {
            visibility:visible;
        }
   
    </style>
   
<?php } );
   
   
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
    ?>
    <script>
        jQuery(function($){
            $( "form#wpforms-form-1000" ).on( 'change', function () {
                var selectedval = $( "#wpforms-1000-field_15 option:selected" ).text();              
                  if(selectedval == "First Choice"){
                    $( ".wpforms-submit" ).removeClass( "show-submit" );
                }
                else{
                    $( ".wpforms-submit" ).addClass( "show-submit" );
                }
            });
           });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );

¿Se puede usar esto también para los botones Siguiente y Anterior de Paginación?

Sí, para usar esta misma funcionalidad para los botones de Paginación, solo necesitarías cambiar .wpforms-submit por button.wpforms-page-next. Por lo tanto, el fragmento de código completo se vería algo así.

/**
 * Conditionally show the submit button
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 */
 
add_action( 'wp_head', function () { ?>
 
<style>
 
    /* CSS hide submit button on page load */
    #wpforms-form-1000 button.wpforms-page-next {
        visibility: hidden;
    }
  
    #wpforms-form-1000 button.wpforms-page-next.show-next {
        visibility: visible;
    }
  
</style>
 
<?php } );
 
 
// Conditional logic for Next button
function wpf_dev_form_redirect() {
?>
<script>
    jQuery(function($) {
        $( "form#wpforms-form-1000" ).click(function() {
            var selectedval = $( ".wpforms-form input[type='radio']:checked" ).val();
            if (selectedval == "No") {
                window.location = "/thank-you";
            }
            if (selectedval == "Yes") {
                $( "button.wpforms-page-next" ).addClass( "show-next" );
            }
        });
    });
  
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );

¿Qué pasa si tengo más de una opción de opción múltiple en la página?

Sí, si tienes más de una pregunta de Sí o No, puedes identificar el script especificando el ID del campo. Por ejemplo, si tienes tres campos de Opción Múltiple en una página, tu script se vería así.

/**
 * Conditionally show the submit button
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 */
 
add_action( 'wp_head', function () { ?>
   
    <style>
 
    /* CSS hide submit button on page load */
    #wpforms-form-1000 .wpforms-submit-container .wpforms-submit {
            visibility:hidden;
        }
   
    #wpforms-form-1000 .wpforms-submit-container .wpforms-submit.show-submit {
            visibility:visible;
        }
   
    </style>
   
<?php } );
   
   
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
    ?>
    <script>
        jQuery(function($){
            $( "form#wpforms-form-1000" ).click(function(){
             
                // Form ID 1000 and Field ID 15
                var selectedval = $( "div#wpforms-1000-field_15-container input[type='radio']:checked" ).val();
                if(selectedval == "Yes"){
                    window.location = "/thank-you";
                }
                if(selectedval == "No"){
                    $( ".wpforms-submit" ).addClass( "show-submit" );
                }
            });
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );

Nuestro ID de formulario es 1000 y el ID del campo de Opción Múltiple que queremos usar en nuestro código es 15. Por lo tanto, estamos estableciendo una variable para evaluar con $("div#wpforms-1000-field_15-container input[type='radio']:checked")

¿Puedo simplemente deshabilitar el botón de envío hasta que todos los campos tengan un valor?

Sí, sin embargo, no validará números de teléfono, direcciones de correo electrónico, etc. Este fragmento solo buscará cualquier valor antes de permitir que se haga clic en el botón de envío.

/**
 * Conditionally show the submit button
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 */
function wpf_dev_disable_submit_validation() {
    ?>
    <script type="text/javascript">
    jQuery(function () {
        
        // Disable the submit button with the ID of #wpforms-submit-727, change the 727 to match your form ID
        jQuery('#wpforms-submit-727').attr('disabled', true);
        
        // Look and listen for any change on the form ID 727, change the 727 to match your form ID
        jQuery('#wpforms-form-727').change(function () {
            
            // List all field IDs in this section using the && to join them
            if (jQuery('#wpforms-727-field_1').val() != '' && 
                jQuery('#wpforms-727-field_2').val() != '' && 
                jQuery('#wpforms-727-field_3').val() != '' &&

                // Check for radio button (adjust field number as needed)
                jQuery('input[name="wpforms[fields][4]"]:checked').val() &&

                // Check for checkbox (adjust field number as needed)
                jQuery('input[name="wpforms[fields][5][]"]:checked').length > 0) {
                
                // If all of those field IDs have values, the submit button can be clicked
                jQuery('#wpforms-submit-727').attr('disabled', false);
            } else {
                
                // Otherwise, the submit button for this form remains disabled
                jQuery('#wpforms-submit-727').attr('disabled', true);
            }
        });
     });
    </script>
    <?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_disable_submit_validation', 1);

Nota: Solo necesitas asegurarte de que 727 coincida con el ID de tu formulario y que hayas enumerado cada ID de campo en este formulario. Si necesitas ayuda para encontrar los números de ID de formulario o campo, consulta este tutorial.

¿Qué pasa si quiero comparar más de una opción para un campo?

R: Si tiene más de un campo que desea comparar, simplemente usaría el equivalente de PHP para el operador OR.

Este ejemplo utiliza un formulario de reserva simple con el campo Checkbox para que el usuario seleccione la hora solicitada. Si el usuario selecciona 8:00 – 9:00am, 9:00 – 10:00am o 10:00 – 11:00am, será redirigido a la página Thank You ya que estas franjas horarias están ocupadas.

/**
 * Conditionally show the submit button
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 */
  
add_action( 'wp_head', function () { ?>
   
    <style>
  
    /* CSS hide submit button on page load */
    #wpforms-form-1000 .wpforms-submit-container .wpforms-submit {
            visibility:hidden;
        }
  
    #wpforms-form-1000 .wpforms-submit-container .wpforms-submit.show-submit {
            visibility:visible;
        }
   
    </style>
   
<?php } );
   
   
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
    ?>
    <script>
        jQuery(function($){
            $( "form#wpforms-form-1000" ).click(function(){
                var selectedval = $( ".wpforms-form input[type='checkbox']:checked" ).val();
                if ( selectedval == "8:00 - 9:00am" || selectedval == "9:00 - 10:00am" || selectedval == "10:00 - 11:00am" ) {
                    window.location = "/thank-you";
                }
                 
                if ( selectedval == "11:00 - 12:00pm" || selectedval == "12:00 - 1:00pm" || selectedval == "1:00 - 2:00pm" ) {
                    $( ".wpforms-submit" ).addClass( "show-submit" );
                }
            });
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );

Nota: Para obtener más información sobre los operadores de comparación de PHP, consulte su documentación sobre este tema aquí.

P: ¿Podría modificar esto para comparar dos fechas?

R: ¡Absolutamente! Digamos que tiene dos campos de fecha en su sitio. La fecha uno sería la fecha del pedido y la fecha dos sería la fecha de recogida. Pero no desea mostrar el botón Submit a menos que la fecha dos sea mayor que la fecha uno.

Recuerde que, para cualquier ayuda sobre cómo agregar fragmentos de código, consulte este tutorial.

/**
 * Conditionally show the submit button if date 2 is greater than date 1
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 */
add_action( 'wp_head', function () { ?>
   
    <style>
  
    /* CSS hide submit button on page load */
    #wpforms-form-1899 .wpforms-submit-container .wpforms-submit {
            visibility:hidden;
        }
  
    #wpforms-form-1899 .wpforms-submit-container .wpforms-submit.show-submit {
            visibility:visible;
        }
   
    </style>
   
<?php } );
   
   
// Conditional logic for Submit button
function wpf_dev_compare_two_dates() {
    ?>
    <script>
        jQuery(function($){
             
            // Only fire this script when date 2 has been selected
            document.querySelector( "#wpforms-1899-field_33-container" ).onchange = function() { 
             
                // Set the first date picker variable
                var oneDate = $( "input#wpforms-1899-field_32" ).val();
                 
                // Set the second date picker variable
                var twoDate = $( "input#wpforms-1899-field_33" ).val();
                 
                // Now compare the 2 dates, show a message and keep the Submit button hidden 
                // if date 2 is less than date 1
                if(twoDate < oneDate){
                    alert( "Please make sure that the pickup date is after the dropoff date" );
                    e.preventDefault();
                    e.stopPropagation();
                }
                else {
                    // since date 2 is greater than date 1, go ahead and show the submit button
                    $( ".wpforms-submit" ).addClass( "show-submit" );
                }
            }
        });
         
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_compare_two_dates', 10 );

Cada referencia a 1899 en el fragmento anterior es el ID de mi formulario. Los _32 y _33 son los IDs de campo para los 2 selectores de fecha en nuestro formulario.

Deberá actualizar todos estos IDs para que coincidan con los IDs de su propio formulario y campos. Para obtener ayuda para encontrarlos, simplemente revise este tutorial.

P: ¿Puedo evitar que el usuario continúe en el formulario basándome en una opción desplegable?

R: Absolutamente. Para este ejemplo, mostraremos los botones Siguiente y Anterior como se espera, pero si seleccionan No en el formulario, queremos deshabilitar estos botones para no permitir que el usuario continúe con el formulario.

/**
 * Conditionally show the Next button based on dropdown choice
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 */
 
function wpf_dev_conditional_next_page() {
?>
    <script>
        jQuery(function($){
             
            // Only run this on the form ID 727
            $( "form#wpforms-form-727" ).on( 'change', function () {
                 
                // Look at the field ID 9 which is a dropdown to see what the user selected
                var selectedval = $( "#wpforms-727-field_9 option:selected" ).text();    
                   
                  // If the user selects no from the dropdown, disable the Next button
                  if(selectedval == "No"){
                    $( ".wpforms-page-next" ).attr({disabled: "true"});
                }
                 
                else {
                  
                 // Otherwise, the next button for this form remains disabled
                 $( '.wpforms-page-next' ).attr('disabled', false);
             }
            });
           });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_conditional_next_page', 10 );

Nota: Al usar este fragmento, tenga en cuenta que el usuario puede no entender por qué el botón está deshabilitado y esto podría causar confusión. Asegúrese de que el usuario comprenda el flujo de su formulario al usar este fragmento.

P: ¿Cómo puedo evitar el botón de envío a menos que un campo numérico sea mayor o igual a 3?

R: Al analizar una cantidad numérica, podría usar este fragmento.

/**
 * Check if amount entered on field ID 15 is greater than or equal to 3
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 */
  
add_action( 'wp_head', function () { ?>
    
    <style>
  
    /* CSS hide submit button on page load */
    #wpforms-form-1000 .wpforms-submit-container .wpforms-submit {
            visibility:hidden;
        }
    
    #wpforms-form-1000 .wpforms-submit-container .wpforms-submit.show-submit {
            visibility:visible;
        }
    
    </style>
    
<?php } );
    
    
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
    ?>
    <script>
        jQuery(function($){
 
            $( "form#wpforms-form-1000" ).click(function(){
 
                // Form ID 1000 and Field ID 15
                var selectedval = $( "div#wpforms-1000-field_15-container input[type='number']" ).val();
 
                if(selectedval <= "2"){
                    $( ".wpforms-submit" ).removeClass( "show-submit" );
                }
                if(selectedval >= "3"){
                    $( ".wpforms-submit" ).addClass( "show-submit" );
                }
 
            });
 
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );

Nota: Recuerde cambiar el ID del formulario de 1000 para que coincida con el ID de su propio formulario y también cambie el ID del campo _15 para que coincida con el ID del campo de su campo de formulario Number.

P: ¿Cómo puedo ocultar el botón Siguiente hasta que se seleccionen un cierto número de casillas de verificación en un formulario de varios pasos?

R: Puede ocultar el botón Siguiente hasta que se seleccionen un número específico de casillas de verificación utilizando una combinación de CSS y JavaScript. Aquí hay un ejemplo que oculta el botón Siguiente hasta que se seleccionan al menos 2 casillas de verificación:

/**
 * Hide Next button until multiple checkboxes are selected
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button
 */
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide next button on page load for specific form and page */
#wpforms-form-35864 .wpforms-page-next[data-page="4"] {
    visibility: hidden;
}
#wpforms-form-35864 .wpforms-page-next[data-page="4"].show-next {
    visibility: visible;
}
</style>
<?php } );

function wpf_dev_form_conditional_next() {
?>
<script type="text/javascript">
jQuery(function($) {
    // Function to check the number of selected checkboxes
    function checkCheckboxes() {
        var minSelection = $('#wpforms-35864-field_33-container input[type=checkbox]:checked').length;
        if (minSelection >= 2) {
            $("button.wpforms-page-next").addClass("show-next");
        } else {
            $("button.wpforms-page-next").removeClass("show-next");
        }
    }

    // Check the checkboxes on form load and when any checkbox is clicked
    checkCheckboxes();
    $('#wpforms-35864-field_33-container input[type=checkbox]').on('change', function() {
        checkCheckboxes();
    });
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_conditional_next', 10 );

¡Y eso es todo lo que necesita para mostrar condicionalmente el botón de envío en su formulario! ¿Le gustaría aprender más sobre cómo cambiar el color del botón de envío? Eche un vistazo a nuestro artículo sobre Cómo cambiar el color del botón de envío.

Filtro de Referencia

wpforms_wp_footer_end

Etiquetado:
Aún atascado? ¿Cómo podemos ayudar?
Última actualización el 11 nov 2024