WordPressでマルチステップフォームを作成するには?

公開: 2020-07-24

マルチステップ フォームは、長いフォームを複数の部分/ステップに分割して、長いフォームを簡単に完成できるようにするものです。

従来の長いフォームとは異なり、マルチステップ フォームは、特にフォームに 3 つ以上のフォーム フィールドがある場合に、サイトのフォーム コンバージョン率を高めることができます。 さらに、必要な情報を 1 つの長い形式で表示するのではなく、複数のページに分けて表示することで、ユーザーは必要な情報を完成させることができます。

WordPressでマルチステップフォームを作成するには?

まず、WordPress サイトに WPForms がインストールされていることを確認する必要があります。

次に、 WPForms » Add Newに移動して、新しいフォームを作成します。

このガイドでは、簡単な連絡先フォームを作成します。

フォーム設定タブにいると思います。

次に、フォームに名前を付けて、使用するテンプレートを選択します。

シンプルなお問い合わせフォーム テンプレート
WPForm プラグインを使用して簡単な連絡先を作成する

ここでは、 Simple Contact Formテンプレートを選択しています。

WPForms は、ドラッグ アンド ドロップ ビルダーで簡単な連絡先フォームを作成します。

WPFormsを使ったシンプルなお問い合わせフォーム
WPFormsを使ったシンプルなお問い合わせフォーム

これで、自動的に[フィールド] タブにリダイレクトされ、そこからドラッグするだけでフォームにフィールドを追加できます。

WPForms プラグインを入手する

既存のフォーム フィールドをクリックしてドラッグし、コンタクト フォームの順序を並べ替えることもできます。

次のステップは、フォームをさまざまな部分に分割することです

フォームにフィールドを追加したり、フォームを編集したりした後、改ページフォーム フィールドをサイトに追加して、異なるページに分割する必要があります。

改ページ フィールドは、標準フィールドのすぐ下のファンシー フィールドの下にあります。

WPForms の改ページ ファンシー フィールド
WPForms の改ページ ファンシー フィールド

フォームを分割する場所からフィールドを配置します。

改ページ フィールドは、任意の場所に追加できます。 そして興味深いことに、そこから追加のフォーム フィールドを追加して、フォームを完成させることができます。

プログレスバーをカスタマイズしましょう

進行状況インジケーターを表示して、フォームのさまざまなセクションについてユーザーに知らせるとします。 このようにして、進行状況バーに基づいて、フォームのどこにいるのか、[送信] をクリックする前に入力する必要がある情報がどれだけ残っているのかを常に把握できます。

簡単にするために、WPForms には 3 つの異なるブレッドクラム スタイルのインジケーター バーがあります。

  1. コネクタ:多段階フォームの各部分の接続バーとページ タイトルを表示します。
  2. サークル:マルチステップ フォームのページごとに 1 つのサークルとページ タイトルを表示します。
  3. プログレス バー:ユーザーが入力するフォームの進行状況を示します。
最初の改ページ セクション。
最初の改ページ セクション。

プログレス バーをカスタマイズするには、[最初の改ページ] セクションをクリックする必要があります。

ここでは、フォーム エディターに新しいパネルが表示され、そこからプログレス バーを 1 つ選択できます。 進行状況インジケーターの色を変更するオプションもあります。

さらに、ページ タイトルを変更して、ユーザーが[サークル] または [コネクタ] オプションを選択した場合にフォームのどの部分にいるのかがわかるようにすることができます。

wpforms の 2 番目の改ページ セクション
wpforms の 2 番目の改ページ セクション

次のページのタイトルと、サイト訪問者をフォームの次のページに移動させるボタンをカスタマイズするには、フォームに改ページを追加したときに作成した [改ページ]セクションをクリックします。

wpform改ページで前ページボタンを表示
wpform改ページで前ページボタンを表示

フォームに [前のページ] ボタンを表示する機能を有効にすることもできます。 これにより、訪問者は必要に応じてフォームの前のページに戻ることができます。

完了したら、[保存] をクリックします

フォーム設定の構成の時間

[設定] タブから、[一般] に移動します。

WPForms の一般的なフォーム設定
一般的なフォーム設定

以下を構成できます。

  • フォーム名:ここでフォームの名前を変更できます。
  • フォームの説明: フォームの説明を追加できます。
  • 送信ボタンのテキスト: 送信ボタンのコピーをカスタマイズします。
  • スパム防止:ハニーポット機能または Google reCAPTCHA を使用して、コンタクト フォームのスパムを阻止します。

スパム防止機能は、すべての WordPress フォームで自動的に有効になります。 別の形式のスパム防止を使用する場合は、このオプションのクリックを解除してください。

  • AJAX フォーム:ページをリロードせずに AJAX 設定を有効にします。
  • GDPR の機能強化: GDPR 要件に準拠するために、IP アドレスやユーザー エージェントなどのエントリ情報とユーザーの詳細の保存を無効にすることができます。

完了したら、[保存] をクリックします

フォームの通知の設定にジャンプしましょう

このセクションから、新しいエントリ (ユーザーの送信) の通知を受け取るかどうかを選択できます。

フォーム通知
フォーム通知の管理

スマート タグを使用している場合は、ユーザーがフォームを送信したときに、ユーザーの電子メール アドレスに通知を送信して、フォームを受信したこととすぐに連絡を取ることを知らせることもできます。

次のステップには、フォームの確認の設定が含まれます

フォーム確認は、フォームを送信した後に訪問者に表示される確認メッセージです。 フォームが処理されたことを訪問者に保証します。

WPForms には、次の 3 つの確認タイプから選択できます。

  • メッセージ:これは WPForms のデフォルトの確認タイプです。 サイト訪問者がフォームを送信すると、フォームが処理されたことを知らせる簡単な確認メッセージが表示されます。 顧客の満足度を高めるのに役立ついくつかの素晴らしい成功のメッセージについては、こちらをご覧ください。
  • ページを表示:この確認タイプは、サイトの訪問者をサイトの特定の Web ページに誘導し、フォームの送信に感謝します。 これを行うには、お客様をサンキュー ページにリダイレクトする方法に関するチュートリアルをご覧ください。 また、顧客ロイヤルティを高めるための効果的なサンキュー ページの作成に関する記事もぜひご覧ください。
  • URL に移動 (リダイレクト):このオプションは、サイトの訪問者を別の Web サイトに送りたい場合に使用します。

開始するには、[確認] タブをクリックします。 次に、ドロップダウンから確認タイプを選択します。 ここでは、メッセージ タイプを選択します。

WPForms の確認を管理する
WPForms の確認を管理する

この後、表示されるテキストボックスの下に確認メッセージを作成する必要があります。

完了したら、[保存] をクリックします

これで、フォームを Web サイトに追加する準備が整いました。

まず、WordPress から新しいページまたは投稿を作成します。 その後、最初のブロック内をクリックし、WPForms を検索して、 WPForms アイコンを選択します。

WordPress ページに WPForms を埋め込む
WordPress ページに WPForms を埋め込む

WPForms ウィジェットがブロック内に表示されます。 WPForms ドロップダウンをクリックして、作成済みのフォームを選択します。

WPForms ドロップダウンから埋め込むフォームを選択
WPForms ドロップダウンから埋め込むフォームを選択

投稿またはページを公開して、お問い合わせフォームがウェブサイトに表示されるようにします。

それでおしまい。 これは、WPForms プラグインを使用して、WordPress で複数ステップのフォームを簡単に作成する方法です。