WPFormsでリピーターフィールドを含むフォームを作成する方法

公開: 2023-10-04

WPForms リピーター フィールドをオンライン フォームに組み込んで、フォーム送信ごとにより多くのデータを取得する方法を知りたいですか?

フォーム内のリピーター フィールドを使用すると、ユーザーは複数の同様のデータ セットを入力できるようになり、フォームがより直観的で使いやすくなります。

この記事では、WPForms のリピーター フィールドを設計して Web サイトの機能とユーザー エクスペリエンスを向上させる最も簡単な方法を説明します。

記事上で

  • 1. WPForms Pro を購読してインストールする
  • 2. 新しい空のフォームを作成する
  • 3. はい/いいえの選択肢を含むドロップダウン フィールドを追加します
  • 4. フォームフィールドに条件付きロジックを適用する
  • 5. ドロップダウンフィールドの条件付きロジックを有効にする
  • 6. フォームの通知と確認を有効にする
  • 8. リピーターフィールドを含むフォームを公開する
  • WPForms のリピーター フィールドに関するその他の質問

WPForms リピーター フィールドを使用する理由

WPForms リピーター フィールドの利点は、データ収集を効率化しながら、次のような他の利点も提供できる点にあります。

  • ユーザー中心の設計:リピーター フィールドを導入することで、ユーザーが入力範囲を決定できるようになります。 これはユーザーの自主性に微妙に配慮しており、全体的なユーザー エクスペリエンスを向上させます。
  • フォーム設計の柔軟性:すべてのフォームが万能というわけではありません。 リピーター フィールドを使用すると、単一のエントリでも複数のエントリでも、さまざまなシナリオに対応でき、フォームが多様な要件に確実に適応できるようになります。
  • 一貫したデータの構造化:複数のフィールドに関する課題の 1 つは、データの不整合です。 データはリピーターフィールドで構造化され均一なままであるため、バックエンドの処理と分析が簡素化されます。
  • フォームの長さの短縮:多数のフィールドを備えた長くて威圧的なフォームの代わりに、リピーター フィールドによりすっきりとした外観が提供され、ユーザーが一目見て圧倒されることがなくなります。

クライアントのオンボーディングの効率化を目指す起業家であっても、効率的なデータ収集に熱心なブロガーであっても、WPForms リピーター フィールドは非常に貴重です。 では、設定手順を見ていきましょう!

WPFormsでリピーターフィールドを含むフォームを作成する方法

WPForms でリピーター フィールドを含むフォームを作成するのは非常に簡単で、必要なのは条件付きロジックの基本的な理解だけです。 開始するには、以下の手順に従ってください。

1. WPForms Pro を購読してインストールする

独自のフォームを作成する場合、WPForms が最適なオプションです。 これを使用して、WordPress であらゆるタイプのフォームを作成および公開できます。 フォーム プラグインには、リピーター フィールド フォームの作成に使用できる 1,000 を超えるフォーム テンプレートが付属しています。

このガイドでは条件付きロジックを使用してフォームにリピーター フィールドを設定するため、WPForms Pro にサブスクライブする必要があります。WPForms Pro では、プレミアム統合、アドオン、および多数の便利な機能へのアクセスも提供されます。

WPForms homepage

WPForms Pro のサブスクリプションを購入した後、WordPress サイトにプラグインをインストールしてアクティブ化する必要があります。

さあ、フォームを作成してみましょう。

2. 新しい空のフォームを作成する

WordPress 管理ダッシュボードからWPFormsに移動し、オプションのリストから[新規追加]を選択します。

Add new form WPForms

次に、フォームに名前を付けて既存の WPForms テンプレートを選択するか、ニーズに基づいて新しいフォームを設定します。

このチュートリアルでは、繰り返しフィールドを設定するための重要な手順をすべて示す新しいフォームを作成します。 したがって、 「空白のフォームを作成」オプションを選択します。

Create a blank form for repeater field

「フィールド」画面が表示され、使用可能なフィールドが左側のパネルに表示されます。 アクセスできるものはライセンス レベルによって異なります。

WPForms fields menu

右側のパネルにフォームの編集可能なプレビューが表示されます。 空白のフォームを選択したため、このセクションは空で表示されます。

Add fields to your repeater form

WPForms の直感的なフォーム ビルダーを使用すると、カスタム フィールドを簡単に追加、変更、配置してフォームを好みに合わせて調整できます。

このチュートリアルでは、単一ユーザー (登録者 1 など) の情報を取得するために、 NameEmailPhoneなどのプライマリ フィールド タイプを追加します。

Registration fields for repeater form

次に、ドロップダウン フィールドと条件付きロジックを使用してリピーター コンポーネントを作成する簡単な手順を説明します。

3. はい/いいえの選択肢を含むドロップダウン フィールドを追加します

ドロップダウンフィールドをフォームに追加するには、左側のパネルでドロップダウン フィールドをクリックするか、フォーム プレビューに直接ドラッグ アンド ドロップします。

WPForms select dropdown field

その後、ドロップダウンフィールドのラベルに「Add Another?」のような名前を付けます。 その後、 Choicesに単純な Yes/No オプションを追加できます。

Configure dropdown options

次に、同じ手順を繰り返して、登録者 2 の[ドロップダウン]フィールドの下に[名前][メール] 、および[電話番号] フィールドを追加します。

Fields below dropdown repeater form

その後、同じラベル[選択肢]に [はい/いいえ] オプションを持つ別のドロップダウン フィールドを追加して、リピーター効果を作成します。

Configure dropdown options

これにより、後続の登録者フィールドの各セットが条件付きロジックを使用して、ユーザーが「もう 1 つ追加しますか?」に対して「はい」と答えた場合にのみ表示するエフェクトを作成できます。

