Elementor フォームにカスタム検証ルールを追加する方法 (初心者向けガイド)

Elementor フォームのユーザーの入力を要件に一致させたいですか? 特定の形式や表現を制限する必要がありますか? あるいは、パーソナライズを追加したいとお考えですか? ウェブサイトのフォームにカスタム検証を適用することで、これを実現できます。

しかし、その効果にもかかわらず、すべてのウェブサイト所有者にとって簡単に手に入るわけではありません。コーディングの知識がなく、Elementorのようなページビルダーを使用している人にとっては特にそうです。なぜそれがわかるのでしょうか？それは、Elemntorユーザー専用のドラッグアンドドロップフォームビルダーツールがあるからです。 メットフォームビルダー インターフェイス内でカスタム検証を設定できます。

実装の詳細については、「Elementor フォームにカスタム検証ルールを追加する方法」チュートリアルをご覧ください。

Elementorフォームのカスタム検証とは

Elementor のカスタム検証は、Elementor のデフォルトの検証機能を超えて、フォーム フィールドにパーソナライズされたルールと基準を適用できるカスタマイズされたソリューションです。これにより、送信者に正しい情報またはデータのみを入力するように強制できます。たとえば、ユーザーに特定の形式でデータを入力するよう要求したり、フォーム フィールドで特定の文字を使用できないようにしたりできます。

カスタム検証により、ユーザー エクスペリエンスも向上します。間違った送信があった場合に即座にフィードバック メッセージを表示するのに役立ちます。 

Elementor フォームのデフォルト検証の制限

Elementorフォームウィジェットでカスタム検証プロセスを構成するには、アクションフックを使用する必要があります。アクションフックは、特定のフィールドタイプまたはすべてのフィールドタイプに使用できます。ここでの最大の欠点は、フックの実装に技術的な知識が必要になることです。これは、WordPressビルダーのノーコード哲学と一致しないため、技術に詳しくないElementorユーザーにとっては難しい場合があります。

さらに、Elementor のデフォルトの検証を使用する場合、いくつかの基本的なことだけに制限されます。特定の表現の要件を設定することはできません。コーディングしている場合でも、障害は常に存在します。

Elementor フォームにカスタム検証ルールを追加する方法

Elementor ユーザーにとってコードの使用の複雑さについてはすでに説明しました。Elementor フォームにカスタム検証ルールを追加する最良の方法は、ドラッグ アンド ドロップ WordPress ページ ビルダーと同じ環境に適合するプラグインを使用することです。

Elementor専用のフォームプラグインはMetFormです。このプラグインを使えば、コーディングの知識や長い学習曲線は必要ありません。 インストールとアクティベーション ガイド。

次に、 MetFormプラグインはフォームを作成します ウェブサイト用に、WordPress フォームを最初から作成することも、既成のテンプレートを使用することもできます。どちらの場合も、カスタム検証を適用できます。

それでは、MetForm を使用して Elementor フォームにカスタム検証を追加する方法を見てみましょう。

フォームにカスタム検証を適用することは、フォームをパーソナライズすることと同じです。すべてのユーザーの要件を特定することはできません。ただし、フォーム内のすべての必要なフィールド タイプに対してカスタム検証プロセスを表示することはできます。

Elementor フォーム フィールドにカスタム検証を適用してみましょう。

テキストフィールドにカスタム検証を追加する

Metformのほとんどのフォームフィールドは必須または送信必須に設定できます。フィールドウィジェット設定から、 コンテンツ タブの下にある 設定 オプションの横にあるボタンを切り替えて「必須"これを行うと、警告メッセージ用の新しいボックスが表示されるので、ここに警告メッセージを入力します。

次に、ドロップダウンから検証タイプを選択して、テキスト タイプ フィールドを送信します。

• 文字の長さ別: 送信テキストの最小文字数と最大文字数を設定します。
• 単語の長さ別: 単語の最大数と最小数を定義します。
• 表現ベース別: 検証のための式のルールを入力します。 

カスタム検証で間違った入力があった場合に警告メッセージを表示することもできます。

メールフィールドにカスタム検証を追加する

