WordPressフォームにリピーターフィールドを追加する方法は?

公開: 2022-01-24

ユーザー向けにパーソナライズされたフォームが必要な場合は、WordPressリピーターフィールドをフォームに追加する方法を学ぶ必要があります。

リピーターフィールドがあるということは、ユーザーが必要な数のサブフィールドを作成し、必要なすべてのデータを入力できることを意味します。 次に、各ユーザーからカスタマイズされたデータを取得して、ユーザーをより適切に分析できるようにします。

Everest Formsのようなプラグインは、面倒なことなくWordPressフォームにリピーターフィールドを追加するのに役立ちます。 そして、以下のステップバイステップのチュートリアルでその方法を示します。

ただし、その前に、フォームで繰り返し可能なフィールドの使用を検討する必要がある主な理由を理解しましょう。

目次

フォームに繰り返し可能なフィールドが必要なのはなぜですか?

ユーザーから詳細情報を抽出しようとすると、フォームが非常に長く複雑になる可能性があります。

ユーザーの完全な学歴を知る必要があるとします。 このような場合、可能な資格と学位ごとにフィールドを表示すると、フォームが乱雑になります。

ユーザーが必要な数のフィールドを作成して教育の詳細を入力できるWordPressリピーターフィールドを使用する方がはるかに良いのではないでしょうか。 これにより、必要なすべての情報を受け取りながら、ユーザーにパーソナライズされたフォームエクスペリエンスが提供されます。

したがって、このようなWordPressフォームの繰り返し可能なフィールドを使用すると、次のことができます。

  • 長くて複雑なフォームによって引き起こされるフォームの放棄率を減らします。
  • ユーザーから正確な情報を受け取ります。

そのため、フォームの必要に応じてWordPressリピーターフィールドを追加する必要があります。

そうは言っても、WordPressでリピーターフィールドを作成する方法についてのガイドを見ていきましょう。


WordPressフォームにリピーターフィールドを追加する方法は?

このチュートリアルのように、EverestFormsを使用してWordPressフォームにリピーターフィールドを追加することをお勧めします。

エベレストフォームワードプレスプラグイン

これはWordPressで最も人気のあるフォームビルダープラグインの1つであり、100,000以上のアクティブなインストールを獲得しています。 そして、それはすべて、そのユーザーフレンドリーなドラッグアンドドロップフォームビルダーとカスタマイズオプションのおかげです。

プラグインの機能を拡張するために使用できるプレミアムアドオンにバンドルされている高度な機能は言うまでもありません。 したがって、WordPressフォームの繰り返し可能なフィールドは、その多くの優れた機能の1つにすぎません。

Everest Formsのようなプラグインが手元にある場合、WordPressフォームにリピーターフィールドを追加するのは非常に簡単です。 以下に説明する手順を正確に実行する必要があります。

さぁ、始めよう!

1. EverestFormsFreeプラグインをインストールしてアクティブ化します

最初に行う必要があるのは、無料バージョンのEverestFormsをインストールしてアクティブ化することです。

これを行うには、WordPress Webサイトのダッシュボードにログインし、 [プラグイン]>>[新規追加]を開きます。

新しいタブを追加するプラグイン

検索バーに「EverestForms」と入力すると、プラグインが検索結果に表示されます。 [今すぐインストール]ボタンを押して、インストールプロセスを開始します。

無料のエベレストフォームプラグインをインストールする

次に、[アクティブ化]ボタンをクリックしてインストールを完了します。 これで、サイトにEverestFormsプラグインの無料バージョンができました。

無料のエベレストフォームプラグインを有効にする

2.プレミアムリピーターフィールドアドオンをダウンロードしてインストールします

無料のEverestFormsプラグインは、簡単な連絡先やその他の種類のフォームを作成するのに十分です。 ただし、WordPressリピーターフィールドを使用してフォームを具体的に作成するには、プレミアムバージョンのエベレストフォームが必要です。 リピーターフィールドアドオンが付属しており、フォームに必要な数のリピーターフィールドを追加できます。

そのため、このアドオンを使用するには、最初にエベレストフォームのプロフェッショナルプランまたはエージェンシープランを購入する必要があります。 公式価格ページにアクセスして、自分に適した2つのプランのいずれかを購入してください。

