フォームフィールドに特定の書式を要求したいですか？カスタム入力マスクを使用すると、ユーザーがフィールドに入力できる値のルールを設定できます。これは国際電話番号や郵便番号などに便利です。
このチュートリアルでは、カスタム入力マスクを作成してフォームフィールドに追加する方法を紹介します。
始める前に、WordPressサイトにWPFormsがインストールされ、有効になっていることを確認してください。次に、新しいフォームを作成するか、既存のフォームを編集します。
カスタム入力マスクの追加
任意の単一行テキストフィールドにカスタム入力マスクを追加することができます。このフィールドタイプをフォームに追加したら、それをクリックしてフィールドオプションパネルを開きます。
フィールド・オプションの中で、Advancedタブをクリックする必要があります。その後、入力マスクフィールドにルールを追加することができます。
基本的な入力マスク
カスタム入力マスクのルールを作成するには、特定の特殊文字のセットを使用する必要があります。
9:数字 (0-9)a:アルファベット順 (a-z または A-Z)A:アルファベット大文字（A-Z）*:英数字 (0-9、a-z、A-Z)&:大文字英数字（0-9またはA-Z）
例えば、5桁の数字を要求したい場合は、5と入力します。 9を入力マスク・フィールドに入力する。
ユーザーがフロントエンドでこのフォームフィールドをクリックすると、入力に必要な各文字にアンダースコアまたは "空白 "が表示されます。さらに 9 記号の場合、入力マスクは数値のみを受け付ける（文字やその他の文字は受け付けない）。
ハイフン（-）や括弧などの記号を入力マスクに含めることもできます。たとえば、次のような入力マスクを使って、米国の国コードを含む電話番号形式を要求することができます：
+1 (999)-999-9999
ユーザーがこのフィールドをクリックすると、次のように空白が表示されます。 9s.1、括弧、ハイフンは自動的にフィールドに入力されるので、ユーザーは数字だけを記入すればよい。
重要なことは、ユーザーが入力マスクの一部を埋めただけではフォームを送信できないということです。 ユーザーは入力マスクが要求する数と種類の文字を入力しなければなりません。さもなければ、"Please fill out all blanks. "というバリデーションメッセージが表示されます。
注:ユーザーが入力マスクを完了しなかった場合に表示されるバリデーションメッセージを変更したいですか?バリデーションメッセージのカスタマイズについてのチュートリアルをご覧ください。
しかし、フィールドに入力マスクを追加しても、そのフィールドは必須にはなりません。必須でないフィールドの入力マスクが完全に空でも、ユーザーはフォームを送信できます。
入力マスクにオプション文字を追加する
フィールドに特定の書式を要求したいが、文字数も柔軟に許容したい場合がある。たとえば、多くの国では、地域によって電話番号の桁数が異なることがあります。
任意の文字を角括弧で囲む：
99 9999-9999[9]
最後の桁は任意なので、この入力マスクは次のように10桁の数字を受け付けることになる。 98 7654-3210または11桁の数字。 98 7654-32109.
入力マスクのオプション文字のその他の例
6～8文字のユーザー名（最初の文字は大文字、他は小文字）
- マスク：
Aaaaa[a][a] - 入力例SullieまたはSulliewp
米国の郵便番号（オプションで+4：
- マスク：
99999[-9999] - 入力例98765または98765-4321
注： ユーザーは、入力マスクのオプション文字の空白をすべて埋める必要があります。例えば、上記の郵便番号+4の入力マスクに「33409-40」と入力してフォームを送信することはできません。
任意の文字を柔軟に入力できる入力マスクを作成するには、以下の高度な入力マスクオプションを参照してください。
特殊マスク文字のエスケープ
入力マスクが必須フォーマットの作成に使用する特殊文字のため、意図しないときに空白として表示される文字、数字、記号があります。
フロントエンドで特殊な入力マスク文字が空白に変換されるのを避けるには、単に文字の前に2つのバックスラッシュ(◆)を追加すればよい。
例として、インスタグラムのURLの入力マスクを作ってみよう。
入力マスクを https://instagram.com/*{1,30}のすべてである。 a 文字は空白に変換され、ユーザーはフロントエンドで記入しなければならない。
これを修正するには、すべての a を空白に変換したくない。したがって、この例では、入力マスクを次のように入力する。 https://inst\\agr\\am.com/*{1,30} をフィールドのオプションに追加する。
これで、埋め込みフォーム内でこのフィールドを表示したときに、意図した場所にだけ空白が表示されるようになった。
入力マスクで特殊文字をエスケープするその他の例
製品SKU (2つの9の後に3つの数字または大文字を追加)
- マスク：
\\9\\9-&&& - 入力例99-654または99-BC8
Gmailアドレス
- マスク：
*{1,50}@gm\\ail.com - 入力例：[email protected]
高度な入力マスク
フォームの入力マスクをさらにコントロールしたい場合は、高度な書式オプションも使用できます。これらは上で説明したすべての特殊マスク文字と組み合わせて機能します。
リピート文字
の前に特殊文字を使用することができます。 {n} (ここで n が数値の場合）、繰り返し文字を要求する。
繰り返し文字を含む入力マスクの例
米国の郵便番号（オプションで+4
- マスク：
9{5}[-9{4}] - 入力例33409または33409-4053
数字と大文字による12文字のオーダー番号
- マスク：
&{12} - 入力例：29X483HK8192または10G7382ZR638
柔軟な文字範囲
の前に特殊文字を使用することができます。 {n,m} (ここで n そして m 数値を表す）を使って、ユーザーが文字の範囲を入力できるようにする。
柔軟な範囲を持つ入力マスクの例
フェイスブックのURL（5～50文字まで可能）：
- マスク：
https://f\\acebook.com/*****[*{0,45}] - 入力例： https://facebook.com/wpforms または https://facebook.com/monsterinsights
ツイッターハンドル（4～15個の数字、大文字、小文字が使用可能）
- マスク：
@****[*{0,11}] - 入力例easywpformsまたは@WPBeginner
特定のドメインのEメール（1～51文字まで可能）：
- マスク：
*[*{0,50}]@mysite.com - 入力例： [email protected] または [email protected]
8-11文字の製品SKU（数字または大文字が使用可能）：
- マスク：
&{4}-&{4}[&{0,3}] - 入力例A987-BC65またはA987-BC65D43
複数の入力値に対するマスキング
もう一つの方法は、複数の入力値を受け付ける入力マスクを作成することである。そのためには、バックスラッシュを入力し、その後に許可される値を縦スラッシュで区切って括弧で囲む。 \(x|y).
注： この高度な入力マスク・オプションは、この記事の冒頭に挙げた特殊文字では機能しません。 x そして y には、ユーザーが入力する際に含ませたい特定の数字や文字を指定する。
複数の入力が可能なマスクの例
米国（+1）、オーストラリア（+61）、メキシコ（+52）の国番号付き電話番号
- マスク：
+\(1|61|52) 9999999999 - 入力例+1 2127893920 または +52 3307490285
口座番号 TN州またはKY州在住
- マスク：
\(TN|KY)9{10} - 入力例TN3756284765またはKY2975387529
日付／時間マスク
また、カスタム入力マスクを使用して、特定の日付や時刻のフォーマットを要求することもできます。
注：日付や時刻のピッカーカレンダーやドロップダウンオプションを提供したい場合は、カスタム入力マスクよりも日付/時刻フィールドの方が適している可能性が高いです。
日付または時刻の入力マスクを設定するには、まず最初に date: の後に必要な書式を続ける。
伊達マスク
以下のオプションを使用して、ニーズに合ったカスタム日付入力マスクを作成できます。
d:一桁の場合は先頭にゼロは付かない。dd:1桁の場合は先頭にゼロを付ける。m:1桁の月の場合、先頭のゼロはない。mm:1桁の場合は先頭にゼロを付ける。yy:10年未満は先頭をゼロとする。yyyy:4桁の年
一例を挙げよう、 date:dd/mm/yyyy には12/08/2021のような日付が必要です。ユーザーがフォームにアクセスしてフィールドにカーソルを置くと、必須フォーマットのプレースホルダが表示されます。
タイム・マスク
以下のオプションを使用して、ニーズに合ったカスタム時間入力マスクを作成できます。
注： を追加することを忘れないこと。 date: 時間入力マスクの前に。
h:時間。1桁の時間（12時間時計）には先頭のゼロは付けない。hh:時間；1桁の時間（12時間時計）の場合は先頭のゼロ。H:時間。1桁の時間（24時間時計）の場合、先頭のゼロはない。HH:時間；1桁の時間（24時間時計）の場合は先頭のゼロ。M:分。1桁の場合は先頭にゼロは付けない。月との衝突を避けるため、大文字のMを使用。MM:分。1桁の場合は先頭に0を付ける。月との衝突を避けるため大文字のMM。s:秒。1桁の秒の場合、先頭のゼロはない。ss:秒。1桁の場合は先頭が0。l:ミリ秒。3桁。L:ミリ秒。2桁。t:小文字の1文字のタイムマーカー文字列：aまたはp。tt:2文字の時間マーカー文字列：午前または午後。T:1文字のタイムマーカー文字列：AまたはP。TT:2文字の時間マーカー文字列：AMまたはPM。
一例を挙げよう、 date:h:MM は、ユーザーが8:30のような時間を入力できるようにします。フロントエンドでは、ユーザーがフィールドにカーソルを置くと、プレースホルダーが表示されます。
エイリアスを使った入力マスクの追加
高度なフィールド・オプションの入力マスク・フィールドにエイリアスを入力して、あらかじめパッケージ化された入力マスクを使用することができます。
WPFormsで利用可能な入力マスクエイリアスは以下の通りです：
alias:numeric:任意の数値を入力できる。alias:currency:0.00のフォーマットで数値を入力できます。
注： alias:currency 単一行テキストフィールドのみをフォーマットします。支払いフィールドで使用される通貨形式（小数点や区切り文字など）を変更するには、開発者向けドキュメントをご覧ください。 WPFormsに新しい通貨記号を作成する方法.
alias:decimal:小数の有無にかかわらず、任意の数値を入力できる。alias:integer:任意の整数値を入力できる。alias:percentage:1～100の任意の数値をパーセンテージで入力できる。alias:url:で始まるURLの入力マスクを追加する。http://.alias:email:メールアドレスの入力マスクを追加します。
注： ということを覚えておいてほしい。 alias:email そして alias:URL では、ユーザーが有効なEメールアドレスまたはウェブアドレス形式を入力したことを確認しません。このような情報の入力を検証したい場合は 電子メール そして ウェブサイト / URL フィールドの代わりに
よくある質問
ここでは、WPFormsの入力マスクに関するよくある質問について説明します。
入力マスクで長さの制限を使用すると、単一行テキスト・フィールドの文字入力が制限されますか?
はい。1行テキストフィールドで文字制限と入力マスクを一緒に追加すると、ダッシュのような記号も制限の一部としてカウントされます。ユーザーが問題なく情報を入力できるようにするには、これらの余分な記号を含むように文字数制限を調整してください。
文字数制限の調整に関する詳細は、文字数制限と単語制限に関するガイドをご参照ください。
以上です！これで、フォームのフィールドに特定の書式を要求するカスタム入力マスクを作成できるようになりました。
次に、フォームをもっとコンパクトにしたいと思いませんか？マルチカラムレイアウトを使ったチュートリアルで、フォームのフィールドを行に並べる方法をぜひご覧ください。