Come Proteggere con Password un Pulsante di Invio

Introduzione

Vuoi proteggere con password un pulsante Invia? Sapevi che puoi già proteggere con password un intero modulo seguendo la guida dettagliata in questa documentazione? Tuttavia, ci possono essere momenti in cui vuoi solo inserire la password solo sul pulsante Invia e in questo tutorial ti mostreremo come fare! Iniziamo!

Creazione del modulo

Per iniziare, crea un nuovo modulo e aggiungi i tuoi campi. Se hai bisogno di aiuto nella creazione di un modulo, dai un'occhiata a questa utile guida.

L'ultimo campo per il nostro modulo è un campo Testo a riga singola che useremo per consentire ai visitatori di inserire una password.

Aggiunta dello snippet

Ora è il momento di aggiungere lo snippet al tuo sito. Se non sei sicuro di dove o come aggiungere snippet al tuo sito, ti preghiamo di consultare questa guida dettagliata passo dopo 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 );

Questo snippet nasconderà automaticamente il pulsante Invia quando il modulo viene caricato per impostazione predefinita. Man mano che i campi vengono riempiti, rimarrà nascosto finché non raggiungono il campo ID 10, se la password inserita non corrisponde esattamente al codice di riferimento dipendente 896, che include distinzione tra maiuscole/minuscole e spazi, il modulo non verrà inviato ma l'utente verrà reindirizzato a una pagina di ringraziamento. Se la password viene inserita correttamente, il pulsante verrà visualizzato e il modulo potrà quindi essere inviato. Ricorda di aggiornare questo snippet per riflettere la password che desideri utilizzare.

E questo è tutto ciò che ti serve per proteggere con password un pulsante Invia. Vuoi che un modulo venga inviato automaticamente in base a una scelta dal modulo? Dai un'occhiata al nostro articolo su Come inviare automaticamente un modulo con una scelta di campo.

Correlati

Riferimento Azione: wpforms_wp_footer_end