エベレストフォームの価格プラン

次に、アカウントを作成してログインします。 アカウントダッシュボードが表示され、プランで利用できるすべてのアドオンが[ダウンロード]セクションに一覧表示されます。

アドオンをダウンロード

必要なのは、 EverestFormsProRepeaterFieldのアドオンだけです。 両方をダウンロードするだけで、ZIPファイルとしてデバイスに保存されます。

ここで、WordPressダッシュボードに戻り、 [プラグイン]>>[新規追加]を開きます。

これで、ファイルをアップロードして1つずつインストールできます。 リピーターフィールドアドオンをインストールする前に、必ずProアドオンをインストールしてください。 そうしないと、重大なエラーが発生する可能性があります。

したがって、[プラグインのアップロード]ボタンをクリックして、最初にEverestFormsProファイルを選択します。

Proアドオンをアップロード

次に、 [今すぐインストール]と[プラグインのアクティブ化]を押して、インストールを完了します。

Proアドオンをアクティブ化

リピーターフィールドアドオンを使用して同じプロセスを繰り返します。

これで、[インストール済みプラグイン]ページには、エベレストフォームエベレストフォーム(Pro)エベレストフォームリピーターフィールドの3つのプラグインが表示されます。

ライセンスキーの通知を入力してください

このページの上部に、 Everest Forms(Pro)アドオンのライセンスキーを入力するように指示する通知が表示されます。 このキーは、アカウントダッシュボードの[ライセンスキー]タブにあります。

エベレストフォームライセンスキー

キーをコピーして、 Everest Forms(Pro)の下のフィールドに貼り付け、Enterキーを押します。

これで、繰り返し可能なフィールドを持つフォームの作成を開始する準備が整いました。


3.リピーターフィールドを使用して新しいフォームを作成します

エベレストフォーム>>新規追加に移動することから始めます。 このページでは、まったく新しいフォームを作成したり、作成済みのテンプレートをカスタマイズしたりすることができます。

新しいエベレストフォームを追加する

エベレストフォームには、さまざまな種類のフォーム用の複数のスターターテンプレートが付属しています。 時間が足りない場合は、これらのテンプレートを使用して、簡単な連絡フォーム、休暇申請フォーム、医療予約フォーム、求人応募フォームなどを作成できます。

新しいフォームは最初から始めます

ただし、このチュートリアルでは、新しいフォームを最初から作成し、それにWordPressリピーターフィールドを追加する方法を示します。 したがって、[最初から開始]オプションをクリックします。

次に、フォームに単純で論理的な名前を付けます。 たとえば、「訪問者のお問い合わせフォーム」というタイトルを付けることができます。

フォーム名を付ける

ボタンを押すと、次のようなフォームビルダーが表示されます。

WordPressフォーム繰り返し可能フィールドビルダーインターフェイス

左側には、使用可能なすべてのフォームフィールドとそのフィールドオプションがあります。 右側は、行を追加してフィールドを配置することでフォームを作成する場所です。 あなたがしなければならないのは、左から右の行にフィールドをドラッグすることです。

WordPressフォームの繰り返し可能なフィールドのフィールドをドラッグアンドドロップします

別の行を追加する必要がある場合は、[行の追加]をクリックします。 これにより、繰り返し可能なフィールドではなく、通常のフィールドの新しい行が作成されます。

後者の場合、[リピーター行の追加]ボタンを押す必要があります。

新しいWordPressリピーターフィールド行を追加

これにより、通常どおりにフィールドを追加できるリピーター行が作成されます。 唯一の違いは、このフィールド行がフォーム上で繰り返し表示されるようになることです。

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

フォームが完成するまで必要なフィールドを追加し続け、完了したら[保存]をクリックします。 プレビュー機能を使用すると、フロントエンドでフォームがどのように表示されるかを確認できます。

リピーターフィールドフォームの保存とプレビュー

4.フォーム設定をカスタマイズおよび構成します

次に、フォームに追加したすべてのフィールドをカスタマイズする必要があります。 これを行うには、編集するフィールドをクリックすると、そのフィールドオプションが左側に表示されます。

一般的なフィールドオプションWordPressリピーターフィールド

