Hinzufügen einer Schaltfläche zum Umschalten der Kennwortsichtbarkeit

Einführung

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 Passwort-Feld in WPForms die Eingabe aus Sicherheitsgründen mit Sternchen.

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

Eingebaute Option für die Sichtbarkeit von Passwörtern

Beginnend mit WPForms Version 1.9.8, können Sie eine eingebaute Option aktivieren, die es Benutzern ermöglicht, die Sichtbarkeit von Passwörtern umzuschalten, ohne dass eigener Code erforderlich ist.

Um diese Funktion zu aktivieren, klicken Sie auf das Feld Kennwort im Formularersteller, um das Feldoptionen-Panel zu öffnen. Schalten Sie dann auf der Registerkarte Allgemein die Einstellung Kennwortsichtbarkeit aktivieren ein.

Dies ist der schnellste und einfachste Weg, Ihren Formularen einen Schalter für die Sichtbarkeit von Passwörtern hinzuzufügen.

Wenn Sie mehr Kontrolle bevorzugen oder das Verhalten und die Gestaltung anpassen möchten, können Sie immer noch die folgende Anleitung befolgen, um diese Funktionalität mit einem Codeschnipsel hinzuzufügen.

Hinzufügen des Snippets

Um manuell ein Passwort-Sichtbarkeits-Toggle hinzuzufügen, müssen Sie ein kleines Code-Snippet auf Ihrer Website platzieren. Diese Methode bietet Ihnen mehr Flexibilität bei der Anpassung des Aussehens und der Funktionsweise der Umschaltfunktion.

Kopieren Sie das unten stehende Snippet auf Ihre Website.

Wenn Sie Hilfe benötigen, wie und wo Sie benutzerdefinierte Codeschnipsel hinzufügen können, lesen Sie bitte diese Anleitung.

/**
 * 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 alle Passwort Feld durch WPForms hinzugefügt. Es wird automatisch eine bestimmte Symbolklasse mit Hilfe der before Pseudo-Klasse. Wenn dieses Symbol angeklickt wird, ruft es die CSS-ID von password-toggle damit das Passwort anstelle der Sternchen angezeigt wird.

Anwenden von benutzerdefiniertem CSS

In unserem letzten Schritt fügen wir nun ein benutzerdefiniertes CSS hinzu, um das Symbol zu gestalten. Dazu kopieren wir dieses benutzerdefinierte CSS und fügen es auf Ihrer Website ein.

Wenn Sie wissen möchten, wie und wo Sie benutzerdefinierte CSS hinzufügen können, sehen Sie sich bitte dieses Tutorial an.

.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 nun das Formular sehen, sehen Sie den Schalter für die Sichtbarkeit des Passworts.

Und das war's! Möchten Sie auch die Unteretiketten ändern? Sehen Sie sich unsere Anleitung zum Ändern der Unteretiketten für das Kennwortfeld an.

FAQ

Referenz der Aktion: wpforms_wp_footer_end