Como proteger um botão de envio com senha

Introdução

Você gostaria de proteger um botão Enviar com senha? Você sabia que já é possível proteger um formulário inteiro com senha seguindo o guia detalhado desta documentação? No entanto, pode haver ocasiões em que você queira colocar a senha apenas no botão Enviar e, neste tutorial, mostraremos como fazer isso! Vamos começar!

Criando o formulário

Para começar, crie um novo formulário e adicione seus campos. Se precisar de ajuda para criar um formulário, consulte este guia útil.

O último campo do nosso formulário é um campo de texto de linha única que usaremos para permitir que os visitantes digitem uma senha.

Adicionando o snippet

Agora é hora de adicionar o snippet ao seu site. Se você não tiver certeza de onde ou como adicionar snippets ao seu site, consulte este guia detalhado passo a passo.

/**
 * 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 );

Esse snippet ocultará automaticamente o botão Enviar quando o formulário for carregado por padrão. À medida que os campos forem preenchidos, ele permanecerá oculto até chegar ao campo ID 10. Se a senha inserida não corresponder exatamente ao código de referência do funcionário 896, que inclui maiúsculas e minúsculas e espaços, o formulário não será enviado, mas o usuário será redirecionado para uma página de agradecimento. Se a senha for digitada corretamente, o botão será exibido e o formulário poderá ser enviado. Lembre-se de atualizar esse snippet para refletir a senha que você deseja usar.

E isso é tudo o que você precisa para proteger com senha um botão Enviar. Gostaria de enviar um formulário automaticamente com base em uma opção do formulário? Dê uma olhada em nosso artigo sobre Como enviar automaticamente um formulário com uma opção de campo.

Relacionado

Referência da ação: wpforms_wp_footer_end