カスタム入力マスクの使用

フォームフィールドに特定の形式を要求しますか？カスタム入力マスクを使用すると、ユーザーがフィールドに入力できる値のルールを設定できます。これは、国際電話番号、郵便番号などに役立ちます。

このチュートリアルでは、カスタム入力マスクを作成してフォームフィールドに追加する方法を説明します。

開始する前に、WPFormsがWordPressサイトにインストールされ、有効化されていることを確認してください。次に、新しいフォームを作成するか、既存のフォームを編集します。

カスタム入力マスクの追加

1行テキストフィールドにカスタム入力マスクを追加できます。このフィールドタイプをフォームに追加したら、それをクリックしてフィールドオプションパネルを開きます。

フィールドオプション内で、高度な設定タブをクリックする必要があります。次に、入力マスクフィールドにルールを追加できます。

基本的な入力マスク

カスタム入力マスクのルールを作成するには、特定の特殊文字セットを使用する必要があります。

• 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

ユーザーがこのフィールド内をクリックすると、9の代わりにブランクが表示されます。+1、括弧、ハイフンはフィールドに自動的に入力されるため、ユーザーは数字を入力するだけで済みます。

入力マスクが部分的にしか入力されていない場合、ユーザーはフォームを送信できないことに注意することが重要です。入力マスクで要求されている文字数と種類を入力しないと、「すべてのブランクを入力してください」という検証メッセージが表示されます。

ただし、フィールドに入力マスクを追加しても、フィールドが必須になるわけではありません。必須ではないフィールドの入力マスクが完全に空の場合でも、ユーザーはフォームを送信できます。

入力マスクへのオプション文字の追加

フィールドに特定の形式を要求したいが、柔軟な文字数を許可する必要がある場合もあります。たとえば、多くの国では、異なる地域の電話番号には異なる桁数の数字が含まれる場合があります。

オプションの文字は角括弧 [] の中に配置します。例：

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

特殊マスク文字のエスケープ

入力マスクは、必須フォーマットを作成するために特殊文字を使用するため、意図しないブランクとして表示される可能性のある特定の文字、数字、記号があります。

特殊入力マスク文字がフロントエンドでブランクに変換されるのを防ぐには、文字の前にバックスラッシュを2つ（\\）追加するだけです。

例として、InstagramのURLの入力マスクを作成しましょう。

入力マスクをhttps://instagram.com/*{1,30}と入力すると、すべてのa文字が、ユーザーがフロントエンドで入力する必要のあるブランクに変換されます。

これを修正するには、ブランクに変換したくないaの前に二重バックスラッシュを追加するだけです。したがって、この例では、フィールドオプションにhttps://inst\\agr\\am.com/*{1,30}として入力マスクを入力します。

これで、埋め込みフォーム内でこのフィールドを表示すると、意図した場所にのみブランクが表示されます。

入力マスクにおける特殊文字のエスケープの追加例

商品SKU（数字2桁、それに続く数字または大文字英字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は数値）の前に特殊文字を使用すると、ユーザーが入力できる文字数を指定できます。

文字範囲指定の入力マスク例

Facebook URL（5～50文字）:

• マスク: https://f\\acebook.com/*****[*{0,45}]
• 入力例: https://facebook.com/wpforms または https://facebook.com/monsterinsights

Twitterハンドル名（4～15文字の数字、大文字、小文字）

• マスク: @****[*{0,11}]
• 入力例: @easywpforms または @WPBeginner

特定のドメインのメールアドレス（1～51文字）:

• マスク: *[*{0,50}]@mysite.com
• 入力例: [email protected] または [email protected]

商品SKU（8～11文字、数字または大文字）:

• マスク: &{4}-&{4}[&{0,3}]
• 入力例: A987-BC65 または A987-BC65D43

複数の入力値を許可するマスク

別の方法として、複数の入力値を許可する入力マスクを作成することもできます。その場合は、バックスラッシュの後に、縦線で区切られた許可される値を括弧で囲んで入力します。例: \(x|y)。

複数の入力値を許可するマスクの例

電話番号（国コード付き、米国+1、オーストラリア+61、メキシコ+52）

• マスク: +\(1|61|52) 9999999999
• 入力例: +1 2127893920 または +52 3307490285

アカウント番号（TNまたはKYで始まる）

• マスク: \(TN|KY)9{10}
• 入力例：TN3756284765 または KY2975387529

日付/時刻マスク

カスタム入力マスクを使用して、特定の日付または時刻形式を必須にすることもできます。

日付または時刻の入力マスクを設定するには、まずdate:とそれに続く必須の形式を入力する必要があります。

日付マスク

以下のオプションを使用して、ニーズに合ったカスタム日付入力マスクを作成できます。

