訪問者がフォームフィールドを複製できるようにする方法

フォーム ユーザーは、フォーム上のフィールドを単純に複製できればと思うことがよくあるでしょう。 追加の名前、連絡先の詳細、勤務時間などのフィールドは、ユーザーが繰り返すだけで簡単に追加できます。

WPForms Replyer フィールドを使用すると、Web サイト ユーザーはまさにそれを行うことができます。 このチュートリアルでは、わずか 5 つのステップで重複フィールドを許可するようにフォームを変更する方法を説明します。

訪問者がフォームフィールドを複製できるようにする方法

まず、WPFormsを入手します

さて、このチュートリアルには 5 つのステップしかかからないと言いましたが、これは余計なことのように思えます。 ただし、フォーム上のフィールドを複製するには、WordPress サイトに WPForms をインストールしてアクティブ化する必要があるのは、ある意味当然のことです。

したがって、まず WPForms プラグインを入手してください。

1. フォームを選択または作成します

リピーターフィールドは、WPForms を通じて構築するフォームに含まれる優れた機能です。 これを使用すると、フォーム ユーザーはエントリを追加したり、フォームのブロック全体を複製したりできます。

ただし、ユーザーがフィールドを複製できるようにするために、まったく新しいフォームを構築する必要はありません。

サイト上ですでに使用しているフォームを、Repeater フィールドで変更したいと考えている場合があります。 フォームビルダーを開きたいフォームの下にある「編集」をクリックするだけです。

ただし、新しいフォームを作成する必要がある場合は、WPForms ギャラリーで提供されている何千ものフォーム テンプレートから選択することで、有利なスタートを切ることができます。

リピーター フィールド機能が組み込まれた幅広いフォーム テンプレートを提供しています。

または、別のフォーム テンプレートを選択し、フォーム ビルダーを使用してリピーター フィールドをすばやく追加することもできます。

そして、いつものように、空白のフォームから始めて、自分でフォームをゼロから構築することができます。

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

2.リピーターフィールドを追加する

フォームを選択してフォーム ビルダーに読み込んだら、リピーター フィールドを追加できます。

画面の左側のフィールドに表示されます。

「Repeater」フィールドをクリックし、フォーム上にドラッグして、目的の場所にドロップするだけです。

次に、[レイアウト] フィールドと同様に、[リピーター] フィールドを使用してフォーム上の他のフィールドを追加できます。

それでは、どのフィールドがリピーターフィールドセクションに属するのでしょうか? フォームユーザーに複製を許可するフィールド。

たとえば、グループ登録フォームでは、ユーザーはおそらく同時に登録する複数の参加者の名前を入力したいと考えます。

WPForms がリピーター フィールドを提供する前は、ユーザーが必要とする可能性のあるいくつかの名前フィールドでフォームが詰まっていた可能性があります。

または、ユーザーがさらに多くの名前フィールドを含めたい場合は、条件付きロジック設定を利用して追加の名前フィールドを含めた可能性があります。

いずれにせよ、Repeater フィールドを使用すると、あなたとフォーム ユーザーにとってフィールドの複製が非常に簡単になります。

3. 行またはブロックを表示する

さて、さらに先に進む前に、Repeater フィールドに適用される表示オプションを見てみましょう。

リピーターフィールド領域内のフィールドをカスタマイズして単一のRowsとして追加できるだけでなく、フィールドのブロック全体を複製できるようにすることもできます。

プロのヒント: 私と同じように、[詳細設定] タブに移動して、Repeater フィールド ラベルを非表示にします。

リピーター領域のフィールドを行として表示するように選択すると、フォーム ユーザーは各水平線を複製します。

上でわかるように、 +追加または–削除ボタンは各行の最後にあります。

一方、ブロックは、1 つの行に収まらないフィールドを繰り返して結合するのに適しています。

また、ブロックでは、+ 追加または - 削除ボタンがフィールドのセクション全体の下にあります。 これらのボタンについては後で詳しく説明します。

以下の例では、繰り返し可能なフィールドを表示する方法としてブロックを選択しました。 次に、ユーザーがセクションとして複製できるようにするフィールドを、Repeater フィールド領域に含めました。

これで、フォーム ユーザーが別の参加者を追加すると、各ブロックのフォームに必要なすべての情報を提供できるようになります。

このようにして、フォーム ユーザーはフォームのセクション全体を一度に複製できます。

4. レイアウトを選択する

次に、繰り返し可能なフィールドのレイアウトを調整するさまざまな方法を確認してください。

フィールドは単一行、等間隔の列、または不等間隔の列に設定できます。

たとえば、参加者の名前と年齢の繰り返し可能な行がある場合は、名前用に大きなスペースを配置し、年齢用に小さなスペースを配置するレイアウトを選択できます。

したがって、上記のフォーム ビルダーの行とレイアウト列の例は、フォーム ユーザーには次のように見えます。

または、ステップ 3 の最後に示した、参加者名、緊急連絡先情報、その他のフィールドを含むブロックを覚えていますか?

2 列のレイアウトを利用して、フォームのこの部分をカスタマイズできます。

ユーザーにとっては次のようになります。

プロのヒント: 上で行ったように、列の間隔を均等に保つには、単純な 1 行の名前フィールドを使用します。

リピーターフィールドのこれらの側面を変更すると、フォーム全体ですべてをきちんと整理するのに役立ちます。

5. ボタンビューをカスタマイズする

リピーターフィールドセクション内で最後にカスタマイズするのは、反復可能なフィールドを追加および削除するための + ボタンと – ボタンです。

これらは、フォーム ユーザーが名前、登録セクション、または複製できるようにしたその他のフィールドを追加するためにクリックするボタンです。