カスタム検証を設定できます 固有のメールアドレス ボタンを切り替えるだけで、検証ドロップダウンから次の操作を実行できます。

• 文字の長さ別: 送信されたテキストの最小文字数と最大文字数を定義します。
• 表現ベース別: 式ベースの検証を設定します。

数値フィールドにカスタム検証を追加する

数値要件については、次の検証タイプを設定できます。

• 範囲別: 数値フィールドの最小範囲と最大範囲を決定します。
• 表現ベース別: 式に基づいて検証を定義します。

電話番号フィールドにカスタム検証を追加する

ElementsKit の電話番号フィールドで利用可能な検証は次のとおりです。

• 文字の長さ別: 電話番号の最小桁数と最大桁数を割り当てます。
• 表現ベース別: ユーザー入力の形式を検証するための文字シーケンスを設定します。

テキストエリアフィールドにカスタム検証を追加する  

検証を使用して、指定した形式に従ってユーザーがテキスト領域に入力できるようにガイドします。

• 文字の長さ別: テキスト送信の最小文字数と最大文字数を設定します。
• 単語の長さ別: 単語の最大数と最小数を定義します。
• 表現ベース別: 式を使用してテキストを検証し、正しい書式を確認します。

名と姓のフィールドにカスタム検証を追加する 

名と姓のフィールド要素の検証タイプは同じです。以下を設定できます。

• 文字の長さ別: 送信者の名と姓の最小文字数と最大文字数を設定します。
• 単語の長さ別: 最大単語数と最小単語数を設定します。
• 表現ベース別: 式を使用してテキストを検証し、正しい書式を確認します。

パスワードフィールドにカスタム検証を追加する

ユーザーに次の条件でパスワードを設定するように依頼します。

• 文字の長さ別: パスワードの最大文字数と最小文字数を定義します。
• 単語の長さ別: 最大および最小の単語数を設定してパスワードを検証します。 
• 表現ベース別: 送信者のパスワードの形式を検証するための式ベースの方法。

フロントエンドでの Elementor フォーム検証の確認

Elementor フォームでカスタム検証を構成した後、次の重要なステップは、フロントエンドでフォームを徹底的にテストすることです。ここでは、フォームをプレビューする以上のことができます。フォームが公開されるまでに、さらにいくつかの手順が必要です。

まず、カスタム検証ルールに準拠した一意のメール アドレスや有効な電話番号などのフォーム データを入力します。次に、フォームを送信します。エラーなしで受け入れられた場合、カスタム検証は正常に機能しています。

次に、不正な形式や余分な文字など、カスタム検証ルールに反する無効な入力を挿入し、送信ボタンをクリックします。フォームが送信された場合、カスタム検証は機能していません。ただし、フォームが送信されない場合は、カスタム検証が正しく機能していることを示します。

ここで注意すべき重要な点は、エラー メッセージです。これは、ユーザーが適切な送信を行えるように、誤った入力に対して表示されるメッセージです。条件付きロジックを適用する場合もあるため、その環境でフォームをテストする必要があります。また、さまざまなデバイスやブラウザーでフォームを確認してください。

カスタム検証のニーズを特定する

Elementor フォームにカスタム検証ルールを追加する方法を説明しました。次は、フォーム フィールドに検証を適用する番です。ただし、まずは具体的なニーズを特定してください。正確な検証のために特定の形式を必要とするデータを特定します。

さらに、スパムや悪意のある送信のリスクもあります。ハッカーの標的になる可能性のあるフィールドを特定し、それらの領域に検証を適用して、潜在的な攻撃を防止します。

Elementor ウェブサイトのフォームをカスタマイズすることは、ユーザーが正確な情報を提供できるようにするための効果的な方法です。カスタム検証を追加するときは、明確なフィードバックや警告メッセージに重点を置くことも同様に重要です。

もう 1 つの重要なポイントは、Elementor フォームにカスタム フィールドを簡単に実装できるプラグインが必要であることです。技術的な課題を排除し、最新のユーザー フレンドリーなビルダー インターフェイスを提供する MetForm などのプラグインの使用をお勧めします。