条件付きロジックを使用して多用途のDiviコンタクトフォームを作成する方法

同じ理由で、すべての訪問者がサイトにアクセスするわけではありません。 あなたはおそらく、顧客やクライアントのための単一のオプションだけでなく、さまざまな製品やサービスを提供しています。 そのため、ターゲットを絞った複数の連絡フォームを用意することで、サイトのUXをスムーズにし、顧客（および見込み客）ができるだけ少ない摩擦で必要なものについて正確に連絡できるようにすることができます。 Diviお問い合わせフォームモジュールと条件付きロジック機能を使用して、お客様とユーザーの間で可能な限り最適なパイプラインを作成する手順を説明します。

条件付きお問い合わせフォームのプレビュー

すべてが言われ、行われると、あなたのサイトにはこれに似たものがあり、訪問者が使用できるようになります。

デスクトップ

モバイル

条件付きロジックとは何ですか？

まず、条件付きロジックの意味について簡単に説明します。 このチュートリアルで行うことは、ユーザーが行う選択または行わない選択に基づいて表示される一連の連絡フォームを設定することです。

たとえば、訪問者が必要とするサービスや製品に基づいて調整する単一の連絡フォームを持つことができます。 そうすれば、情報を書き出す代わりに、必要な形式で情報を取得できます。 お問い合わせフォームの条件付きロジックは、コミュニケーションを強化し、ユーザーに提供する能力を促進することができます。

それを念頭に置いて、ターゲットを絞ったお問い合わせフォームの作成について詳しく見ていきましょう。

条件付きロジックを使用して連絡先フォームを作成する方法

DiviBuilderをロードします

Divi Contact Formモジュールを使用しているので、DiviBuilderに入る必要があります。 このチュートリアルの例として、LandscapeMaintenanceレイアウトパックを使用します。 任意のレイアウトまたはデザインを使用できますが、Divi Contact FormModuleを使用およびスタイル設定できる必要があります。

まず、WordPressWebサイトのバックエンドからDiviBuilderを入力します。 ページエディタ内に、[ Divi Builderを使用する]（または、すでにページを作成している場合はDivi Builderで編集する）という紫色のボタンが表示されます。

お問い合わせフォームモジュールを追加または検索する

次に、ページに既に存在するお問い合わせフォームモジュールを見つけるか、黒+円のアイコンをクリックして、ドロップダウンメニューでお問い合わせフォームを見つけます。

お問い合わせフォームの設定を入力してください

Divi Contact Formモジュールには、デフォルトで、 Name 、 Email 、およびMessageの3つのフィールドがあります。 これから行うのは、訪問者がクエリを送信するのに十分な情報を提供するまで、これらのオプションが表示されない連絡フォームを作成することです。

最初の条件付き質問を追加します

[コンテンツ]タブの下、およびフォームに既にあるフィールドの下に、[新しいフィールドの追加]ボタンが表示されます。 それをクリックします。

これを行うと、 [フィールド設定]ウィンドウが開き、フィールドIDとタイトルのエントリの場所が表示されます。 フィールドIDはあなたのためです。 それはあなたが追跡するためにモジュール設定の中に現れるものです。 タイトルは、訪問者がフォームのフロントエンドに表示するテキストです。 （タイトルは、フォームの送信時に受信する電子メールにも表示されます。）

これは訪問者がフォームに表示する最初の質問であるため、フィールドIDに「条件付き」というラベルを付けました。 それに対する彼らの反応は、彼らが次に見るものを決定します。 これは、フォームの質問と回答の流れを追跡する簡単な方法です。

フィールドオプションの追加

次に、[コンテンツ]タブの下の[フィールドオプション]セクションまでスクロールします。 ここで、ユーザーが選択できる選択肢を追加します。 これらのそれぞれが、特定のフォローアップ質問のトリガーになります。 この例では、入力タイプとしてチェックボックスを使用しています。 これは、ユーザーが必要な数を選択できることを意味します。

