1. ecforce efo faq
  2. How To
How To

パスワードの入力条件をチェックリストで表示したい

こちらでは、パスワードの入力欄のすぐ下に「半角英数字記号」「8文字以上になっている (5/8)」のような入力条件を表示し、入力に合わせて満たした条件にチェックを付ける「パスワード バリデーションチェックリスト」の設定方法を説明します。

条件は入力のたびに更新され、満たした条件は緑のチェック、満たしていない条件はグレーで表示されます。入力前は表示されず、1文字目を入力すると表示されます。お客様がどの条件を満たしていないかをその場で確認できるため、パスワードの入力エラーによる離脱を防ぐ効果が期待できます。

表示イメージ

入力途中（文字数の条件を満たしていない状態）

入力途中のチェックリスト

すべての条件を満たした状態

条件を満たしたチェックリスト

設定方法

  1. プロファイル一覧で対象プロファイルの「編集」アイコンを押下して編集画面を開き、左のシナリオフローで、【パスワード】（password）フォームが入っているシナリオを選択し、【メッセージ】のうちそのフォームがあるメッセージを押下して開きます。
    【フォーム】の右側の「＋」から【パスワード ( password )】>【パスワード バリデーションチェックリスト】を選択し、フォームを追加してください。
    フォームの追加メニュー
  2. 追加したフォームは【フォーム】の一番上に入ります。項目の右側の「下へ」（↓）アイコンを押下するか、左端のつまみをドラッグして、【パスワード】（password）フォームのすぐ下に並び替えてください。
    パスワードフォームの下に並び替えたチェックリスト
  3. 画面右上の「保存」を押下して保存し、ビルドを実行してください。保存しただけでは、LPに設置しているチャットには反映されません。

パスワードのフォームと同じく、ログインしていないお客様にだけ表示されます。

表示する条件を変更する

初期設定では「半角英数字記号」「8文字以上になっている」の2つの条件を表示します。条件を変更する場合は、次の手順でスクリプト冒頭の設定値を書き換えます。

  1. 追加した【パスワード バリデーションチェックリスト】フォームを押下して開き、「フォーム読み込み時イベント (複数)」の【パスワード バリデーションチェックリスト】を押下して開きます。
  2. 「フォーム読込時イベント (JS)」の鍵アイコンを押下してロックを解除し、「定数 (ここだけ変える)」と書かれた範囲の値を書き換えます。
    フォーム読込時イベント (JS) の定数
設定値 内容 初期値
ALLOW_SYMBOLS true の場合、記号（半角、スペースを除く）も使える文字として扱い、表示は「半角英数字記号」になります。false にすると半角英数字だけを使える文字として扱い、表示は「半角英数字」になります。 true
REQUIRE_TYPES 1文字以上含める必要がある文字の種類です。英字 'alpha'、大文字 'upper'、小文字 'lower'、数字 'digit'、記号 'symbol' を組み合わせて指定します。
例: ['alpha', 'digit'] で英字と数字を両方含む条件になります。指定すると、表示は「半角英数字記号（英字・数字を含む）」のように、必要な文字の種類が付いた表示になります。
空（[]）の場合は、使える文字だけで入力されているかだけを確認します。		 []
MIN_LENGTH 最小の文字数です。 8
MAX_LENGTH 最大の文字数です。数値（例: 16）にすると、表示も「8文字以上16文字以内になっている」に変わります。上限がない場合は null のままにします。 null
SHOW_COUNT true の場合、入力中の文字数を「(5/8)」のように表示します。 true

例えば、「英字と数字を両方含む、8文字以上16文字以内」にする場合は次のように書き換えます。

const ALLOW_SYMBOLS = true
const REQUIRE_TYPES = ['alpha', 'digit']
const MIN_LENGTH = 8
const MAX_LENGTH = 16
const SHOW_COUNT = true

ご注意

  • チェックリストは表示のためのもので、パスワードの入力チェック（エラー表示）とは別に動きます。パスワードフォームの入力チェックや、ecforceの会員パスワード設定と同じ条件になるように設定値を合わせてください。
  • 標準の【パスワード】フォームとecforceの会員パスワードは、記号を含むパスワードも登録できるため、初期設定（ALLOW_SYMBOLS = true）では記号も使える文字として扱います。ALLOW_SYMBOLS を false にすると、記号を含むパスワードを入力したときに「半角英数字」の条件が満たされない表示になるためご注意ください。
  • ecforceの「最低文字種数」（例: 4種類のうち2種類以上）のように、いずれかの組み合わせを求める条件は、REQUIRE_TYPES では同じ条件にできません。お客様に案内したい組み合わせ（例: ['alpha', 'digit']）を指定してください。
  • また、REQUIRE_TYPES に 'symbol' を入れる場合は、ALLOW_SYMBOLS は true のままにしてください。
  • ecforceの「記号の強制」で記号として扱われる文字は一部（! " # $ % & ' ( ) * + , - . : ; < = > ? @）に限られるため、'symbol' を指定しても、記号が _ や / などだけのパスワード（例: abcd1234_）は、チェックリストでは条件を満たした表示になり、ecforce では登録できないことがあります。

ecforceの会員パスワード設定に合わせた入力チェックについては、ecforceで設定した会員パスワード条件をecforce efoで取得できるようにしたいをご確認ください。

見た目を変更する

チェックの色や文字の大きさは、「CSS記述欄 (複数)」のプリセット「フォーム > パスワードチェックリストの見た目」で変更できます（CSS記述欄 (複数) でチャットのデザインを調整したい）。このプリセットには「達成時の丸の色」「文字サイズ」の設定が入っています。入力前からチェックリストを表示したい場合は、プリセット末尾の「.validation-checks.is-empty {」「display: block;」「}」の3行の行頭の // を外してください（その上の説明の行のコメントは外さないでください。外すとエラーになり保存できません）。

この記事の目次

このセクションの記事

How To

  • もっと見る