• d：月の日付（数字）。1桁の日付には先頭にゼロは付きません。
• dd：月の日付（数字）。1桁の日付には先頭にゼロが付きます。
• m：月（数字）。1桁の月には先頭にゼロは付きません。
• mm：月（数字）。1桁の月には先頭にゼロが付きます。
• yy：年の下2桁。10未満の年には先頭にゼロが付きます。
• yyyy：年の4桁

例として、date:dd/mm/yyyyは12/08/2021のような日付を要求します。ユーザーがフォームにアクセスしてフィールドにカーソルを合わせると、必須形式のプレースホルダーが表示されます。

時刻マスク

以下のオプションを使用して、ニーズに合ったカスタム時刻入力マスクを作成できます。

• h：時（12時間制）。1桁の時には先頭にゼロは付きません。
• hh：時（12時間制）。1桁の時には先頭にゼロが付きます。
• H：時（24時間制）。1桁の時には先頭にゼロは付きません。
• HH：時（24時間制）。1桁の時には先頭にゼロが付きます。
• M：分（数字）。1桁の分には先頭にゼロは付きません。月との競合を避けるため、大文字のMを使用します。
• MM：分（数字）。1桁の分には先頭にゼロが付きます。月との競合を避けるため、大文字のMMを使用します。
• s：秒（数字）。1桁の秒には先頭にゼロは付きません。
• ss：秒（数字）。1桁の秒には先頭にゼロが付きます。
• l：ミリ秒。3桁。
• L：ミリ秒。2桁。
• t：小文字の1文字の時刻マーカ文字列：aまたはp。
• tt：2文字の時刻マーカ文字列：amまたはpm。
• T：大文字の1文字の時刻マーカ文字列：AまたはP。
• TT：2文字の時刻マーカ文字列：AMまたはPM。

例として、date:h:MM を使用すると、ユーザーは 8:30 のような時刻を入力できます。フロントエンドでは、ユーザーがフィールドにカーソルを合わせると、フィールドにプレースホルダーが表示されます。

エイリアスを使用した入力マスクの追加

事前パッケージ化された入力マスクを使用するには、[高度なフィールドオプション] の [入力マスク] フィールドにエイリアスを入力できます。

WPForms で利用可能な入力マスクエイリアスには、次のものがあります。

• alias:numeric: ユーザーは任意の数値を入力できます。
• alias:currency: ユーザーは 0.00 の形式で数値を入力できます。

• alias:decimal: ユーザーは、小数のあるなしにかかわらず、任意の数値を入力できます。
• alias:integer: ユーザーは、任意の整数値を入力できます。
• alias:percentage: ユーザーは、1 ～ 100 の任意の数値をパーセンテージとして入力できます。
• alias:url: http:// で始まる URL の入力マスクを追加します。
• alias:email: メールアドレスの入力マスクを追加します。

よくある質問

ここでは、WPForms の入力マスクに関する最も一般的な質問のいくつかを説明します。

フィールド設定で [入力マスク] オプションが見つかりません。どこにありますか？

[入力マスク] オプションは、[一行テキスト] フィールドでのみ利用できます。電話、メール、数値、段落などの他のフィールドタイプには表示されません。

カスタム入力マスクを使用するには、フォームに [一行テキスト] フィールドを追加し、それをクリックして [フィールドオプション] を開き、[高度な設定] タブに移動すると、[入力マスク] フィールドが見つかります。

[文字数制限] を入力マスクと併用すると、[一行テキスト] フィールドでの文字入力を制限できますか？

はい。[一行テキスト] フィールドで文字数制限と入力マスクを組み合わせると、制限にはダッシュなどの記号を含むすべての文字が含まれます。ユーザーが問題なく情報を入力できるように、これらの追加記号を含めるように文字数制限を調整してください。

文字数制限の調整の詳細については、文字数と単語数の制限に関するガイドを参照してください。

入力マスクフィールドからエスケープされた特殊文字が削除されるのはなぜですか？

デフォルトでは、WordPress はフォームデータを処理する際にバックスラッシュを削除します。特殊なマスク文字 (\9 や \* など) をエスケープしていて、それらが消えていることに気づいた場合は、フォームデータのスラッシュを有効にすることで保持できます。

これを行うには、/* That's all, stop editing! */ という行の直前に、次の行をサイトの wp-config.php ファイルに追加します。

define( 'WPFORMS_ENABLE_FORM_DATA_SLASHING', true );

これにより、バックスラッシュが保持され、入力マスクが正しく機能するようになります。サイトのwp-config.phpファイルを編集する方法がわからない場合は、WPBeginnerのWordPressでwp-config.phpファイルを編集する方法に関するガイドを参照してください。

これで完了です！カスタム入力マスクを作成して、フォームのフィールドに特定の形式を要求できるようになりました。

次に、フォームをよりコンパクトにしたいですか？フォーム内のフィールドを行に配置する方法については、複数列レイアウトの使用方法に関するチュートリアルを確認してください。