チェックボックスに加えて、Diviでは他のオプションも使用できます。ユーザーが入力した応答用の入力フィールドとテキストエリア、指定した単一の選択肢用の[ドロップダウンとラジオボタンの選択] 、および電子メールアドレス入力用の[電子メールフィールド] 。 デフォルトの名前フィールドは入力フィールドであり、メッセージはテキストエリアです。

チェックボックスを選択した状態で、後でさまざまなオプションをトリガーする選択肢を入力します。 次に、これが必須フィールドであることを確認して、ユーザーがフォームを時期尚早に送信できないようにします。

ここで重要なのは、このステップに条件付きロジックを追加しないことです。 これがトリガーであるため、ユーザーには関係なく表示されます。

条件付き応答の新しいフィールドを追加する

ただし、次に、フォローアップ応答として追加する新しいフィールドに条件付きロジックを追加します。 最初の質問に3つのオプションを含めたので、フォームに3つの新しい対応するフィールドを追加します。 それぞれについて、次の手順を繰り返します。

新しいフィールドに条件付き応答に名前を付ける

条件付き1 （最初の条件付きトリガーを示すため）の命名規則を使用し、その後、フォローアップ応答に1a 、 1b 、および1cを使用していることに注意してください。 また、それらが何であるかを追跡できるように、適切にラベルを付けました。

最初の質問と同様に、訪問者に表示される質問としてタイトルも入力します。

応答フィールドに条件付きロジックを追加する

その後、そのフィールドの[コンテンツ]タブの下にある[条件付きロジック]セクションまで下にスクロールします。 条件付きロジックのトグルを有効にします。 次に、このリレーションを選択します。これは、任意（任意の数の応答でこのオプションをポップアップ表示できます）またはすべて（特定の応答の組み合わせのみでこのフィールドが表示される）に設定できることを意味します。

私たちのように単一のトリガールールを使用している場合は、いずれかまたはすべてが機能します。

[ルール]の下に、これをトリガーするフィールドが表示され、右側に、トリガーする選択肢を選択できます。 中心は、等しい、等しくない、より小さい、より大きいなどの修飾子です。 この特定のフィールドでは、条件付き1として設定した質問を選択し、その中のオプションを選択して、このフィールドの表示を具体的にトリガーします。

すべての条件付き応答に対してこれを繰り返します

1つの条件付き質問に3つの異なる回答を追加したので、他のフィールドについてもこの正確なプロセスを繰り返します。 その選択に対して適切な相関応答を作成するだけです。

Contact Form Fiends'Name / Email / Message 'を表示するように設定します

条件付きロジックの応答を設定したら、訪問者が実際にフォームを送信できるようにします。 そのために、[名前] 、[電子メール] 、および[メッセージ]フィールドの条件付きロジックを調整します。 これらのそれぞれの設定はまったく同じなので、もう一度、これを3回繰り返します。

[名前] 、[電子メール] 、および[メッセージ]フィールドの設定内で、[条件付きロジック]に移動します。 これを有効にして、条件付きフォローアップの質問に対する最終的な回答がいくつでも追加します。 この場合、3つのフォローアップ質問があるため、3つのルールを使用しています。

ルールごとに、フォローアップの質問をトリガーとして選択します。 修飾子を空ではないに設定します。これは、訪問者が質問に回答している限り、条件が満たされていることを意味します。 これにより、最後のボックスがグレー表示され、任意の回答で十分であることを示します。

変更を保存し、フォームの送信を許可するために表示するフィールドに対してこれを繰り返します。 以上です！ フォームは、ユーザーのニーズにすぐに適応します。

最終結果

条件付きロジックが実際にどのように機能するかを以下に示します。

デスクトップ

モバイル

まとめ

お問い合わせフォームは、ウェブサイトの最もユビキタスな要素の1つです。 ほとんどすべてのサイトに1つあり、ほとんどすべてのサイトに1つ必要です。 しかし、同じ理由ですべてのユーザーがサイトにアクセスするわけではありません。 Diviの条件付きロジック機能を使用すると、連絡先フォームをカスタマイズして、ユーザーが通信できる多目的なツールにすることができます。

Divi Conditional Logic機能を使用してどのようなフォームを作成しましたか？

Kubko /shutterstock.comによる記事特集画像