¿Le gustaría mostrar u ocultar automáticamente el botón Enviar en función de las respuestas de los campos del formulario? Con un simple fragmento de código, puede controlar la visibilidad del botón Enviar 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 Enviar.
Configuración del formulario
Para empezar, abra el generador de formularios creando uno nuevo o editando el existente.
Para este ejemplo, crearemos un formulario de donación con un campo de opción múltiple que muestra las opciones Sí/No. Todos los demás campos adicionales del formulario sólo se mostrarán si se selecciona Sí mediante lógica condicional.
El botón Enviar sólo aparecerá 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á cuando añada el fragmento de código. Si necesitas ayuda para encontrar estos ID, consulta nuestra guía sobre cómo encontrar ID de formularios y campos.
Establecimiento de la lógica condicional
Antes de añadir el código para el botón Enviar, debemos configurar la lógica condicional para los demás campos del formulario. Estos campos deben permanecer ocultos hasta que el usuario seleccione "Sí" en el campo de opción múltiple.
Para ello, 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í. De este modo, estos campos permanecerán ocultos por defecto y solo aparecerán cuando sea necesario.
Nota: Si necesita ayuda para entender cómo funciona la lógica condicional en WPForms, por favor vea nuestra guía detallada sobre lógica condicional.
Creación de la página de agradecimiento
Dado que nuestro formulario ofrece a los usuarios la opción Sí/No, queremos proporcionar una buena experiencia incluso cuando se selecciona "No". En lugar de simplemente ocultar el botón Enviar, redirigiremos a los usuarios a una página de agradecimiento dedicada.
Para ello, cree una nueva página en WordPress y llámela Gracias (o cualquier otro nombre que prefiera). Aquí es donde se redirigirá automáticamente a los usuarios que seleccionen "No".
Anote la ruta 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 del botón Enviar en función de las respuestas del formulario:
Este fragmento utiliza CSS para ocultar el botón Enviar cuando se carga la página. A continuación, configura un receptor de eventos JavaScript que vigila los cambios en las opciones de los campos de opción múltiple del formulario.
Cuando un usuario selecciona "Sí", el script añade una clase CSS que hace visible el botón Enviar. Si selecciona "No", el script le redirige automáticamente a la 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
Tendrá que personalizar varios valores clave en el fragmento de código para su formulario específico:
- En línea 12 y línea 16localice el selector CSS
#wpforms-form-1000y sustituir1000con su ID de formulario real. - En línea 30en el selector jQuery
form#wpforms-form-1000reemplazar1000con su ID de formulario una vez más. - En línea 33encontrará la ruta URL de redirección
/thank-you. Actualícelo para que coincida con la ruta URL real de su página de agradecimiento.- Por ejemplo, si denomina a su página "Gracias", deberá cambiarla por
/thanks.
- Por ejemplo, si denomina a su página "Gracias", deberá cambiarla por
Comprobación de la aplicación
Una vez que haya añadido y personalizado el fragmento de código, es esencial probar a fondo la funcionalidad:
- Empiece cargando su formulario y compruebe que el botón Enviar está oculto por defecto.
- A continuación, seleccione No en su formulario y confirme que se le redirige inmediatamente a su página de agradecimiento.
- A continuación, pruebe la ruta "Sí": seleccione Sí y compruebe que no sólo aparece el botón Enviar, sino que también se hacen visibles todos los campos ocultos condicionalmente.
- Por último, rellene y envíe el formulario con la opción Sí seleccionada para asegurarse de que todo el proceso funciona como se espera.
Preguntas frecuentes
P: ¿Se puede utilizar para un campo de texto de una sola línea?
R: ¡Por supuesto! Aquí tiene 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 );
P: ¿Puedo utilizar este fragmento para el campo desplegable?
R: Sí, puede utilizarlo 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 );
P: ¿Se puede utilizar también para los botones de salto de página siguiente y anterior?
R: Para utilizar esta misma funcionalidad para los botones de salto de página, sólo tendría que cambiar el .wpforms-submit por button.wpforms-page-next. Así que el fragmento de código completo sería algo como esto.
/**
* 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 );
P: ¿Qué ocurre si tengo más de un campo de opción múltiple en la página?
R: Si tiene más de una pregunta de Sí o No, puede identificar el script especificando el ID del campo. Por ejemplo, si tiene tres campos de opción múltiple en una página, su script tendría este aspecto.
/**
* 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 identificador de formulario es 1000 y el ID del Elección múltiple que queremos utilizar 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")
P: ¿Puedo desactivar el botón de envío hasta que todos los campos tengan un valor?
R: Sí, pero 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: Sólo tiene que asegurarse de que el 727 coincide con el ID de su formulario y de que ha enumerado cada ID de campo en este formulario. Si necesita ayuda para encontrar los números de ID de formulario o de campo, consulte este tutorial.
P: ¿Y si quiero comparar más de una opción para un campo?
R: Si tiene más de un campo que desea comparar, sólo tiene que utilizar el equivalente PHP para el operador OR.
En este ejemplo se utiliza un formulario de reserva sencillo con el campo Casilla de verificación 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 de agradecimiento ya que estas franjas horarias ya 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 juntas?
R: ¡Por supuesto! Digamos que usted 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 usted no quiere mostrar el botón Enviar a menos que la fecha dos sea mayor que la fecha uno.
Recuerde que si necesita ayuda para añadir fragmentos, puede consultar 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. El _32 y _33 son los ID de campo para los 2 selectores de fecha en nuestro formulario.
Necesitará actualizar todos estos IDs para que coincidan con sus propios IDs de formulario y campo. Si necesita ayuda para encontrarlos, consulte este tutorial.
P: ¿Puedo impedir que el usuario continúe a través del formulario basándome en una opción desplegable?
R: Por supuesto. Para este ejemplo, mostraremos los botones Siguiente y Anterior como se espera, pero si seleccionan No en el formulario, queremos desactivar 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: Cuando utilice este fragmento, tenga en cuenta que es posible que el usuario no entienda por qué el botón está desactivado y podría causar confusión. Asegúrese de que el usuario entienda el flujo de su formulario cuando utilice este fragmento.
P: ¿Cómo puedo evitar que aparezca el botón Enviar a menos que un campo numérico sea mayor o igual que 3?
R: Para analizar una cantidad numérica, puede utilizar 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 de formulario de 1000 para que coincida con su propio ID de formulario y también cambiar el ID de campo _15 para que coincida con el ID de campo de su campo de formulario Número.
P: ¿Cómo puedo ocultar el botón Siguiente hasta que se seleccione un determinado número de casillas de verificación en un formulario de varios pasos?
R: Puede ocultar el botón Siguiente hasta que se seleccione un número específico de casillas de verificación utilizando una combinación de CSS y JavaScript. A continuación se muestra 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 necesitas para mostrar condicionalmente el botón de envío en tu formulario! ¿Quieres saber más sobre cómo cambiar el color del botón de envío? Echa un vistazo a nuestro artículo sobre Cómo cambiar el color del botón de envío.