フォームのユーザーが、フォームのフィールドを単に複製できたらいいのにと思うことは多々あるでしょう。余分な名前、連絡先の詳細、勤務時間などのフィールドは、ユーザーが単にそれらを繰り返すことができれば、追加するのは簡単です。
WPFormsのRepeaterフィールドを使えば、あなたのウェブサイトのユーザーがそれを行うことができます！このチュートリアルでは、わずか5ステップでフォームを変更し、フィールドの複製を許可する方法を紹介します。
訪問者がフォームフィールドを複製できるようにする方法
この記事で
まず、WPFormsを入手する
このチュートリアルでは5つのステップしか必要ないと言ったので、余計なことのように思えますが😉、フォームのフィールドを複製するためにWordPressサイトにWPFormsをインストールして有効化する必要があるのは、ある意味当然のことです。
だから、まずWPFormsプラグインを手に入れよう！
1.フォームを選択または作成する
リピータフィールドはWPFormsで作成したフォームに含まれる素晴らしい機能です。これを使うことで、フォームのユーザはより多くのエントリーを追加したり、フォームのブロック全体を複製することができます。
しかし、ユーザーがフィールドを複製できるようにするために、まったく新しいフォームを作成する必要はありません。
リピータ・フィールドを使って変更したいフォームがすでにあなたのサイトにあるかもしれません。フォームビルダーを開きたいフォームの下にある「編集」をクリックするだけです。
しかし、新しいフォームを作成する必要がある場合は、WPFormsギャラリーで提供されている何千ものフォームテンプレートから選択することで、先手を打つことができます。
弊社では、リピータフィールド機能を組み込んだフォームテンプレートを豊富に取り揃えています。
または、別のフォームテンプレートを選択し、フォームビルダーで素早くリピーターフィールドを追加することもできます。
また、いつものように、空白のフォームから始めて、フォームを一から自分で作成することもできます。
2.リピーター・フィールドの追加
フォームビルダーでフォームを選択して読み込んだら、リピーターフィールドを追加します。
画面左側のフィールドに表示されます。
リピーター・フィールドをクリックし、フォームにドラッグして、必要な場所にドロップするだけです。
そして、レイアウト・フィールドと同様に、リピーター・フィールドもフォーム上の他のフィールドを追加することができます。
では、どのフィールドがリピーターフィールドセクションに属するのでしょうか？フォームユーザーに複製を許可したいフィールドです。
例えば、グループ登録フォームでは、ユーザーはおそらく同時に登録する参加者の複数の名前を含めたいと思うだろう。
WPFormsがRepeaterフィールドを提供する以前は、ユーザが必要とするかもしれないいくつかのNameフィールドでフォームを詰まらせていたかもしれません。
または、条件付きロジックの設定を利用して、ユーザーがさらに名前フィールドを追加したい場合に、追加フィールドを含めることもできます。
どのようなケースであれ、リピーターフィールドを使えば、あなたとフォームユーザーにとって、フィールドの複製がとても簡単になります！
こちらもお読みください：教育サイトでWPFormsを使う方法
3.行またはブロックを表示する
さて、先に進む前に、リピーター・フィールドに適用される表示オプションを見てみよう。
リピーター・フィールド・エリア内のフィールドをカスタマイズして単一の行として追加できるだけでなく、フィールドのブロック全体を複製できるようにすることもできます。
プロのヒントAdvanced（詳細）タブに移動して、私のようにRepeaterフィールドのラベルを非表示にする。
リピーター・エリアのフィールドを行として表示するように選択すると、フォーム・ユーザーは各横線を複製します。
上にあるように、＋追加、 -削除ボタンは各行の最後にあります。
一方、ブロックは、1行では収まらないような、繰り返し使用するフィールドを組み合わせるのに適している。
また、ブロックでは、フィールドのセクション全体の下に＋追加、-削除ボタンがあります。これらのボタンについては後ほど。
下の例では、繰り返しフィールドを表示する方法としてブロックを 選択しました。そして、ユーザーに複製させたいフィールドをセクションとしてリピーターフィールドエリアに含めました。
これで、フォームのユーザーが別の参加者を追加するときに、各ブロックのフォームに必要な情報をすべて入力できるようになりました。
こうすることで、フォームユーザーはフォームのセクション全体を一度に複製することができます。
4.レイアウトを選ぶ
次に、繰り返しフィールドのレイアウトをさまざまな方法でアレンジできることを確認してください。
フィールドは一列、等間隔列、不揃い列で設定できます。
たとえば、参加者の名前と年齢の行を繰り返し表示する場合、名前には大きなスペースを、年齢には小さなスペースを配置するレイアウトを選択できます。
つまり、上記のフォームビルダーの行とレイアウトカラムの例は、フォームユーザーには次のように見えるでしょう：
あるいは、ステップ3の最後に示した、参加者名、緊急連絡先、その他のフィールドがあるブロックを覚えていますか？
フォームのこの部分をカスタマイズするために、2列のレイアウトを利用することができます。
そうすると、ユーザーには次のように見えるだろう：
プロのアドバイス上でやったように、シンプルな1行の名前フィールドを使って列の間隔を均等に保つ。
リピーター・フィールドのこのような部分を変更するだけで、フォーム全体がすっきりと整理される。
5.ボタン表示のカスタマイズ
リピーター・フィールド・セクションでカスタマイズする最後のことは、リピーター・フィールドを追加したり削除したりするための＋ボタンと-ボタンです。
これらのボタンは、フォームのユーザーがクリックすることで、名前、登録項目、その他のフィールドを追加することができます。
デフォルトでは、これらのボタンは各行の末尾に「+」または「-」を表示しますが、ブロックを利用する際にこれらのアイコンをカスタマイズすることができます。
ボタンは行の端ではなくブロックの下に配置されているため、カスタマイズによってブロックが長くなっても、視覚的に整然とした状態を保つことができる。
まず、ボタンの種類を選択します。
ここでのオプションは以下の通り：
- アイコン付きボタン
- ボタン
- テキスト付きアイコン
- アイコン
- プレーンテキスト
ボタンが何らかのテキストを表示する場合、次のボックスでカスタマイズできます。ここでボタンラベルの内容を変更することができます。
例えば、グループ登録フォームでは、ボタンを「参加者を追加」とカスタマイズすることができます。
最後に、反復可能なフィールドの最小値と最大値を選択することができます。
デフォルトでは、この制限は最小1、最大10に設定されています。つまり、フォームユーザーはこのフォームに最大10人の参加者を登録することができます。
したがって、上記の設定を適用すると、グループ登録フォームのボタンはユーザーに対して次のように表示されます：
いつものように、カスタマイズした繰り返し入力可能なフィールドに満足したら、 を保存し、準備ができたら公開するようにしてください。
これだけです！これで、ウェブサイトの訪問者がフォームのフィールドを複製できるようにする方法がわかりました。
ボーナス：リピーター・フィールドの活躍
グループ登録フォームでリピーター・フィールド・エリアの使い方を紹介しましたが、この機能を実際に使っている他の良い例をいくつか紹介したいと思います。
従業員タイムシートフォーム
まず、当社がテンプレートとして提供している従業員用タイムシートをご覧ください：
まず、従業員の氏名、Eメール、従業員ID、その週の総労働時間など、従業員の詳細が収集される。
その後、従業員はその週の具体的な勤務日数と勤務時間を入力し、実質的にこのフォームを週単位のタイムシートとして使用することができます。
反復可能なブロックとカラムを利用し、勤務した曜日とその日の出勤・退勤時間のフィールドを複製することができます。これらのフィールドは、最大14回、またはダブルシフトの1週間分を繰り返すことができます。
あなたのウェブサイトでこのフォームを使いたいですか？テンプレートを入手する！
クラス名簿フォーム
では、このクラス名簿をテンプレートとして提供していますので、ご覧ください：
各投稿を簡単に追跡できるよう、教師の情報を収集することから始まる。
そして、リピーターフィールドを使えば、教師は簡単に名簿の各生徒の情報を追加することができます。例えば、学年、誕生日、その他記録保持のために含めたいデータなどです。
教師はこの名簿を最大20名の生徒に使用することができます。また、いつものように、このフォームテンプレートは完全にカスタマイズ可能ですので、記入可能な最大数を変更することもできます。
このフォームが気に入りましたか？テンプレートを入手する
また、フォームをさらに最適化するために、WPFormsのリピーターフィールドや条件ロジックを使ったレイアウトフィールドを使うべきかどうかについては、こちらのガイドをご覧ください。
なぜ訪問者がフォームフィールドを複製できるようにしなければならないのか？
フォームユーザーにとって良いことです！訪問者がフォームフィールドを複製できるようにすることで、フォームへの入力がより簡単になります。これにより、サイト訪問者の時間を節約し、フォーム入力体験をより便利で効率的なものにすることができます。
それはあなたにとっても良いことです！ユーザーがフォームフィールドを複製できるようになると、同じようなデータポイントがグループ化され管理しやすくなるため、分析のためのデータ収集や整理が容易になります。
さらに、フォームを整理して視覚的にアピールすることもできます。あなたのサイトの訪問者は、空のフィールドの長いセクションに圧倒されることはありませんし、追加のフィールドを非表示に保つために条件付きロジックルールの複雑なトレイルを作成する必要はありません。
リピーター・フィールドは誰にとってもメリットがある！
よくあるご質問
WPFormsでは、私たちが提供する機能やツールに関するガイダンスを提供することにいつもわくわくしています。ここでは、フォームフィールドの複製に関するよくある質問にお答えします：
訪問者がフォーム・フィールドを複製できるようにするとはどういうことか？
訪問者がフォームフィールドを複製できるようにすることは、フォーム内に特定のフィールドのインスタンスを複数作成できるオプションを提供することを意味します。こうすることで、似たような情報や繰り返し入力する情報をより効率的に入力することができます。
WPFormsでは、フォームユーザーがこれらのフィールドを繰り返してより多くの情報を入力できることから、これらの重複フィールドをリピーターフィールドと呼んでいます。
ウェブサイトのフォームにフィールドの重複を実装するには？
実装方法は、使用しているプラットフォームやツールによって異なる場合があります。
WPFormsに関しては、単純なクリックまたはドラッグ＆ドロップ操作でフィールドの複製を可能にします。他のケースでは、この機能を追加するためにカスタムコードやプラグインを使用する必要があるかもしれません。
フォーム・フィールドの重複回数に制限を設けるべきでしょうか？
制限を設定することで、フォームの使いやすさを維持し、ユーザーが過剰な数のフィールドを作成し、フォームのパフォーマンスやデータ管理に影響を与えることを防ぐことができます。
WPForms Repeaterフィールドでは、重複入力の上限を設定することができます。
次に、この手軽で簡単なガイドをチェックしよう
訪問者がフィールドを複製できるようにする方法については、かなり多くの情報を共有しましたが、リピーター・フィールドの使用については、さらに学ぶべきことがあります。この機能は非常に多くのことを提供するので、カバーすることがたくさんあります。
ここで紹介されていないカスタマイズのアイデアなど、簡単で手っ取り早いヒントを学ぶには、リピーター・フィールドのチュートリアルをぜひご覧ください。
フォームを作る準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proにはたくさんの無料テンプレートが含まれており、14日間の返金保証がついています。
この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。