Dropdown field below repeater fields

ここで、ユーザーがドロップダウンで[はい]を選択した場合にのみ追加の登録者フィールドが表示されるように、条件付きロジックをフォーム フィールドに適用する必要があります。

4. フォームフィールドに条件付きロジックを適用する

これは、右側のフォーム プレビューから任意のフィールドをクリックし、フィールド オプション[スマート ロジック]タブに移動することで簡単に行うことができます。

Smart Logic tab in field options

[スマート ロジック]メニューで、[別を追加しますか?] の下にあるすべてのフォーム フィールドの [条件付きロジックを有効にする]オプションをオンにします。 先ほど作成したドロップダウンフィールド。

Enable conditional logic for repeater field

次に、条件付きロジックを使用して、ドロップダウンフィールドが「Add Another?」の場合にのみフィールドを表示しますは「はい」です。 その下の他のすべてのフィールドに対してこれを繰り返します。

Conditional logic show field if yes

5. ドロップダウンフィールドの条件付きロジックを有効にする

登録者 2 の情報を入力しない限り、フォームに記入する人が 3 人目の登録者を追加できないようにするには、その下のドロップダウン フィールドに条件付きロジックを設定する必要があります。

これを行うには、「登録者 2 – 名前、電子メール、および電話」フィールドの下にあるドロップダウンフィールドの「条件付きロジックを有効にする」オプションをオンにします。

Enable conditional logic for dropdown field

次に、条件付きロジックを使用して、[登録者 2 – 電子メール]フィールドが空でない場合にのみフィールドを表示しますこれにより、リピーターフィールド効果が生じます。

Dropdown field is not empty

上記の手順を何度でも繰り返して、多数の登録者情報を取得できます。登録者情報は、ユーザーが「別を追加しますか?」に対して「はい」と答えた場合にのみ表示されます。

次に、変更内容が失われないように、次に進む前にフォーム ビルダーの右上隅にある[保存]ボタンをクリックします。

Save the form

もうすぐだ! 次に、フォームの送信後に表示されるフォームの通知と確認を有効にする必要があります。

6. フォームの通知と確認を有効にする

ユーザーが登録フォームに記入して送信した後に表示されるメッセージと通知を設定することは非常に重要です。

このプロセスは簡単です。 フォームビルダー画面の「設定」タブで「通知」を選択します。

Form notification settings

アラートは管理者に自動的に送信されます。 ただし、必要に応じて、件名、本文、受信者のリストを構成できます。

Enable form notifications for repeater field form

フォーム送信後に消費者に表示されるメッセージは、 [設定]ページの[確認]を選択することで変更できます。

Form confirmation

WPForms の確認タイプ設定を使用して、メッセージを表示したり、別のページにリンクしたり、ユーザーをリダイレクトしたりすることもできます。

Customize confirmation message for repeater field form

よくやった! あとは、既存のページまたは新しいページにフォームを公開して公開し、送信を集める準備をするだけです。

8. リピーターフィールドを含むフォームを公開する

新しい Web ページまたは投稿を作成するか、既存の Web ページを変更します。 その後、 「ブロックの追加」ボタンをクリックして、 WPFormsアイコンを選択します。

Add form widget WPForms

次に、WPForms ブロックのドロップダウン メニューからリピーター フィールド フォームのデザインを選択して、ページまたは投稿に追加します。

フォームの外観をカスタマイズしたい場合は、ブロック エディターを使用してフォームのスタイルを設定するのが良いでしょう。

Repeater field form

すべてが正しい方向に進んでいるように見える場合は、 「更新」または「公開」ボタンをクリックしてフォームを公開できます。

フォームの発行が完了したら、埋め込まれたフォームをテストして、フロントエンドで期待どおりに機能することを確認するだけです。

WPForms repeater field

WPForms のリピーター フィールドに関するその他の質問

リピーター フィールド フォームの作成は、読者の間で人気の高いトピックです。 よくある質問のいくつかに対する簡単な回答を次に示します。

リピーターフィールドとは何ですか?

リピーター フィールドは多用途のツールであり、ユーザーはフォーム内に複数の同一フィールドのセットを動的に追加できます。 フィールドのグループの「コピー」ボタンとしてイメージしてください。 複数の登録など、繰り返し可能なデータを入力する際の柔軟性が向上します。

WordPress にリピーターフィールドを追加するにはどうすればよいですか?

通常、リピーターフィールドを組み込むには、信頼できる WordPress プラグインが必要です。 CSS やコーディングの知識がなくても、フォームにリピーター フィールドを追加したい場合は、最上位の WordPress フォーム ビルダーである WPForms が理想的な選択肢となります。

WordPress のリピーターフィールドとは何ですか?

WordPress エコシステム内では、リピーター フィールドを使用して、ユーザーがフォームに入力する際に​​複製できる一連のサブフィールドを作成できます。 これは、反復可能なデータ セットの数が事前定義されていない場合に特に便利です。

次に、WordPress でアコーディオン フォームを作成する方法を学びます。

WordPress Web サイトにアコーディオン フォーム デザインを追加する簡単な方法をお探しですか? WPForms を使用してアコーディオン フォームを作成し、Web サイトの使いやすさとユーザー エクスペリエンスを向上させる最も簡単な方法に関する投稿をご覧ください。

今すぐWordPressフォームを作成しましょう

フォームを構築する準備はできましたか? 最も簡単な WordPress フォームビルダープラグインを今すぐ始めましょう。 WPForms Pro には多数の無料テンプレートが含まれており、14 日間の返金保証を提供しています。

この記事がお役に立った場合は、Facebook と Twitter でフォローして、さらに無料の WordPress チュートリアルとガイドをご覧ください。