WPFormsでリピータ・フィールドを使う方法【クイック＆イージー

フォームにリピーターフィールドを挿入して、送信ごとに多くのデータを取得する方法をお探しですか?

フォームのリピーター・フィールドは、ユーザーが複数の類似したデータを入力できるようにすると同時に、フォームをより直感的で使いやすいものにします。

この記事では、あなたのウェブサイトの機能とユーザーエクスペリエンスを向上させるために、WPForms用のリピーターフィールドを設計する最も簡単な方法を紹介します。

リピーターフィールドでWordPressフォームを作成しよう！🙂

WordPressでリピーターフィールドを持つフォームを作る方法

以下の手順に従って、WordPressサイトにリピーターフィールドを持つフォームを作成してください：

ステップ1: WPForms Proプラグインをインストールする

WPFormsはリピーターフィールドを作成するための超直感的で楽なソリューションを提供します。まずはWPForms Proのライセンスが必要です。

WPForms Proを入手したら、先に進み、あなたのサイトにプラグインをインストールします。プラグインのインストールに慣れていない場合は、WPFormsのインストールに関するこちらのガイドをご覧ください。

WPForms Proをインストールして準備が整えば、リピーターフィールドを使ったフォームの作成が可能になり、GeolocationやGoogle Sheetsなどのインパクトのある機能やアドオンにもアクセスできるようになります。

今すぐWPForms Proにアップグレードしましょう

準備はいいですか？次のステップに進んで、リピーター・フィールドを持つフォームの作成を始めましょう。

ステップ2：新規フォームの作成

WordPressのダッシュボードで、WPFormsのサイドバーメニューにカーソルを合わせ、新規追加をクリックします。

フォームに名前を付け、テンプレートを選択するか、ゼロからフォームを作成する必要があります。WPFormsには2,000以上のフォームテンプレートが用意されており、WordPressであらゆるタイプのフォームを作成することができます。

しかし、WPFormsでリピータフィールドを扱うことを説明するために、ブランクフォームから始めてゼロから作り上げることにします。

ほんの数秒で、フォームビルダー画面がロードされ、ドラッグ＆ドロップコントロールを使ってカスタムフォームを作成することができます。簡単のために、3つのフィールドだけのフォームを作ってみましょう：名前、メールアドレス、電話番号です。

しかし、これらのフィールドをリピート可能にしたいのであれば、まず最初に、左側のパネルから右側にドラッグして、リピーター・フィールドを挿入する必要がある。

リピーターフィールドを挿入した後、それをクリックして左側に表示される関連フィールドオプションを開きます。表示設定はデフォルトのままにします。私のシナリオではこれで問題なく動作するためです。

しかし、私のセットアップでは、3カラムのレイアウトが必要だ。リピーターに用意されている9つのレイアウト・プリセットの中から、自分に合ったレイアウトを自由に選んでください。

レイアウトを選択すると、右側のプレビューが即座に変更され、列の中にドロップゾーンが表示されます。このエリアに、リピートさせたい他のフィールドを挿入することができます。

その前に、リピーター・フィールドの名前を変更しておきましょう。フィールド・オプションでラベルを編集すればいい。

次に、リピーター・フィールドのドロップゾーンにフィールドを挿入します。Name、Email、Phoneの各フィールドを1つずつリピーター・フィールドのドロップゾーンにドラッグすると、このようなフォームになります：

ここになにか違和感があることに気づいたかもしれません。その通りです。名前フィールドが2行に分かれており、現在の視覚的コンテキストでは見栄えが良くありません。しかしこれは簡単に修正できます。次のステップでは、設定と外観の一部をカスタマイズします。

ステップ3：リピーター・フィールドのカスタマイズ

リピーター・セクションのすべてのフィールドを1行に表示させたいので、「名前」フィールドの書式を変更して、他のフィールドと並ぶようにします。

そのためには、「名前」フィールドをクリックしてフィールド・オプションを開き、左側のペインにある「書式」ドロップダウンを見つけます。Format]ドロップダウンをクリックし、[Simple]を選択します。

他のフィールドと並ぶように、「名前」フィールドが単一のフィールドに縮小されていることにお気づきだろう。

この時点でリピーター・フィールドの準備は完了です。しかし、フォームの公開に進む前に、リピーター・フィールドの追加設定について確認しておきましょう。

