Elementor条件付きロジックフォームを5つのステップで構築する方法

Elementorフォームに条件付きロジックを追加すると、フォームの送信率を上げることができます。

どのように？ 条件付きロジックのElementorフォームを使用すると、顧客が不要なフィールドに入力する必要がなくなります。 その結果、より優れたユーザーエクスペリエンスを提供します。

Elementorの条件付き論理形式の最良の部分を知っていますか？

さて、最良の部分は、Elementor条件付きロジックフォームの構築が本当に簡単な作業であるということです。 特にあなたがこの記事に従うならば。 このブログでは、 Elementor条件付きロジックフォームをわずか5ステップで構築する方法を学習するためです。

さらに、Elementor条件付き論理形式を使用する利点と、それをいつ使用するかについても学習します。

だから、読み続けてください…。

フォームの条件付きロジックとは何ですか？

フォームの条件付きロジックは、ユーザー入力に基づいてフォームがどのように動作するかを制御する方法です。 特定のフォームフィールドまたは複数のフィールドを非表示にして、ユーザーが特定のアクションを実行した後、またはフォームで特定の値を選択した後にのみ表示することができます。

これは、最近のWordPressフォームでは一般的な方法です。 次のセクションに移動して、条件付きロジックが一般的である理由と、人々が通常これをフォームで使用する場合を確認してください。

Elementorフォームで条件付きロジックを使用する理由と時期

条件付きフォームは、実際には、フォームに入力する際に​​顧客が最高のエクスペリエンスを享受できるようにするために非常に効果的です。 また、必要な正確な量のデータを確実に取得できます。

どのように疑問に思いますか？

ええと、顧客はフォームへの記入を特に楽しんでいません。 それに直面しましょう、それは本当に誰の趣味でもありません！

その上、特に役に立たない/関連性のない情報を提供するように依頼すると、ユーザーがイライラするのは明らかです。

そして、それこそがフォームの条件付きロジックが役立つところです。 条件付きロジックを使用すると、フォームがユーザーに関連情報の入力のみを要求し、フォームのすべてのフィールドは入力しないようにすることができます。

基本的に、Elementorの条件付きフォームは、「If条件」ロジックに従います。 たとえば、条件Aが真の場合、アクションXが実行されます。それ以外の場合は実行されません。 1つのアクションに対して多くの条件を設定することもできます。 たとえば、アクションXは、条件Aと条件Bの両方が真であるか、どちらかが真である場合にのみ実行されます。

実際の例について話しましょう。ある形で、イベントに何人の子供を連れてくるかを知りたいとします。

今、あなたはみんなに子供の数を記入するように頼む必要はありません。 最初に子供を連れてくる予定があるかどうかを尋ね、「はい」と答えたら、フォームにオプションを表示して、子供を何人連れてくるかを選択できます。

このように、子供を連れて行かない人は、子供のフィールドの数を入力する必要はありません。 実際、彼らはより短いフォームを持っているので、途中でフォームを放棄するのではなく、フォームへの記入を完了するように動機付けられます。

要約すると、Elementor形式で条件付きロジックを使用する利点は次のとおりです。

• ユーザーは自分用のフィールドに入力するだけでよいため、ユーザーの時間を節約できます。
• 条件付きフォームの方が便利なため、ユーザーエクスペリエンスが向上します。
• フォームは条件付きロジックのないものよりも短いため、ユーザーにフォームへの入力を促します。
• すべての関連情報とフォーム送信率の向上が得られます。

条件付きロジックがどれほど役立つかがわかったので、次のセクションに進み、Elementorフォームに条件付きロジックを追加する方法を学びます。

条件付きロジックElementorフォームの作成方法：ステップバイステップガイド

すべての手順を適切に実行して、条件付きロジックElementorフォームをすぐに作成します。

ステップ1：必要なプラグインをインストールする

Elementor無料バージョンとともに条件付きロジックをElementorフォームに追加するには、ElementorフォームビルダーMetFormをインストールする必要があります。 両方が必要になります

1. MetForm（無料）
2. MetForm Pro

MetFormのインストールとアクティブ化のプロセスについてサポートが必要な場合は、ドキュメントを参照してください。

注：このプロセスに従うためにElementorProバージョンは必要ありません。

ステップ2：MetFormウィジェットをElementorページにドラッグアンドドロップします

次に、Elementor条件付きロジックフォームを追加するページに移動します。 条件付きフォームを既存のページに追加することも、新しいページを作成することもできます。 ただし、 Elementorで編集モードになっていることを確認してください。

次に、MetFormを検索します。ウィジェットが見つかったら、ページにドラッグアンドドロップします。

ステップ3：フォームを作成/ページに追加する

これで、既存のフォームを選択するか、新しいフォームを作成できます。 新しいフォームを作成するか、既存のフォームを追加するには、 [フォームの編集]ボタンをクリックします。

デモ予約フォームを1つ作成しましたので、

• 「フォームの選択」を選択します
• ドロップダウンから「ConditionallogicElementorform」という名前の既存のフォームを選択します
• 次に、[フォームの編集]をクリックします。

ステップ4：Elementorフォームフィールドに条件付きロジックを追加する

