フォームにパスワード表示切り替えボタンを追加する方法

はじめに

トグルスイッチでパスワードの可視性を訪問者に提供できるようにしたいですか?デフォルトでは、フォームにパスワードフィールドを追加すると、このフィールドの入力はセキュリティのためにアスタリスクで表されます。トグルボタンでパスワードの表示/非表示を切り替えたい場合は、このチュートリアルに沿ってコードスニペットを作成することで簡単に実現できます。

フォームの作成

まず、新しいフォームを作成し、フィールドを追加します。自分のアカウントを作成するためのフォームを作成するので、名前、Eメール、ユーザー名、パスワード、そして自分自身について入力するためのテキストエリアを入力します。

フォームを作成し、パスワードフィールドを含むフィールドを追加します。

フォームの作成にサポートが必要な場合は、こちらのドキュメントをご覧ください。

Font Awesomeプラグインのインストール

トグルボタンにアイコンを使いたいので、WPBeginnerの友人のチュートリアルに従って、Font Awesomeプラグインをインストールし、パスワード可視化トグルボタンに彼らのアイコンの一つを使えるようにします。

スニペットの追加

それでは、以下のスニペットをあなたのサイトにコピーしましょう。

カスタム・コード・スニペットの追加方法や場所についてサポートが必要な場合は、こちらのチュートリアルをご覧ください。

/**
 * 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 );

このスニペットは、すべての パスワード フィールドが追加されます。これは自動的に before 擬似クラスです。このアイコンがクリックされると、CSS IDの password-toggle アスタリスクの代わりにパスワードが表示されるようにする。

カスタムCSSの適用

さて、最後のステップでは、カスタムCSSを追加して、このアイコンをスタイリングします。これを行うには、このカスタムCSSをコピーしてサイトに貼り付けます。

カスタムCSSの追加方法や場所については、こちらのチュートリアルをご覧ください。

.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;
}

これでフォームが表示されると、パスワードの表示/非表示の切り替えスイッチが表示されます。

それで終わりです！サブラベルも変更したいですか？パスワードフィールドのサブラベルを変更する方法のチュートリアルをご覧ください。

よくあるご質問

アクション・リファレンス:wpforms_wp_footer_end

パスワード表示切り替えボタンの追加方法