(オプション）リピーター・フィールドの追加設定

Repeaterフィールドをクリックして、もう一度Field Optionsを開く。

左側のパネルを下にスクロールすると、リピーター・フィールドが訪問者によって複製される最小時間と最大時間を設定するオプションが表示されます。数字を入力するだけで、簡単に制限を設定することができます。

次に、フィールド・オプション・パネルの一番上までスクロールして戻りましょう。今度は、表示オプションの下にあるブロックをクリックします。

リピータ・フィールドをブロック・モードで使用する場合、追加設定が可能です。例えば、訪問者がフィールドの複製やコピーを削除するために使用する「追加」と「削除」ボタンをカスタマイズすることもできます。

異なるボタンタイプから選択し、ボタンラベルを編集することができます。

また、ブロック・モードを使えば、複数の行にフィールドを追加することもできます。行モードでは、フィールドの追加は1行に限られます。

このチュートリアルで作成するフォームのような単純な要件であれば、行で十分です。しかし、より大きなフィールドグループを繰り返し使用する必要があるような、より高度なユースケースでは、ブロックオプションを使用すると、よりコントロールしやすくなります。

変更が終わったら、必ずSaveボタンを押してください。

ステップ 4: リピーター・フィールドを使ってフォームを公開する

WPForms ではフォームを簡単に埋め込んで、投稿を集めることができます。フォームビルダーの上部にある埋め込みボタンをクリックすることで埋め込みプロセスを開始できます。

その後、埋め込み方法を選択するモーダルが表示されます。ここでは、「新しいページを作成」を選択してみましょう。

次に、フォームの名前を入力し、「Let's Go」をクリックします。

その後、WordPressのブロックエディターが開きます。先ほどリピーターフィールドで作成したフォームがすでにここに埋め込まれているはずです。

ブロックエディターを使ってフォームをスタイリングする絶好の機会です。特に、フォームにテーマを追加してモダンな外観にしてみるのもよいでしょう。

テーマを選択するには、フォームのどこかをクリックして、右側のパネルにあるブロックオプションを開きます。テーマ」セクションまでスクロールダウンして選んでください。

これでフォームの見栄えが良くなったので、準備ができたら公開しましょう。上部にある公開ボタンを押すだけです。

フォームの公開が終わったら、あとは埋め込みフォームがフロントエンドで期待通りに機能するかテストするだけです。

ここでは、私がフォームをテストし、テストエントリーを送信してリピーター・フィールド機能に問題がないことを確認する簡単なデモをお見せします：

そしてすべてが期待通りに動作しています！これで完了です。リピーターフィールドを使えば、ユーザーが操作できる動的なフォームを簡単に作成できます。これが、大規模なフォーム送信を集めるために必要なユーザーエンゲージメントと満足度を高める鍵なのです。

また、フォームをさらに最適化するために、WPFormsのリピーターフィールドや条件ロジックを使ったレイアウトフィールドを使うべきかどうかについては、こちらのガイドをご覧ください。

今すぐリピーターフィールドフォームを作成しましょう！🙂

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

リピーター・フィールドのフォーム作成は、読者の間で人気のあるトピックです。ここでは、よくある質問に簡単にお答えします：

リピーターフィールドとは？

リピーターフィールドは、単一のフォーム内で同一フィールドの複数セットを動的に追加できるようにします。これはフィールド群に対する「複製」ボタンのように機能します。

例えば、イベント登録フォームでは、ユーザーは名前、メールアドレス、電話番号のフィールドを繰り返し入力することで、参加者ごとに別々のフォームを記入することなく、複数の参加者を追加できます。

なぜWPFormsのリピーター・フィールドを選ぶのか？

WPFormsのリピーターフィールドの良さは、あなたとあなたの訪問者のためのデータ収集を容易にすることです。

• ユーザー中心のデザイン：リピーター・フィールドを導入することで、ユーザーに入力範囲を指示する権限を与えます。ユーザーの自主性を尊重し、全体的なユーザーエクスペリエンスを向上させます。
• フォームデザインの柔軟性：すべてのフォームは一様ではありません。リピーターフィールドを使えば、1つの入力から複数の入力まで、さまざまなシナリオに対応することができます。
• 一貫性のあるデータ構造：複数のフィールドを使用する場合の課題の1つは、一貫性のないデータです。リピーター・フィールドにより、データは構造化され、統一されたままとなり、バックエンドの処理と分析が簡素化されます。
• フォームの長さを短縮：多数のフィールドを持つ長くて威圧的なフォームを持つ代わりに、リピーターフィールドはすっきりとした外観を提供し、ユーザーが一目で圧倒されないようにします。

Contact Form 7でリピーターフィールドを使用できますか？

Contact Form 7には、リピーターフィールドのネイティブ機能がありません。繰り返しフィールドを追加するには、サードパーティ製プラグインのインストールやカスタムコードの記述が必要となり、複雑で信頼性に欠けます。

WPFormsはPro版にリピーターフィールドを標準機能として搭載しており、コーディング不要で利用可能です。この機能が必要なフォームには最適な選択肢となります。

リピーターフィールドの最適な使用例は何ですか？

リピーターフィールドは、グループイベント登録（複数参加者の情報収集）、家族会員申込書（複数家族メンバーの追加）、一括注文書（複数商品の数量指定）、緊急連絡先フォーム（複数連絡先の記載）、およびユーザーが複数の人物やアイテムに対して同じ種類の情報を送信する必要があるあらゆるシナリオに最適です。

WPForms Liteにリピーターフィールドを追加できますか？

いいえ、リピータフィールドはWPForms Basic以上のライセンスで利用可能なProレベルの機能です。WPForms Liteには基本的なフォームフィールドが含まれますが、リピータや条件分岐、決済連携などの高度なフィールドはサポートされていません。リピータフィールドを使用するには、WPForms Proへのアップグレードが必要です。

リピーターフィールドの「行」表示モードと「ブロック」表示モードの違いは何ですか？

行モードでは、繰り返しフィールドを単一の水平行に表示します。名前/メールアドレス/電話番号などの単純な繰り返しに最適です。

ブロックモードでは、各繰り返し内で複数行のレイアウトが可能であり、住所、緊急連絡先、食事制限を含む参加者プロファイル全体のような複雑な情報に最適です。

フィールドが繰り返し入力される回数を制限するにはどうすればよいですか？

リピーターフィールドの設定では、最小行数と最大行数オプション を使用して制限を設定します。例えば、最小を1（少なくとも1つのエントリが必要）に設定し、最大を10（10回以上の繰り返しは不可）に設定します。

これにより、過剰な繰り返しを含むスパム投稿を防ぎ、現実的な最大参加人数や注文数量に基づいてリソース計画を立てることができます。

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

WordPressのウェブサイトにアコーディオンフォームのデザインを追加する簡単な方法をお探しですか？WPFormsを使用してアコーディオンフォームを作成する最も簡単な方法についての記事をチェックして、あなたのウェブサイトのユーザビリティとユーザーエクスペリエンスを向上させましょう。

今すぐWordpressフォームを作成

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

この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。