フォームにリピーターフィールドを挿入して、送信ごとに多くのデータを取得する方法をお探しですか?
フォームのリピーター・フィールドは、ユーザーが複数の類似したデータを入力できるようにすると同時に、フォームをより直感的で使いやすいものにします。
この記事では、あなたのウェブサイトの機能とユーザーエクスペリエンスを向上させるために、WPForms用のリピーターフィールドを設計する最も簡単な方法を紹介します。
この記事で
WordPressでリピーターフィールドを持つフォームを作る方法
以下の手順に従って、WordPressサイトにリピーターフィールドを持つフォームを作成してください：
ステップ1: WPForms Proをインストールする
WPFormsはリピーターフィールドを作成するための超直感的で楽なソリューションを提供します。まずはWPForms Proのライセンスが必要です。
WPForms Proを入手したら、先に進み、あなたのサイトにプラグインをインストールします。プラグインのインストールに慣れていない場合は、WPFormsのインストールに関するこちらのガイドをご覧ください。
WPForms Proをインストールして準備が整えば、リピーターフィールドを使ったフォームの作成が可能になり、GeolocationやGoogle Sheetsなどのインパクトのある機能やアドオンにもアクセスできるようになります。
準備はいいですか？次のステップに進んで、リピーター・フィールドを持つフォームの作成を始めましょう。
ステップ2：新規フォームの作成
WordPressのダッシュボードで、WPFormsのサイドバーメニューにカーソルを合わせ、新規追加をクリックします。
フォームに名前を付け、テンプレートを選択するか、ゼロからフォームを作成する必要があります。WPFormsには2,000以上のフォームテンプレートが用意されており、WordPressであらゆるタイプのフォームを作成することができます。
しかし、WPFormsでリピータフィールドを扱うことを説明するために、ブランクフォームから始めてゼロから作り上げることにします。
ほんの数秒で、フォームビルダー画面がロードされ、ドラッグ＆ドロップコントロールを使ってカスタムフォームを作成することができます。簡単のために、3つのフィールドだけのフォームを作ってみましょう：名前、メールアドレス、電話番号です。
しかし、これらのフィールドをリピート可能にしたいのであれば、まず最初に、左側のパネルから右側にドラッグして、リピーター・フィールドを挿入する必要がある。
リピータ・フィールドを挿入したら、それをクリックして、左側にそのフィールドに関連するフィールド・オプションを開きます。
ディスプレイの設定はデフォルトのままにしておく。
しかし、私のセットアップでは、3カラムのレイアウトが必要だ。リピーターに用意されている9つのレイアウト・プリセットの中から、自分に合ったレイアウトを自由に選んでください。
レイアウトを選択すると、右側のプレビューが即座に変更され、列の中にドロップゾーンが表示されます。このエリアに、リピートさせたい他のフィールドを挿入することができます。
その前に、リピーター・フィールドの名前を変更しておきましょう。フィールド・オプションでラベルを編集すればいい。
次に、リピーター・フィールドのドロップゾーンにフィールドを挿入します。Name、Email、Phoneの各フィールドを1つずつリピーター・フィールドのドロップゾーンにドラッグすると、このようなフォームになります：
何か違和感を覚えたかもしれない。その通りだ。Nameフィールドは2行に分かれており、現在のビジュアルコンテキストでは見栄えが良くない。
しかし、これは簡単に修正できる。次のステップでは、いくつかの設定と外観をカスタマイズする。
ステップ3：リピーター・フィールドのカスタマイズ
リピーター・セクションのすべてのフィールドを1行に表示させたいので、「名前」フィールドの書式を変更して、他のフィールドと並ぶようにします。
そのためには、「名前」フィールドをクリックしてフィールド・オプションを開き、左側のペインにある「書式」ドロップダウンを見つけます。Format]ドロップダウンをクリックし、[Simple]を選択します。
他のフィールドと並ぶように、「名前」フィールドが単一のフィールドに縮小されていることにお気づきだろう。
この時点でリピーター・フィールドの準備は完了です。しかし、フォームの公開に進む前に、リピーター・フィールドの追加設定について確認しておきましょう。
(オプション）リピーター・フィールドの追加設定
Repeaterフィールドをクリックして、もう一度Field Optionsを開く。
左側のパネルを下にスクロールすると、リピーター・フィールドが訪問者によって複製される最小時間と最大時間を設定するオプションが表示されます。数字を入力するだけで、簡単に制限を設定することができます。
次に、フィールド・オプション・パネルの一番上までスクロールして戻りましょう。今度は、表示オプションの下にあるブロックをクリックします。
リピータ・フィールドをブロック・モードで使用する場合、追加設定が可能です。例えば、訪問者がフィールドの複製やコピーを削除するために使用する「追加」と「削除」ボタンをカスタマイズすることもできます。
異なるボタンタイプから選択し、ボタンラベルを編集することができます。
また、ブロック・モードを使えば、複数の行にフィールドを追加することもできます。行モードでは、フィールドの追加は1行に限られます。
このチュートリアルで作成するフォームのような単純な要件であれば、行で十分です。しかし、より大きなフィールドグループを繰り返し使用する必要があるような、より高度なユースケースでは、ブロックオプションを使用すると、よりコントロールしやすくなります。
変更が終わったら、必ずSaveボタンを押してください。
よくやった！フォームの公開まであと少しです。
ステップ 4: リピーター・フィールドを使ってフォームを公開する
WPForms ではフォームを簡単に埋め込んで、投稿を集めることができます。フォームビルダーの上部にある埋め込みボタンをクリックすることで埋め込みプロセスを開始できます。
その後、埋め込み方法を選択するモーダルが表示されます。ここでは、「新しいページを作成」を選択してみましょう。
次に、フォームの名前を入力し、「Let's Go」をクリックします。
その後、WordPressのブロックエディターが開きます。先ほどリピーターフィールドで作成したフォームがすでにここに埋め込まれているはずです。
ブロックエディターを使ってフォームをスタイリングする絶好の機会です。特に、フォームにテーマを追加してモダンな外観にしてみるのもよいでしょう。
テーマを選択するには、フォームのどこかをクリックして、右側のパネルにあるブロックオプションを開きます。テーマ」セクションまでスクロールダウンして選んでください。
これでフォームの見栄えが良くなったので、準備ができたら公開しましょう。上部にある公開ボタンを押すだけです。
フォームの公開が終わったら、あとは埋め込みフォームがフロントエンドで期待通りに機能するかテストするだけです。
ここでは、私がフォームをテストし、テストエントリーを送信してリピーター・フィールド機能に問題がないことを確認する簡単なデモをお見せします：
そして、すべてが期待通りに動いている！ 🙂。
これで完成だ。リピーターフィールドを使えば、ユーザーがコントロールできる動的なフォームを簡単に作成できます。これが、大規模なフォーム送信を収集するために必要な、ユーザーのエンゲージメントと満足度を高める鍵です。
また、フォームをさらに最適化するために、WPFormsのリピーターフィールドや条件ロジックを使ったレイアウトフィールドを使うべきかどうかについては、こちらのガイドをご覧ください。
WPFormsのリピータフィールドに関するその他の質問
リピーター・フィールドのフォーム作成は、読者の間で人気のあるトピックです。ここでは、よくある質問に簡単にお答えします：
リピーターフィールドとは？
リピーター・フィールドは、フォームに複数の同じフィールドを動的に追加できる多用途のツールです。フィールドグループの「コピー」ボタンをイメージしてください。複数の登録のような繰り返しデータを入力する際の柔軟性を高めます。
なぜWPFormsのリピーター・フィールドを選ぶのか？
WPFormsのリピーターフィールドの良さは、あなたとあなたの訪問者のためのデータ収集を容易にすることです。
- ユーザー中心のデザイン：リピーター・フィールドを導入することで、ユーザーに入力範囲を指示する権限を与えます。ユーザーの自主性を尊重し、全体的なユーザーエクスペリエンスを向上させます。
- フォームデザインの柔軟性：すべてのフォームは一様ではありません。リピーターフィールドを使えば、1つの入力から複数の入力まで、さまざまなシナリオに対応することができます。
- 一貫性のあるデータ構造：複数のフィールドを使用する場合の課題の1つは、一貫性のないデータです。リピーター・フィールドにより、データは構造化され、統一されたままとなり、バックエンドの処理と分析が簡素化されます。
- フォームの長さを短縮：多数のフィールドを持つ長くて威圧的なフォームを持つ代わりに、リピーターフィールドはすっきりとした外観を提供し、ユーザーが一目で圧倒されないようにします。
あなたがより良い顧客オンボーディングを目指す起業家であれ、効率的なデータ収集に熱心なブロガーであれ、WPFormsのリピーター・フィールドは非常に貴重です。
次に、WordPressでアコーディオンフォームを作成する方法を学びます。
WordPressのウェブサイトにアコーディオンフォームのデザインを追加する簡単な方法をお探しですか？WPFormsを使用してアコーディオンフォームを作成する最も簡単な方法についての記事をチェックして、あなたのウェブサイトのユーザビリティとユーザーエクスペリエンスを向上させましょう。
フォームを作る準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proにはたくさんの無料テンプレートが含まれており、14日間の返金保証がついています。
この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。
Zapierとの統合がうまくいかない理由
こんにちは、ラファ - 機会がありましたら、サポートに、あなたが直面している問題の詳細をお書きください。
WPFormsのライセンスをお持ちの方は、メールサポートをご利用いただけますので、サポートチケットを送信してください。
それ以外の場合は、WPForms Lite WordPress.orgのサポートフォーラムで限定的な無料サポートを提供しています。
ありがとう🙂。
リピーター・フィールドが、ページを埋め込んで本番に入る前に、テスト・モードで機能すれば最高だ。
こんにちは、セレステ。コメントありがとう！素晴らしい機能リクエストのようですね。私たちは、この機能ができるだけ役立つようにしたいと考えています！
WPFormsのライセンスをお持ちの場合は、サポートチームの信頼できるアドバイザーとログを取ることができます。サポートチケットを送信し、あなたがここに投稿したのと同じ詳細を共有してください。
通知フォームにリピーター・フィールドの値を追加するには？スマートタグにフィールドが表示されません。
こんにちは、アレン。
を使用した場合、フィールドは通知メールに含まれます。
{all_fields}タグを使用してください。Eメールをカスタマイズしたい場合 サポートチケットを送信する サポートチームの信頼できるアドバイザーが、お客様の特定のユースケースに合ったソリューションを提供いたします。どのようにオパコバッチをしていますか？
Danielさん、こんにちは。現在のところ、WPFormsは他のリピータ内にリピータフィールドを追加することをサポートしていません。この機能にご興味をお持ちいただきありがとうございます。その間に、条件付きロジックを使用するか、複数のリピータフィールドを使用して同様の結果を得ることを検討してください。
高度なオプション（ペイメント・ドロップダウンなど）でリピーター・フィールドを使用することは可能ですか？これは非常に必要であり、あれば素晴らしいことです。
サーシャ、こんにちは、
リピーターフィールド内での支払いドロップダウンの使用についてのご意見ありがとうございます。このフィールドと他のいくつかのフィールドは現在サポートされていませんが、あると非常に便利であることに同意します！
これは機能リクエストとして追加しました。今後のアップデートを計画する際に、ぜひ念頭に置いておきたいと思います。現在の機能については、リピーター・フィールドの使い方ガイドをご覧ください。
WPFormsのライセンスをお持ちの方は、サポートチームのTrusted Advisorにご相談ください。サポートチケットを送信してください。