フォームフィールドの複製を訪問者に許可する方法

フォームのフィールドを単純に複製できればいいのに、とフォームの利用者が思うような場面は多々あります。追加の名前、連絡先情報、労働時間などのフィールドは、ユーザーがそれらを繰り返すだけで簡単に追加できます。

WPFormsの繰り返しフィールドを使えば、ウェブサイトの利用者はまさにそれを実行できます!このチュートリアルでは、わずか5ステップでフォームにフィールドを複製できるようにする方法を説明します。

フォームフィールドの複製を訪問者に許可する方法

まず、WPFormsを入手する

さて、このチュートリアルは5ステップで完了すると言いましたが、これは追加のように思えるかもしれません。😉 しかし、フォームのフィールドを複製するには、WordPressサイトにWPFormsがインストールされ、有効化されている必要があるというのは当然のことです。

WPForms ホーム

ですから、まずWPFormsプラグインを入手してください

1. フォームの選択または作成

繰り返しフィールドは、WPFormsで作成するフォームに含まれる優れた機能です。これを使用すると、フォームの利用者はより多くのエントリを追加したり、フォームのブロック全体を複製したりできます。

しかし、利用者がフィールドを複製できるようにするために、まったく新しいフォームを作成する必要はありません。

サイトで既に利用しているフォームを繰り返しフィールドで変更したい場合は、フォームビルダーを開きたいフォームの下にある「編集」をクリックするだけです。

フォームの編集

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

繰り返しフィールドの機能が組み込まれた、豊富な種類のフォームテンプレートを提供しています。

リピーターフィールドのフォームテンプレートを参照する

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

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

今すぐWordPressフォームを作成する

2. 繰り返しフィールドの追加

フォームを選択し、フォームビルダーで読み込んだら、繰り返しフィールドを追加できます。

画面左側のフィールドの中にそれが見つかるはずです。

フォームにリピーターフィールドを追加する

繰り返しフィールドをクリックし、フォームにドラッグして、配置したい場所にドロップするだけです。

次に、レイアウトフィールドと同様に、繰り返しフィールドを使用すると、フォーム内の他のフィールドをその中に含めることができます。

リピーターフィールド領域にフィールドを追加する

では、どのフィールドを繰り返しフィールドセクションに含めるべきでしょうか?フォームの利用者に複製を許可したいフィールドです。

例えば、グループ登録フォームでは、利用者は同時に登録する参加者の名前を複数含めたいと思うでしょう。

リピーターフィールドのフロントエンド表示

WPFormsが繰り返しフィールドを提供する前は、ユーザーが*必要とするかもしれない*名前フィールドをいくつかフォームに詰め込んでいたかもしれません。

または、ユーザーがさらに含めたい場合に、条件付きロジック設定を使用して追加の名前フィールドを含めていたかもしれません。

条件付きロジック設定の適用

いずれにしても、繰り返しフィールドにより、あなたとフォームの利用者にとって、フィールドの複製がずっと簡単になりました!

関連記事: 教育系ウェブサイトでWPFormsを使用する方法

3. 行またはブロックの表示

さて、さらに進む前に、リピーターフィールドに適用されている表示オプションを確認してください。

リピーターフィールドの行を表示するように選択する

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

プロのヒント: 私が行ったように、リピーターフィールドのラベルを非表示にするには、[高度な設定]タブに移動してください。

行として表示するリピーターエリアのフィールドを選択すると、フォームユーザーは各水平線(行)を複製します。

リピーターフィールドブロックのフロントエンド表示

上記のように、+追加ボタンまたは–削除ボタンは各行の末尾にあります。

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

リピーターフィールドをブロックとして表示するように選択する

そしてブロックの場合、+追加ボタンまたは–削除ボタンはフィールド全体のセクションの下にあります。これらのボタンについては後述します。

以下の私の例では、繰り返したいフィールドを表示する方法としてブロックを選択しました。次に、ユーザーがセクションとして複製できるようにしたいフィールドをリピーターフィールドエリアに含めました。

リピーターフィールドブロックのフロントエンド表示

これで、フォームユーザーが別の参加者を追加する際に、ブロックごとにフォームで要求したすべての情報を提供できます。

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

4. レイアウトの選択

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

リピーターフィールドのレイアウトを選択する

フィールドを単一行、均等に配置された列、および不均等な列に設定できます。

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

リピーターフィールドの2列レイアウトを選択する

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

または、ステップ3の最後に示した、参加者名、緊急連絡先情報、その他のフィールドを含むブロックを思い出してください。

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

リピーターフィールドの2列レイアウトを選択する

すると、ユーザーには次のような表示になります。

リピーターフィールドの2列レイアウトのフロントエンド表示

プロのヒント: 上記のように、列を均等に配置するために、シンプルで一行の名前フィールドを使用してください。

