AI要約
サイトのフォームに入力マスクを作成する方法を学びたいですか？
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文字の数字または大文字/小文字の英字）：
- マスク：
@**** [***********] - 入力例： @easywpforms
高度な入力マスク記号のヘルプについては、WordPressフォームへの入力マスクの追加に関するこのチュートリアルをご覧ください。
フォームフィールドに入力マスクを作成する方法
入力マスクがどのようなものか理解できたところで、実際に作成してみましょう。
1. 新しいWordPressフォームを作成する
まず、WPFormsプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressにプラグインをインストールする方法のステップバイステップガイドに従ってください。
次に、新しいフォームを作成する必要があります。テストの簡単な開始点として、シンプルな問い合わせフォームの使用をお勧めします。
2. 単一行テキストフィールドを追加する
問い合わせフォームに入力マスクを追加するには、一行テキストフォームフィールドを追加する必要があります。
左側のパネルからフォームフィールドをフォームプレビューにドラッグアンドドロップします。
これが完了したら、右側のフォームフィールドをクリックしてフィールドオプションパネルを開きます。
高度な設定タブをクリックします。ここでカスタム入力マスクを定義します。
この例では、フォームに入力する人にアメリカの郵便番号を入力してもらいます。
このマスクは、フィールドが5桁の数字のみを受け付けるように制限します。
保存をクリックします。
3. サイトにフォームを追加する
問い合わせフォームが入力マスクでカスタマイズされたので、いよいよフォームをウェブサイトに埋め込む時間です。
「埋め込み」ボタンをクリックし、フォームの場所を選択します。
次に、投稿またはページを公開して、問い合わせフォームがサイト訪問者に表示されるようにします。ご覧ください。
郵便番号の入力を完了するようにユーザーを誘導する下線に注目してください。
次に、フォーム送信を管理しましょう
これで完了です！サイトのフォームに入力マスクを作成する方法がわかりました。
フォームの動作を制御する他の方法を探している場合は、これらのリソースを確認してください。
- フォームロッカーアドオンの簡単なガイドで、日付に基づいてフォームエントリを制限する
- 年齢確認プラグインで、未成年者がフォームに入力するのを防ぎます。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
もしこの記事がお役に立ったなら、WordPressの無料チュートリアルやガイドをもっと知るために、FacebookとTwitterでフォローしてください。
一行フィールドの最小/最大長を定義できますか？また、正しく検証されますか？
クリスチャンさん、こんにちは。
現在、組み込みオプションはありませんが、カスタムコードを使用する場合は、最大文字数制限の設定に関する開発者向けドキュメントがあります。
もし試してみたい場合は、このようなカスタムコードをサイトに追加するための追加チュートリアルをご覧ください。
お役に立てば幸いです！ 🙂
「入力マスク」という名前のフィールドがない場合はどうなりますか？高度なオプションの下にCSSクラスフィールドはありませんか？
ディアンヌさん、こんにちは。
ご迷惑をおかけして申し訳ありません！入力マスクを追加する際は、1行テキストフィールドを使用していることを確認してください（現在、入力マスクを許可しているのはこのフィールドタイプのみです）。また、これは比較的新しい機能ですので、WPFormsプラグインが最新の状態になっていることを確認してください。
これを試しても期待通りのオプションが表示されない場合は、ご連絡ください。さらにサポートさせていただきます。WPFormsライセンスをお持ちの場合は、メールサポートをご利用いただけますので、サポートチケットを送信してください。
それ以外の場合は、WPForms Lite WordPress.orgサポートフォーラムで限定的な無料サポートを提供しています。
ありがとうございます 🙂
こんにちは、この記事をご覧ください：https://wpforms.com/docs/how-to-use-custom-input-masks/
「mysite.com」のメールアドレスの例の入力マスクを使用しています
マスク： *[*{0,50}]@mysite.com
入力例：[email protected] または [email protected]
しかし、あなたのウェブサイトに「a」という文字が含まれている場合はどうなりますか？例えば…
このレイヤーマスクを使用： *[*{0,50}]@mydomain.com
実際には、ドメインの「a」が空白になるフィールドが表示されます。
入力例： _______@mydom_in.com
レイヤーマスクを、文字列「mydomain.com」全体がそのまま維持されるようにフォーマットするにはどうすればよいですか？
よろしくお願いいたします！
Reさん、こんにちは。
ご迷惑をおかけして申し訳ありません！ご指摘の問題を再現し、修正のためにチームに共有しました。お知らせいただきありがとうございます。 🙂
こんにちは。入力マスクツールを使用して、一部のフィールドの文字入力を制限したいと思います。
このマスクを使用しています： *[*{0,30}]。
しかし、これには「スペース」が文字として含まれていません。
30文字の制限でスペースを文字として含めるには、どのような入力マスクを使用できますか？
アリシアさん、こんにちは。
現在のところ、当社の入力マスクではこの方法で「スペース」要件を提供していません。代わりに、カスタムコードを使用してこの文字制限を追加することを検討してください（詳細はこちらのドキュメントをご覧ください）。
そのドキュメントのコードはスペースを文字としてカウントするため、お考えのものにより近いものになるはずです。
また、参考までに、このようなカスタムコードをサイトに追加する方法はこちらです。
お役に立てれば幸いです 🙂
RE CARLSONと同じ問題を抱えています。
—
しかし、あなたのウェブサイトに「a」という文字が含まれている場合はどうなりますか？
—
これに対する修正方法はありますか？
よろしくお願いします。
アランさん、こんにちは。
良いニュースがあります。この問題に対する解決策があります 🙂
入力エリアの一部にならずに「a」を追加するには、`\\` を使用してエスケープできます。たとえば、入力マスクとして「this is \\a test aaa」を入力した場合、結果は「this is a test ___」のようになります。
したがって、そのまま保持したい（_に変換されたくない）A、a、または9の前に二重バックスラッシュを付けるようにしてください。
お役に立てれば幸いです 🙂
こんにちは、
大文字英数字（0-9またはA-Z）を文字間のスペースと組み合わせる必要があります。「&」ではスペースが許可されないようです。
エリヤスさん、こんにちは。
スペースを許可する特別な文字はありません。代わりに、必要な「&」文字の間にスペースを追加するだけで、「&&&& &&&&」のように入力マスクフィールドを読み取ることができます。
お役に立てれば幸いです 🙂
フィールドが6〜9の数字の範囲から始まるようにするにはどうすればよいですか？ WPForms Basicを購入しました。
例
7898981226
8985607458
9989878774
ムナフさん、こんにちは！
シングルラインテキストフィールドのカスタム入力マスクを作成できますが、数字の範囲を使用する組み込みオプションはありません。
たとえば、「\\799999」のように設定すると、先頭に「7」のみが許可され、その後5桁の任意の数字が続きますが、残念ながら先頭に7または8または9を選択するルールはありません。
参考になれば幸いですが、WPFormsでカスタム入力マスクを使用する方法に関する別の優れたチュートリアルがここにあります。
ご迷惑をおかけして申し訳ありません！
では、良い一日を 🙂
現在、WPFormsを無料で試用しており、既存のソリューションとの互換性をテストしています。しかし、あなたが提案した「https://www.f\\acebook.com/*{1,22}」のような簡単なマスクを「シングルラインテキスト」フィールドでカスタマイズしようとすると、? . / ; のような単純な特殊文字が受け入れられないことに気づきました。これは無料ユーザーに課せられた意図的な制限ですか、それともマスク内の特殊文字の入力を許可するために * を置き換えるべき記号について教えていただけますか？
ロドリゴさん、こんにちは。
申し訳ありませんが、ご質問の意図がよくわかりません。お時間のある時に、明確にしていただけますでしょうか。または、無料のプラグインWPForms Liteをご利用の場合は、無料の限定サポートを提供しているサポートフォーラムをご覧ください。
ありがとうございます！🙂
3桁ごとにカンマを追加することは可能ですか？例えば99,999,999のような形式です。
Waqasさん、桁数が固定されている場合は可能です。例えば、この入力マスクは9桁を表示し、3桁ごとにカンマを表示します：999\,999\,999
お役に立てば幸いです！
入力マスクで特殊文字を許可するにはどうすればよいですか？
Afifさん、この記事には高度な入力マスクのチュートリアルがいくつかあり、文字の追加方法を説明しています。
詳細については、サポートまでご連絡ください。WPFormsライセンスをお持ちの場合は、メールサポートをご利用いただけますので、サポートチケットを送信してください。それ以外の場合は、WPForms Lite WordPress.orgサポートフォーラムで限定的な無料サポートを提供しています。
ありがとうございます 🙂
シングルラインテキストフィールドに不正な文字を入れたくありません。
Rahulさん、フォームフィールドで特殊文字を制限する方法に関するチュートリアルをご覧になることをお勧めします。
お役に立てば幸いです！
入力マスクで15文字以下を許可するにはどうすればよいですか？
Yusufさん、カスタム入力マスクのルールを作成するには、特定の記号セットを使用する必要があります。（適切な記号を15回追加することを忘れないでください。）
お役に立てば幸いです！ 🙂
こんにちは、入力マスクが機能していないようです。マスクが有効になっているにもかかわらず、テキストフィールドは何でも入力できてしまいます。何か助けていただけますか？よろしくお願いします。
Antonioさん、申し訳ありません！喜んでお手伝いさせていただきます。
WPFormsライセンスをお持ちの場合は、メールサポートをご利用いただけますので、サポートチケットを送信してください。それ以外の場合は、WPForms Lite WordPress.org サポートフォーラムで限定的な無料サポートを提供しています。
ありがとうございます！🙂
こんにちは。
シングルラインテキストで名前フィールドを作成しています。アルファベットとスペースのみを追加できるようにしたいです。このために、入力マスクをa{1,50}と設定しました。これはアルファベットを受け付けますが、スペースを追加できません。解決策を教えてください。
Amritaさん、申し訳ありませんが、入力マスクはこの種のユースケースには適していません。入力マスクは、電話番号やID番号など、入力に特定の構造を提供するものです。入力マスクではスペースを使用できません。
ご希望のことを実現するにはカスタムコーディング（通常はjQueryまたはJavaScript）が必要になりますが、申し訳ありませんが、このレベルのカスタマイズのサポートは提供できません。このスレッドがいくつかアイデアを提供できるかもしれません。
申し訳ありませんが、これに対する解決策を提供することはできません。ただし、アクティブなサブスクリプションをお持ちの場合は、さらにご質問があればお問い合わせください。お持ちでない場合は、サポートフォーラムに遠慮なくご質問をお寄せください。
皆さん、こんにちは
このようにマスクを作成するにはどうすればよいですか？
+55 (99) 9 9999-9999 または +55 (99) 9999-9999 を同じ入力フィールドに入力します。
tks,
こんにちは！この質問は複数の記事に投稿されているようですので、ここでまとめて回答させていただきます。
申し訳ありませんが、入力マスクは入力される順序で機能するため、オプションの数字が配置される場所を指定することはできません。技術的には、オプションの数字をオプションのままにしておくことは可能ですが、ユーザーは入力フィールドのその文字位置にスペースを入力して「スキップ」し、その後フィールドの残りの部分を入力する必要があります。
カスタムコーディングで可能になるはずですが、申し訳ありませんが、そのようなカスタマイズはサポートの範囲外です。カスタム開発オプションの検討をご希望の場合は、Codeable の利用を強くお勧めします。Codeable は、開発者のスキルとコミュニケーション能力を確実に把握するためにすべての開発者をスクリーニングし、最適な開発者との接続とコミュニケーションのプロセス全体をガイドします。
こちらが Codeable の使用方法に関するチュートリアルです。このプロセスがどのように機能するかについての詳細が記載されています。
または、カスタム開発のヘルプを（長期的に）継続して利用できるチームが必要な場合は、WPBuffsも検討してみてください。
これで明確になったことを願っています 🙂 これについてさらに質問がある場合は、アクティブなサブスクリプションがある場合はお問い合わせください。そうでない場合は、サポートフォーラムに質問を投稿してください。
電話番号要素には入力マスクがありませんが、その機能は可能ですか？
国コードセレクターが提供されている電話番号要素で入力マスクを使用したいと考えています。通常のテキスト入力では（入力マスクは提供されますが）それができません。
ありがとうございます。
Mark
Markさん、こんにちは。
電話フィールドのカスタムマスクを設定する組み込み機能はありません。ただし、これはシングルラインテキストフィールドを使用して、ここで示されているようにカスタム入力マスクを設定することで実現できます。
お役に立てば幸いです！ 🙂
数値フィールドに小数点入力を必須にすることは可能ですか？
つまり、ユーザーは常に整数 + x桁の小数を入力を求められるということですか？
例:
0.015
0.792
0.28
1.256
こんにちは、シングルラインテキストフィールドで次の入力マスクを使用すると可能になると思います。[99.999] こちらが同じものを実演するスクリーンキャストです。
お役に立てば幸いです！
wpformsの例のような通貨マスク（$1,252.33）を作成する方法を知っている人はいますか？
こんにちは、Cristian。それを行うには、次の入力マスクを使用できます：$ [[9],999.99]。
お役に立てば幸いです！
EMP2000の入力マスクを作成したいのですが、どうすればよいですか？
カシミール様 – 次の入力マスクを使用すると、それを実現できます: EMP2[9999]。
お役に立てば幸いです！
こんにちは！オプションの金額の入力マスクを作成するにはどうすればよいですか？
たとえば、$1,000,000 または $250,000 のように、金額に応じて間にカンマを追加しますか？
マリアナ様、残念ながら、ご説明いただいたようなオプション形式の入力マスクは組み込みオプションとしては提供されていません。しかし、非常に役立つとは思います。機能リクエストとしてメモし、今後のロードマップ計画で考慮させていただきます。
ありがとうございます。良い一日を！
正しい車両識別番号（VIN）を確認する方法はありますか？
ライチ様 – 車両識別番号（VIN）の正しい形式を検証するために、カスタム入力マスクを作成することは確かに可能です。
ありがとうございます 🙂
こんにちは – 入力マスクを使用してスペースを許可しないようにすることはできますか？
たとえば、ユーザーが「AA 9999」と入力した場合、マスクは「AA9999」を強制しますか？
または、「AA9999[_]」のような末尾または先頭のスペースは、スペースなしの「AA9999」として入力されますか？