ここから、ラベルメタキー、および説明を編集できます。 また、ユーザーがフォームを送信するために[必須]フィールドを作成することもできます。 これらの主要なオプションに加えて、プラグインにはさまざまなフィールド用の特定のカスタマイズオプションも付属しています。

さらに、エベレストフォームには、プレースホルダーテキストデフォルト値CSSクラス自動入力の有効化などの高度なオプションが用意されています。

通常のフィールドの詳細オプション

同様に、パーソナライズされたフォーム入力エクスペリエンスのために、フィールドで条件付きロジックを有効にすることができます。

また、リピーター行内のフィールドをカスタマイズする前に、リピーターフィールドをクリックしてリピーター行を編集する必要があります。

WordPressリピーターフィールド行オプション

一般的なオプションとは別に、リピーター行には次の詳細オプションがあります。

  • リピーターフィールドを非表示:フロントエンドビューでリピーターフィールドを非表示または表示します。
  • 繰り返し制限:リピーターフィールドの繰り返し制限を設定します。 リピート制限を空のままにしておくと、ユーザーがリピーターフィールドを無限に追加できるようになります。
  • 新しいラベルの追加: [追加]ボタンのラベルを変更します。
  • ラベルの削除: [削除]ボタンのラベルを変更します。
  • ラベルの非表示フォームフィールドのラベルを非表示にできます。
  • CSSクラス:リピーターフィールドにカスタムCSSクラスを使用します。
WordPressリピーターフィールドの詳細オプション

それがすべてではありません。 フォームビルダーの[設定]タブには、さらに多くの構成オプションがあります。

一般設定構成

[全般]セクションでは、フォーム名フォームの説明レイアウトデザイン送信ボタンのテキストフォームが無効になっているメッセージなどを変更できます。 さらに良いことに、スパム対策を有効にしたり、エントリの保存を無効にしたり、フォームのajaxフォーム送信を許可したりすることができます。

また、管理者とユーザーの両方の[メール]セクションからメールテンプレートを作成および編集することもできます。 問題の電子メールを送信する場合と送信しない場合に条件付きロジックを適用することもできます。

メール設定の構成

必要な変更を完了したら、[保存]ボタンを押すことを忘れないでください。

変更後にフォームを保存

これでフロントエンドで、フォームに入力するユーザーは、WordPressリピーターフィールドを介して完全な情報を提供できるようになります。 [追加]ボタンをクリックするだけで、同じフィールドの新しいセットがフォームに表示されます。 また、不要な行を削除することもできます。

追加削除フィールド行

5.フォームをWordPressWebサイトに配置します

これで、繰り返し可能なフィールドを含むカスタムお問い合わせフォームをWordPressWebサイトに配置する準備が整いました。

これは2つの簡単な方法で行うことができます。 フォームビルダーの上部からフォームのショートコードをコピーして、フォームを表示するページまたは投稿を開きます。

Builderでフォームのショートコードをコピーする

次に、 +アイコンをクリックして、 Shortcodeブロックを追加します。

ショートコードブロックを追加

ここにコピーしたショートコードを貼り付けて、[更新]をクリックします。

ショートコードを貼り付けて更新

または、 Everest Formsブロックを検索して、ドロップダウンからフォームを選択することもできます。

エベレストフォームブロックを使用する

最後に、[更新]をクリックすると、完了です。 WordPressリピーターフィールドを含むフォームがWebサイトに公開されました。


まとめ

繰り返し可能なフィールドは、ユーザーに関するカスタマイズされたデータが必要な場合に非常に便利な機能です。 また、Everest Formsプラグインを使用すると、リピーターフィールドを使用してカスタムフォームを簡単に作成し、サイトに配置できます。

必要なのは、リピーターフィールドアドオンとこの包括的なチュートリアルだけです。

ただし、これはエベレストフォームに伴う広大な可能性を垣間見るだけでした。 たとえば、お問い合わせフォームのデータをGoogleスプレッドシートに送信したり、アンケートフォームを作成したり、送信ボタンの色を変更したりすることもできます。

エベレストフォームの詳細については、WordPressコンテンツが満載のブログをご覧ください。 また、FacebookやTwitterでフォローして、最新情報を入手してください。