リピーターフィールドのこれらの側面を変更するだけで、フォーム全体で物事を整然と整理しておくことができます。

5. ボタン表示のカスタマイズ

リピーターフィールドセクション内でカスタマイズする最後のことは、繰り返しフィールドを追加および削除するための+および–ボタンです。

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

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

リピーターフィールドボタンの設定に移動する

ボタンは行の末尾ではなくブロックの下に配置されるため、カスタマイズによって長くなる場合でも、視覚的に整然とした状態を保つことができます。

まず、ボタンタイプを選択します。

リピーターフィールドのボタンタイプを選択する

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

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

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

リピーターフィールドのボタンラベルをカスタマイズする

たとえば、グループ登録フォームでは、ボタンの表示を「参加者を追加」に変更できます。

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

リピーターフィールドのボタン制限を設定する

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

したがって、上記のНастройкиを適用すると、グループ登録フォームのボタンはユーザーにとって次のようになります。

リピーターフィールドボタンのフロントエンド表示

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

これで完了です!ウェブサイト訪問者がフォームでフィールドを複製できるようにする方法がわかりました。

ボーナス: 繰り返しフィールドの活用例

グループ登録フォームで繰り返し可能フィールドエリアを使用する方法を示しましたが、この機能が実際に機能する他の良い例をいくつか共有したいと思います。

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

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

従業員タイムシートフォームテンプレートのフル表示

まず、従業員の名前、従業員メール、従業員ID、および週の合計時間を含む従業員の詳細が収集されます。

テンプレートの従業員詳細セクション

次に、従業員は週ごとの具体的な勤務日と時間を入力でき、実質的にこのフォームを週次タイムシートとして使用します。

フォームテンプレートの週次タイムシートセクション

繰り返し可能なブロックと列を使用しており、ユーザーは勤務した曜日と、その日の出勤時間と退勤時間をフィールドで複製できます。これらのフィールドは最大14回、つまり週の二重シフト分繰り返すことができます。

このフォームをウェブサイトで使用したいですか? テンプレートを入手!

クラス名簿フォーム

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

クラス名簿フォームテンプレートの全画面表示

各提出を簡単に追跡できるように、まず教師の情報を収集することから始まります。

フォームテンプレートの教師情報セクション

次に、繰り返し可能フィールドを使用して、教師は名簿の各生徒の情報(学年、誕生日、または記録保持のために含めたいその他のデータ)を簡単に追加できます。

フォームテンプレートのクラス名簿セクション

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

このフォームはお好きですか? テンプレートを入手!

また、このガイドをチェックして、条件付きロジックを使用してWPFormsの繰り返し可能フィールドまたはレイアウトフィールドを使用すべきかどうかを確認し、フォームをさらに最適化してください。

訪問者にフォームフィールドを複製させるのはなぜですか?

フォームユーザーにとって良いことです!訪問者にフォームフィールドを複製させることで、特にユーザーが類似または反復的な情報を入力する必要がある場合、フォームの入力プロセスがはるかに簡単になります。これにより、サイト訪問者の時間を節約し、フォーム入力体験をより便利で効率的にすることができます。

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

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

リピーターフィールドは、すべての人にとってWin-Winです!

よくある質問

WPFormsでは、提供する機能とツールに関するガイダンスを提供できることを常に嬉しく思っています。そこで、フォームフィールドの複製に関するよくある質問への回答をご紹介します。

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

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

WPFormsでは、フォームユーザーがより多くの情報を入力するためにこれらのフィールドを繰り返すことができるため、これらの複製をリピーターフィールドと呼んでいます。

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

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

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

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

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

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

今すぐWordPressフォームを作成する

次に、この迅速かつ簡単なガイドをご覧ください

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

ここでカバーされていないカスタマイズのアイデアを含む、追加の迅速かつ簡単なヒントを学ぶには、リピーターフィールドチュートリアルをご覧ください。

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

もしこの記事がお役に立ったなら、WordPressの無料チュートリアルやガイドをもっと知るために、FacebookTwitterでフォローしてください。

開示:当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPFormsがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかをご覧ください

ケイシー・クーパー

ケイシーはWPFormsのブログを担当し、週刊ニュースレターを監督しています。また、楽しいフォームテンプレートを作成することにも情熱を注いでいます。2016年からWordPressでブログを書き、それについて執筆しています。 詳細はこちら

最高のWordPressドラッグアンドドロップフォームビルダープラグイン

簡単、高速、安全。WPFormsを信頼する600万人以上のウェブサイト所有者に加わりましょう。

コメントを追加

コメントを残していただきありがとうございます。コメントはすべて、当社のプライバシーポリシーに従ってモデレーションされます。また、すべてのリンクはnofollowとなります。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。

このフォームはCloudflare Turnstileによって保護されており、Cloudflareのプライバシーポリシーおよび利用規約が適用されます。