サイトのフォームに入力マスクを作成する方法を知りたいですか？
WordPressのフォームへのデータ入力方法をカスタマイズすることで、ユーザーエクスペリエンスが向上し、毎回正しいデータがフォームに入力されるようになります。
この記事で
入力マスクとは何か？
入力マスクは、フィールドに入力できる文字を制限する方法である。
例えば、数字またはテキストのみを受け付けるフィールドに制限することができます。また、文字数を制限したい場合もあるでしょう。
入力マスクは、電話番号やソーシャルメディアのユーザー名など、常に同じフォーマットに従っているものに最適です。
入力マスクの仕組み
入力マスクは以下の文字を使用して、受け入れられるデータのテンプレートを構築する：
- 9は任意の数字（0～9）を表す
- aは任意の小文字または大文字を表す。
- Aは 使用できる文字を大文字に制限します。
- &はフィールドを大文字の英数字 (0-9 または A-Z) に制限します。
- * 任意の文字または数字を入力可能（0～9、a～z、A～Z）
また、入力マスクにハイフンや括弧（ ）などを追加することもできます。これは特に、サイトのフォームに電話番号を入力してもらいたい場合に便利です。
括弧でくくった後に任意の文字を追加したい場合は、角括弧[ ] でくくります。
例えば、この入力マスクは最低4文字を必要とするが、もっと長い入力も許される：
**** [***********]
入力マスクの例
入力マスクが何であるかわかったところで、WordPressのフォームで使える最も基本的な例を見てみましょう。
アメリカ合衆国 郵便番号
- マスク：
99999 - ユーザー入力の例：89023
アメリカ合衆国の郵便番号、オプションでプラス4：
- マスク：
99999 [-9999] - ユーザー入力の例89023または89023-5678
6-8文字のユーザー名（最初の文字は大文字、残りは小文字）：
- マスク：
Aaaaaa [aa] - ユーザー入力の例MinnieまたはMinniems
X (旧Twitter) ユーザー名に4-15個の数字または大文字/小文字を使用：
- マスク：
@**** [***********] - ユーザー入力の例ユーザー入力
高度な入力マスクシンボルについては、WordPressフォームに入力マスクを追加するチュートリアルをご覧ください。
フォームフィールドに入力マスクを作成する方法
さて、入力マスクがどういうものかを理解したところで、実際に作ってみよう。
1.新しい WordPress フォームを作成する
まず最初に行う必要があるのは、WPFormsプラグインをインストールして有効化することです。詳細については、WordPressにプラグインをインストールする方法についてのステップバイステップガイドに従ってください。
次に、新しいフォームを作成する必要があります。テスト用の簡単な出発点としてSimple Contact Formを使うことをお勧めします。
2.一行テキストフィールドの追加
コンタクトフォームに入力マスクを追加するには、一行テキストフォームフィールドを 追加する必要があります。
フォームフィールドを左パネルからフォームプレビューにドラッグ＆ドロップします。
これができたら、右側のフォームフィールドをクリックしてフィールドオプションパネルを開きます。
詳細」タブをクリックする。ここでカスタム入力マスクを定義します。
この例では、フォームに入力する人に米国の郵便番号を入力してもらいます：
このマスクは、5つの数字しか受け付けないようにフィールドを制限する。
保存をクリックする。
3.サイトにフォームを追加する
これでコンタクトフォームが入力マスクでカスタマイズされたので、次はあなたのウェブサイトにフォームを埋め込む番です。
埋め込みボタンをクリックし、フォームの場所を選択します。
次に、投稿またはページを公開し、サイト訪問者にコンタクトフォームが表示されるようにします。見てみましょう：
アンダースコアが郵便番号の記入を完了するようユーザーを誘導していることに注目してほしい。
次に、フォーム送信をコントロールする
これで完成です！これで、あなたのサイトのフォームに入力マスクを作成する方法がわかりました。
フォームの機能をコントロールする方法をお探しなら、以下のリソースをご覧ください：
- Form Locker アドオンのシンプルなガイドで、フォームエントリーを日付で制限しましょう。
- 年齢確認プラグインで、未成年の訪問者がフォームに入力するのを阻止しましょう。
フォームを作る準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proにはたくさんの無料テンプレートが含まれており、14日間の返金保証がついています。
この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。
例えば1行のフィールドの最小/最大長を定義することはできますか？
こんにちは、クリスチャン、
現在のところ、このためのビルトインオプションはありませんが、カスタムコードを作成する場合は、最大文字数制限を設定するための開発者向けドキュメントがあります。
このようなカスタムコードをサイトに追加する方法については、こちらのチュートリアルをご覧ください。
お役に立てれば幸いです！ 🙂。
Input Maskというフィールドがない場合はどうなりますか？ 詳細オプション」の「CSSクラス」フィールドの下に何もないのですか？
こんにちは、ディアンヌ、
ご迷惑をおかけして申し訳ありません！入力マスクを追加する場合は、必ず単一行テキストフィールドを使用してください（現在、入力マスクを許可する唯一のフィールドタイプです）。また、これは最近の機能なので、WPFormsプラグインが完全に最新であることを確認してください。
もしこれを試しても期待するオプションが表示されない場合は、ご連絡ください。WPFormsのライセンスをお持ちの方は、メールサポートをご利用いただけますので、サポートチケットを送信してください。
それ以外の場合は、WPForms Lite WordPress.orgのサポートフォーラムで限定的な無料サポートを提供しています。
ありがとう🙂。
https://wpforms.com/docs/how-to-use-custom-input-masks/
入力マスクの例として、"mysite.com "のEメールアドレスを使用します。
Mask: *[*{0,50}]@mysite.com
Example Input: [email protected] or [email protected]
しかし、もしあなたのウェブサイトに "a "の文字が入っていたら？ 例えば...
Using this layer mask: *[*{0,50}]@mydomain.com
actually renders a field that has a blank for the “a” in domain.
Example input: _______@mydom_in.com
"mydomain.com "という文字列全体がそのまま残るようにレイヤーマスクをフォーマットするには？
よろしくお願いします！
こんにちは、Re、
ご迷惑をおかけして申し訳ありません！ご指摘の問題を再現し、私たちのチームと共有しました。ご報告ありがとうございます。
こんにちは。入力マスクツールを使って、いくつかのフィールドの文字入力を制限したいのですが。
I’m using this mask: *[*{0,30}].
ただし、「スペース」は文字として含まれていない。
30文字という制限の中でスペースを1文字として含めるには、どのような入力マスクを使用すればよいですか？
こんにちは、アリシア、
現在のところ、私たちの入力マスクはこのような「スペース」要件を提供していません。代わりに、ちょっとしたカスタムコードを使ってこの文字数制限を追加することを検討してみてください（詳細はこちらのドキュメントをご覧ください）。
そのドキュメントにあるコードは、スペースを文字としてカウントするので、よりあなたの考えているように動作するはずだ。
参考までに、このようなカスタムコードをサイトに追加する方法を紹介しよう。
お役に立てれば幸いです！ 🙂。
私もRE CARLSONと同じ問題を抱えている。
-
しかし、もしあなたのウェブサイトに "a "の文字が入っていたら？
-
修正方法はありますか？
ありがとうございます。
こんにちは、アラン、
朗報です。解決策があります🙂。
a "を入力エリアの一部とせずに追加するには、`a`をエスケープする。例えば、入力マスクとして次のように入力するとする：this is \a test aaa` と入力すると、結局こうなる：「という入力になる。
そのため、A、a、9をそのまま（_に変換せずに）使いたい場合は、必ずバックスラッシュを二重にしてください。
お役に立てれば幸いです！ 🙂。
こんにちは、
大文字の英数字(0-9またはA-Z)を、文字と文字の間にスペースを入れて結合したいのですが。どうやら"&"はスペースを許さないようです。
こんにちは、エリヤス、
空白を許容する特別な文字はありません。代わりに、好きな&文字の間にスペースを追加するだけで、入力マスク・フィールドを"&&&&&"と読ませることができます。
お役に立てれば幸いです！ 🙂。
6～9の数字のみで始まるフィールドを受け付けるにはどうすればよいですか？購入したWPForms Basicを使っています。
例
7898981226
8985607458
9989878774
こんにちは、ムナフ！
1行テキストフィールドにはカスタム入力マスクを作成できますが、数字範囲を使用する組み込みオプションはありません。
So you can have it like this for example “\\799999” and it will allow only “7” in the beginning and then 5 more any digits, but we don’t have rules to choose 7 OR 8 OR 9 there in the beginning, unfortunately.
WPFormsでカスタム入力マスクを使用する方法について、もう1つ素晴らしいチュートリアルがあります。
混乱を招いたことをお詫びする！
良い一日を🙂。
Estou iniciando o uso do WPFroms ainda de forma gratuita para testes de compatibilidade com soluções que já tenho implantadas, contudo tentando personalizar uma mascara simples sugerida por vocês como “https://www.f\\acebook.com/*{1,22}” em um campo de “texto de linha unica” percebo que não são aceitos caracteres especiais simples como ? . ou / ; isso é uma limitação proposital impostas a usuários gratuitos ou poderiam me informar por qual simbolo deveria substituir o de * para permitir a entrada de caracteres especiais na mascara.
ロドリゴ、こんにちは、
申し訳ありませんが、あなたの質問に少し混乱しています。もしWPForms Liteという無料のプラグインをお使いでしたら、サポートフォーラムをご覧ください。
ありがとう！ ᙂ。
例えば99,999,999のように、3桁ごとにコンマを追加することは可能ですか？
桁数が決まっているのであれば、可能です。例えば、この入力マスクは9桁を表示し、3桁ごとにカンマを表示します。
参考になれば幸いだ！
入力マスクに特殊文字を許可するには？
Hey、Afif - 私たちは、いくつかの文字を追加する方法を説明するこの記事のいくつかの高度な入力マスクのチュートリアルを用意しています。
この件に関する詳しいヘルプについては、サポートまでご連絡ください。WPFormsのライセンスをお持ちの方は、メールサポートをご利用いただけますので、サポートチケットをお送りください。それ以外の場合は、WPForms Lite WordPress.orgのサポートフォーラムで限定的な無料サポートを提供しています。
ありがとう🙂。
一行テキストフィールドに不正な文字を入力したくない
Rahul -フォームフィールドの特殊文字を制限する方法については、こちらのチュートリアルをご覧になることをお勧めします。
参考になれば幸いだ！
入力マスクに15文字以下を許可するには？
カスタム入力マスクのルールを作成するには、特定の記号セットを使用する必要があります。(適切な記号を15回追加することを忘れないでください）。
お役に立てれば幸いです！ 🙂。
こんにちは、私の入力マスクはもう機能していないようです。助けてください。
こんにちは、アントニオ！喜んでお手伝いさせていただきます。
WPFormsのライセンスをお持ちの方は、メールサポートをご利用いただけますので、サポートチケットを送信してください。それ以外の場合は、WPForms Lite WordPress.orgのサポートフォーラムで限定的な無料サポートを提供しています。
ありがとう！ ᙂ。
こんにちは、
1行のテキストとアルファベットとスペースだけを追加する名前フィールドを作成しています。このため、入力マストをa{1,50}として追加しました。アルファベットは入力できますが、スペースは入力できません。
こんにちは、アムリタ！申し訳ありませんが、入力マスクはこのようなユースケースには適していません。入力に特定の構造、たとえば電話番号やID番号などを提供するためのものだからです。スペースは入力マスクでは利用できません。
しかし、申し訳ありませんが、私たちはこのようなカスタマイズのサポートを提供することができません。このスレッドにいくつかのアイデアがあるかもしれません。
この件に関して解決策を提供できないのは残念ですが、さらにご質問がある場合は、有効なサブスクリプションをお持ちであれば、弊社までご連絡ください。そうでない場合は、遠慮なくサポートフォーラムに質問をお寄せください。
やあ、みんな
この方法でマスクを作るには？
+55 (99) 9 9999-9999または+55 (99) 9999-9999。
tks、
こんにちは！この質問は複数の記事に投稿されているようなので、ここでは一箇所にまとめて取り上げることにします。
申し訳ありませんが、入力マスクは入力された順番で動作するため、任意の数字をどこに置くかを指定することはできません。技術的には、オプションの数字をオプションのままにすることは可能ですが、その場合、ユーザーはその文字の位置にスペースを入力してその文字を「スキップ」し、フィールドの残りの部分を入力し続ける必要があります。
いくつかのカスタムコーディングで可能なはずですが、そのようなカスタマイズは申し訳ありませんが、私たちのサポートの範囲外です。カスタム開発オプションを検討される場合は、Codeableのご利用を強くお勧めします。Codeableは、すべての開発者をスクリーニングし、高いスキルとコミュニケーション能力を持つ開発者であることを確認します。
Codeableの使い方についてのチュートリアルは こちらです。
また、カスタム開発のヘルプのために（長期的に）戻ってくることができるチームが必要な場合は、WPBuffsをチェックアウトすることを検討するかもしれません。
この件に関してさらにご質問がある場合は、有効なサブスクリプションをお持ちであれば、私たちにご連絡ください。そうでない場合は、遠慮なくサポートフォーラムに質問をお寄せください。
電話番号要素には入力マスキング機能がありませんが、その機能は可能ですか？
私たちは、電話番号要素で入力マスキングを使いたいのです。なぜなら、電話番号要素には国番号セレクタがあるからです。
ありがとう
マーク
マーク、こんにちは、
電話番号フィールドにカスタムマスクを設定する機能は組み込まれていません。しかし、1行テキストフィールドを使用して、ここに示すようにカスタム入力マスクを設定することができます。
お役に立てれば幸いです！ 🙂。
数値フィールドに小数の入力を要求することは可能ですか？
では、ユーザーは常に整数＋X桁の小数を入力しなければならないのか？
例えば、こうだ：
0.015
0.792
0.28
1.256
99.999]という1行のテキスト・フィールドに次のような入力マスクを使用すれば可能だと思います。
参考になれば幸いだ！
wpformsでコインマスクを作る方法を知っている人はいますか？
Heyクリスティアン - あなたはそれを達成するために、次の入力マスクを使用することができます：$ [[9],999.99].
参考になれば幸いだ！
EMP2000の入力マスクを作成したいのですが、どうすればよいでしょうか？
EMP2[9999]を使用することができます。
参考になれば幸いだ！
こんにちは！任意の金額を入力するマスクを作成する方法を教えてください。
例えば、$1,000,000や$250,000のように、金額に応じて間にカンマを追加するには？
こんにちは、マリアナ。残念ながら、あなたがおっしゃるような入力マスクを使ったオプションのフォーマットは組み込まれていません。でも、それがあればとても便利だと思います。機能要望をメモしておきましたので、今後のロードマップを計画する際、レーダーに留めておきます。
ありがとう！
正しい車両識別番号（VIN）を確認する方法はありますか？
Litschi - 車両識別番号（VIN）の正しい形式を検証するためのカスタム入力マスクを作成することはできます。
ありがとう🙂。
入力マスクを使用してスペースを許可しないようにできますか？
例えば、ユーザーが "AA 9999 "と入力した場合、マスクは "AA9999 "を強制するのでしょうか？
または、"AA9999[_]"のような末尾/先頭のスペースは、スペースなしで "AA9999 "として入力されますか？