デフォルトでは、これらのボタンには各行の末尾に + または - が表示されますが、ブロックを使用するときにこれらのアイコンをカスタマイズできます。

ボタンは行の端ではなくブロックの下に格納されているため、カスタマイズによってボタンを長くしても、視覚的に整理された状態が保たれます。

まず、ボタンの種類を選択します。

ここでのオプションは次のとおりです。

• アイコン付きのボタン
• ボタン
• テキスト付きのアイコン
• アイコン
• プレーンテキスト

ボタンに何らかのテキストが表示されている場合は、次のボックスでカスタマイズできます。 ここで、ボタンのラベルの内容を変更できます。

たとえば、グループ登録フォームでは、ボタンを「参加者を追加」と表示するようにカスタマイズできます。

最後に、繰り返し可能なフィールドの最小制限と最大制限を選択できます。

デフォルトでは、この制限は最小 1、最大 10 に設定されています。つまり、フォーム ユーザーはこのフォームに最大 10 人の参加者を登録できます。

したがって、上記の設定を適用すると、グループ登録フォームのボタンはユーザーに対して次のようになります。

いつものように、カスタマイズした繰り返し可能なフィールドに満足したら、必ず保存してください。 準備ができたらフォームを公開します。

必要なのはこれだけです。 Web サイト訪問者がフォーム上のフィールドを複製できるようにする方法がわかりました。

ボーナス: 実際のリピーターフィールド

グループ登録フォームのリピーター フィールド領域の使用方法を説明しましたが、この機能の実際の使用例をいくつか共有したいと思います。

従業員タイムシートフォーム

まず、テンプレートとして提供されているこの従業員タイムシートをご覧ください。

最初に、名前、従業員の電子メール、従業員 ID、およびその週の合計時間などの従業員の詳細が収集されます。

従業員は、基本的にこのフォームを週次のタイムシートとして使用して、その週の特定の勤務日と時間を入力できます。

反復可能なブロックと列を利用して、ユーザーが作業した曜日とその日の出勤時間と退勤時間のフィールドを複製できるようにします。 これらのフィールドは最大 14 回、または 1 週間分の 2 シフトまで繰り返すことができます。

あなたのウェブサイトでこのフォームを使用したいですか? テンプレートを入手してください！

クラス名簿フォーム

次に、テンプレートとしても提供されているこのクラス名簿を確認してください。

まず、各提出物を簡単に追跡できるように教師の情報を収集します。

次に、[Repeater] フィールドを使用すると、教師は学年レベル、誕生日、その他記録保持に含めたいデータなど、各生徒の情報を名簿に簡単に追加できます。

教師はこの名簿を最大 20 人の生徒に対して使用できます。 または、いつものように、このフォーム テンプレートは完全にカスタマイズ可能なため、許可されるエントリの最大数を変更できます。

この形が好きですか？ テンプレートを入手してください！

訪問者がフォームフィールドを複製できるようにする必要があるのはなぜですか?

フォームユーザーにとっては良いことです。 訪問者がフォームフィールドを複製できるようにすると、特にユーザーが同様の情報や繰り返しの情報を入力する必要がある場合に、フォームに記入するプロセスがはるかに簡単になります。 これにより、サイト訪問者の時間を節約し、フォーム入力エクスペリエンスをより便利かつ効率的にすることができます。

そしてそれはあなたにとっても良いことです！ ユーザーがフォーム フィールドを複製できると、類似したデータ ポイントがグループ化されて管理しやすくなるため、分析用のデータの収集と整理が容易になります。

さらに、フォームを整理して視覚的に魅力的に保つことができます。 サイト訪問者が空のフィールドの長いセクションに圧倒されることはなく、追加のフィールドを非表示にしておくために条件付きロジック ルールの複雑な痕跡を作成する必要もありません。

リピーターフィールドは誰にとってもWin-Winです！

よくある質問

WPForms では、当社が提供する機能やツールに関するガイダンスを提供することに常に興奮しています。 そこで、フォーム フィールドの複製に関してよく寄せられる質問に対する回答を以下に示します。

訪問者がフォームフィールドを複製できるとはどういう意味ですか?

訪問者にフォーム フィールドの複製を許可するということは、フォーム内で特定のフィールドの複数のインスタンスを作成するオプションを訪問者に提供することを意味します。 こうすることで、類似した情報や繰り返しの情報をより効率的に入力できます。

WPForms では、フォーム ユーザーがこれらのフィールドを繰り返して詳細情報を入力できるため、これらの重複フィールドをリピーター フィールドと呼びます。

Web サイトのフォームにフィールドの重複を実装するにはどうすればよいですか?

実装方法は、使用しているプラ​​ットフォームやツールによって異なる場合があります。

WPForms に関しては、簡単なクリックまたはドラッグ アンド ドロップ操作でフィールドの複製が可能です。 場合によっては、カスタム コードまたはプラグインを使用してこの機能を追加する必要がある場合があります。

フォームフィールドを複製できる回数に制限を設定する必要がありますか?

制限を設定すると、フォームの使いやすさを維持し、ユーザーがフォームのパフォーマンスやデータ管理に影響を与える可能性のある過剰な数のフィールドを作成するのを防ぐことができます。

WPForms リピーター フィールドを使用すると、重複エントリの最大制限を設定して、フォームのこの側面を制御できます。

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

次に、この簡単で簡単なガイドを確認してください

訪問者がフィールドを複製できるようにする方法についてはかなりの情報を共有しましたが、Repeater フィールドの使用についてはさらに学ぶべきことがあります。 この機能は非常に多くの機能を提供するため、カバーすべきことがたくさんあります。

ここでは取り上げていないカスタマイズのアイデアを含む、追加の簡単で簡単なヒントを学ぶには、リピーター フィールド チュートリアルを必ず参照してください。

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

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