Cómo proteger con contraseña un botón de envío

Introducción

¿Te gustaría proteger con contraseña un botón de Enviar? ¿Sabías que ya puedes proteger con contraseña un formulario completo siguiendo la guía detallada en esta documentación? Sin embargo, puede haber ocasiones en las que solo quieras poner la contraseña en el botón de Enviar y en este tutorial, ¡te mostraremos cómo! ¡Empecemos!

Creación del formulario

Para empezar, crea un formulario y añade tus campos. Si necesitas ayuda para crear un formulario, por favor, consulta esta útil guía.

El último campo para nuestro formulario es un campo de Texto de una sola línea que utilizaremos para permitir a los visitantes introducir una contraseña.

Añadir el fragmento

Ahora es el momento de añadir el fragmento a tu sitio. Si no estás seguro de dónde o cómo añadir fragmentos a tu sitio, por favor, revisa esta guía detallada paso a paso.

/**
 * Password-protect a submit button
 *
 * @link https://wpforms.com/developers/how-to-password-protect-a-submit-button/
 */
 
add_action( 'wp_head', function () { ?>
  
    <style>
 
    /* CSS hide submit button on page load */
    #wpforms-form-137 .wpforms-submit-container .wpforms-submit {
            visibility:hidden;
        }
 
    #wpforms-form-137 .wpforms-submit-container .wpforms-submit.show-submit {
            visibility:visible;
        }
  
    </style>
  
<?php } );
  
  
// Password logic for Submit button
function wpf_dev_password_submit() {
    ?>
    <script>
        jQuery(function($){

            // Look only at form ID 137 and field ID 10
            $( "#wpforms-137-field_10" ).change(function(){

                var selectedval = $( "#wpforms-137-field_10" ).val();

                if(selectedval === "employee referral code 896"){
					$( ".wpforms-submit" ).addClass( "show-submit" );
                } else {
					window.location = "https://myexamplesite.com/thank-you";
				}

            });

        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_password_submit', 10 );

Este fragmento ocultará automáticamente el botón de Enviar cuando el formulario se cargue por defecto. A medida que se rellenan los campos, permanecerá oculto hasta que lleguen al ID de campo 10, si la contraseña introducida no coincide exactamente con el código de referencia de empleado 896, lo que incluye mayúsculas y espacios, el formulario no se enviará pero el usuario será redirigido a una página de agradecimiento. Si la contraseña se introduce correctamente, el botón se mostrará y el formulario podrá enviarse. Por favor, recuerda actualizar este fragmento para reflejar la contraseña que deseas utilizar.

Y eso es todo lo que necesitas para proteger con contraseña un botón de Enviar. ¿Te gustaría que un formulario se enviara automáticamente basándose en una opción del formulario? Echa un vistazo a nuestro artículo sobre Cómo enviar automáticamente un formulario con la elección de un campo.

Relacionado

Referencia de acción: wpforms_wp_footer_end