Como Proteger com Senha um Botão de Envio

Introdução

Gostaria de proteger com palavra-passe um botão de Envio? Sabia que já pode proteger com palavra-passe um formulário inteiro seguindo o guia detalhado nesta documentação? No entanto, pode haver alturas em que apenas queira colocar a palavra-passe apenas no botão de Envio e neste tutorial, vamos mostrar-lhe como! Vamos começar!

Criação do formulário

Para começar, crie um novo formulário e adicione os seus campos. Se precisar de ajuda a criar um formulário, por favor consulte 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 palavra-passe.

Adição do trecho de código

Agora é hora de adicionar o snippet ao seu site. Se não tem a certeza onde ou como adicionar snippets ao seu site, por favor reveja 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 irá ocultar automaticamente o botão de Envio quando o formulário carregar por defeito. À medida que os campos são preenchidos, permanecerá oculto até atingirem o ID de campo 10, se a palavra-passe inserida não corresponder exatamente a código de referência de funcionário 896, o que inclui distinção entre maiúsculas e minúsculas, bem como espaços, o formulário não será enviado, mas o utilizador será redirecionado para uma página de agradecimento. Se a palavra-passe for inserida corretamente, o botão aparecerá e o formulário poderá então ser enviado. Lembre-se de atualizar este snippet para refletir a palavra-passe que deseja usar.

E é tudo o que precisa para proteger com palavra-passe um botão de Envio. Gostaria de ter um formulário enviado automaticamente com base numa escolha do formulário? Dê uma vista de olhos ao nosso artigo sobre Como Enviar Automaticamente um Formulário com uma Escolha de Campo.

Relacionado

Referência de Ação: wpforms_wp_footer_end