So fügen Sie eine Schaltfläche zum Ein-/Ausblenden von Passwörtern hinzu

Einleitung

Möchten Sie Ihren Besuchern die Möglichkeit geben, ihr Passwort ein- oder auszublenden, während sie es in Ihr Formular eingeben? Standardmäßig maskiert das Passwortfeld in WPForms die Eingabe aus Sicherheitsgründen mit Sternchen.

WPForms enthält eine integrierte Einstellung, mit der Sie mit nur einem Klick im Builder eine Passwort-Sichtbarkeits-Umschaltfunktion hinzufügen können. Wenn Sie es vorziehen, diese Funktion für mehr Kontrolle per Code hinzuzufügen, zeigt Ihnen dieses Tutorial auch, wie Sie es mit einem Snippet tun.

Integrierte Option für Passwort-Sichtbarkeit

Ab WPForms Version 1.9.8 können Sie eine integrierte Option aktivieren, mit der Benutzer die Passwort-Sichtbarkeit umschalten können, ohne benutzerdefinierten Code zu benötigen.

Um diese Funktion zu aktivieren, klicken Sie im Formular-Builder auf das Feld Passwort, um dessen Feldoptionen zu öffnen. Schalten Sie dann unter der Registerkarte Allgemein die Einstellung Passwort-Sichtbarkeit aktivieren ein.

Dies ist der schnellste und einfachste Weg, eine Passwort-Sichtbarkeits-Umschaltfunktion zu Ihren Formularen hinzuzufügen.

Wenn Sie mehr Kontrolle wünschen oder das Verhalten und Styling anpassen möchten, können Sie dem folgenden Tutorial folgen, um diese Funktionalität mit einem Code-Snippet hinzuzufügen.

Hinzufügen des Snippets

Um eine Passwort-Sichtbarkeits-Umschaltfunktion manuell hinzuzufügen, müssen Sie ein kleines Code-Snippet auf Ihrer Website platzieren. Diese Methode gibt Ihnen mehr Flexibilität, um anzupassen, wie die Umschaltfunktion aussieht und funktioniert.

Kopieren Sie das folgende Snippet auf Ihre Website.

Wenn Sie Hilfe benötigen, wie und wo Sie benutzerdefinierte Code-Snippets hinzufügen können, lesen Sie bitte dieses Tutorial.

/**
 * Provide a password visibility toggle switch
 *
 * @link https://wpforms.com/developers/how-to-add-a-password-visibility-toggle-button/
 */
  
function wpf_dev_password_toggle() {
    ?>
 
<script type="text/javascript">
 
    jQuery(function($){
          
        $( '.wpforms-field-password' ).each(function(){
              
            $(this).find( 'input' ).each(function(){
                  
                $(this).before( '<i class="fa fa-eye-slash fa-eye" id="password-toggle"></i>' );
                var $passwordInput = $(this);
                  
                $(this).parent().find( '#password-toggle' ).on( 'click', function(){
                      
                    var type = $passwordInput.attr( 'type' ) === 'password' ? 'text' : 'password';
                    $passwordInput.attr( 'type', type);
                    $(this).toggleClass( 'fa-eye-slash' );
                      
                });
                  
            });
              
        });
          
    });
 
    </script>
 
<?php
}
   
add_action( 'wpforms_wp_footer_end', 'wpf_dev_password_toggle', 30 );

Dieses Snippet wird auf jedes Passwort-Feld angewendet, das über WPForms hinzugefügt wird. Es wendet automatisch eine bestimmte Icon-Klasse mithilfe der before Pseudo-Klasse an. Wenn auf dieses Icon geklickt wird, ruft es die CSS-ID password-toggle auf, sodass das Passwort anstelle der Sternchen angezeigt wird.

Benutzerdefiniertes CSS anwenden

Nun, in unserem letzten Schritt, werden wir etwas benutzerdefiniertes CSS hinzufügen, um dieses Icon zu gestalten. Dazu kopieren und fügen wir dieses benutzerdefinierte CSS auf Ihre Website ein.

Wenn Sie Hilfe benötigen, wie und wo Sie benutzerdefiniertes CSS hinzufügen können, prüfen Sie bitte dieses Tutorial.

.wpforms-field-password,
.wpforms-field-password .wpforms-field-row-block {
     display: flex;
     flex-flow: wrap;
}
 
.wpforms-field-row-block *:not(input):not(i),
.wpforms-field-password *:not(input):not(i) {
     flex-basis: 100% !important;
}
 
#password-toggle {
     width: 35px;
     font-family: "FontAwesome" !important;
     text-align: center;
     line-height: 35px;
     background: #d9d9d9;
     border-radius: 2px 0 0 2px;
     border: 1px solid #ccc;
     border-right: 0;
}
 
.wpforms-field-password input {
     width: calc(100% - 50px) !important;
     border-radius: 0 2px 2px 0 !important;
} 
 
.fa-eye-slash:before {
    font-size: 12px;
}

Wenn Sie sich nun das Formular ansehen, sehen Sie den Umschalter für die Passwort-Sichtbarkeit.

Und das ist alles! Möchten Sie auch die Unterbeschriftungen ändern? Sehen Sie sich unser Tutorial an So ändern Sie die Unterbeschriftungen des Passwortfelds.

FAQ

Aktionsreferenz: wpforms_wp_footer_end