MetForm条件付き機能を使用すると、従属フィールドが空であるか、空でないか、等しい（ある値に一致する）、等しくない、より大きい、等しいより大きい、より小さい、などの複数の条件に基づいて、フォームフィールドを非表示/表示にすることができます。さらに、アクションを実行するために、すべての条件が真である必要があるか、いずれかの条件が真である必要があるかをカスタマイズできます。

この記事では、これらの条件のいくつかを適用します。同じ手順に従って、すべての条件を適用できます。 条件を適用するには、次の手順に従う必要があります。

フィールドを編集し、条件付きロジックを有効にします

このためには、フォームフィールドで、右上隅の編集アイコンをクリックし、次に左側の設定パネルで少し下にスクロールして、 [条件ロジック]オプションを展開し、最後に[有効化]ボタンをオンにします。

  基準とアクションを設定する

次に、条件一致基準をAND / ORとして選択し、アクションタイプを[このフィールドを表示/このフィールドを非表示]としてドロップダウンから選択します。

条件を設定する

次に、条件を設定し、条件を設定します

• +新しいアイテムを追加をクリックします
• [ If]フィールドに、条件を追加するフィールドの名前を追加します
• 一致（比較）ドロップダウンから条件を選択します。

たとえば、[フルネーム]フィールドが空でない場合にのみ[メール]フィールドを表示したいとします。 その結果、誰かが自分の名前だけを入力すると、[メール]フィールドが表示されます。 そのために、私は行きます

• フルネームのテキストフィールドの名前をコピーします
• メールフィールドの条件付きロジックセクションに戻り、「Ifフィールド」に貼り付けます
• 最後に、[一致（比較）]ドロップダウンから[空にしない]を選択します。

これらの正確な手順に従って、Elementor条件付きフォームのすべてのフォームフィールドまたは要件に応じていくつかのフォームフィールドに条件付きロジックを追加します。

注：複数のオプションがあるRadioやCheckboxなどのフォームフィールドの条件を設定する場合は、フィールド名を[If]フィールドに入力し、オプションの値を[Matchvalue]フィールドのradio/checkboxに設定する必要があります。

たとえば、一部の人が重要なステータスとして他の人を選択した場合にのみ[その他のステータス]フィールドを表示するには、次のことを行う必要があります。  

• 等しいとして一致（比較）を選択します
• 婚姻状況のフィールド名をコピーします
• その他のステータスの条件付きロジックの「If」オプションに貼り付けます
• [結婚状況の比率]フィールドから[その他]オプションの値をコピーします
• 次に、それをその他のステータスの条件付きロジックの「値の一致」オプションに貼り付けます

ペットの数が1より大きい場合にのみ、 NeedPetsittersフォームを表示するために同じ手順を実行しました。

ステップ5：確認、通知に関連するフォーム設定をカスタマイズして完了します

Elementorフォームへのすべての条件付きロジックの追加が完了したら、[フォーム設定]をクリックしてさまざまな設定をカスタマイズします。 あなたはできる

• 一般設定で、タイトル、成功メッセージ、必要なログイン、ビューのカウントなどをカスタマイズします。
• [確認]設定で、確認をオンにする、[メールの件名]、[メールの送信元]、[メールから]、[ありがとうございます]メッセージなどのオプションをカスタマイズできます。
• [通知設定]で、[管理者への通知メールを有効にする]、[メールの件名]、[メールの宛先]、[メールの送信者]、[管理者メモ]などのメール通知オプションが表示されます。

必要に応じて、別の支払いとCRMの統合を設定することもできます。 これらのトピックの詳細については、ドキュメントを確認してください。 すべての変更を行ったら、下にスクロールして[変更を保存]をクリックします。

[更新して閉じる]をクリックして、作成した条件付きフォームを保存します。

プレビューボタンをクリックすると、次のようなElementor条件付きフォームが表示されます。

MetFormのビルド済みテンプレートを使用してElementorに条件付きフォームを追加する方法

Elementor条件付きロジックフォームの既成のテンプレートを探している場合、MetFormよりも優れたオプションを見つけることはできません。 このWordPressフォームビルダーは、6つ以上の既成のElementor条件付きロジックフォームテンプレートを提供するためです。

事前に作成されたMetFormの条件付きフォームを使用するには、上記のプロセスの3番目のステップに到達したら、少し下にスクロールしてすべての条件付きフォームを見つけます。 好みのフォームを選択するには、フォームをクリックしてから、 [フォームの編集]をクリックします。

フォームが読み込まれたら、[更新して閉じる]をクリックし、最後にページを保存します。 これは、MetFormによって事前に作成されたElementor条件付きロジックフォームのプレビューです。

最後の言葉

おめでとう！ これで、Elementorフォームに条件付きロジックを追加する方法がわかりました。 このプロセスを使用して、WordPressWebサイトでユーザーフレンドリーなElementor条件付きロジックフォームを作成してください。

あなたの仕事は、ユーザーがあなたのフォームに記入するために最小限の労力を費やす必要があることを確認することであることを覚えておいてください。 そして、それがMetFormの条件付き機能が驚くほど機能することです。 さらに、MetFormはショートコードもサポートしています。

ビルド済みのElementor条件付きロジックフォームテンプレートを忘れないでください。 また、MetFormのすばらしい機能をすべてチェックすることを強くお勧めします。 このWordPressプラグインの高度な機能は、より最適化されたElementorフォームを構築するのに役立ちます。