Como Proteger com Senha um Botão de Envio

Introdução

Gostaria de proteger com senha um botão de Envio? Você sabia que já pode proteger um formulário inteiro com senha seguindo o guia detalhado nesta documentação? No entanto, pode haver momentos em que você queira apenas colocar a senha apenas no botão de Envio e, neste tutorial, mostraremos como! 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, por favor, confira este guia útil.

O último campo para o nosso formulário é um campo de Texto de Linha Única que usaremos para permitir que os visitantes insiram uma senha.

Adicionando o snippet

Agora é hora de adicionar o snippet ao seu site. Se você não tem certeza de onde ou como adicionar snippets ao seu site, por favor, revise 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 );

Este snippet ocultará automaticamente o botão de Envio quando o formulário for carregado por padrão. À medida que os campos são preenchidos, ele permanecerá oculto até atingir o ID do campo 10, se a senha inserida não corresponder exatamente ao código de indicação de funcionário 896, o que inclui diferenciação de maiúsculas e minúsculas, bem como 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 inserida corretamente, o botão será exibido e o formulário poderá ser enviado. Lembre-se de atualizar este snippet para refletir a senha que você deseja usar.

E é tudo o que você precisa para proteger com senha um botão de Envio. Gostaria de ter um formulário enviado automaticamente com base em uma escolha do formulário? Dê uma olhada em nosso artigo sobre Como Enviar Automaticamente um Formulário com uma Escolha de Campo.

Relacionado

Referência de Ação: wpforms_wp_footer_end