WordPress でプログレスバーを備えたマルチステップフォームを作成する方法?

WordPress で進行状況バーを備えた複数ステップのフォームを作成する方法を学びたいですか? つかまえた！

マルチパートフォームは、長いフォームを複数のステップに分割します。 そのため、フォームフィールドがより整理され、ユーザーが入力しやすくなりました。

同様に、進行状況バーには完了した作業量が表示され、フォームに入力しているユーザーの進行状況が追跡されます。

そこで、この記事では、WordPress でプログレスバーを備えたマルチステップフォームを作成する方法について詳しく説明します。

さぁ、始めよう。

WordPress でプログレスバーを備えたマルチステップフォームを作成する理由

前に述べたように、マルチステップフォームとはその名の通り、長いフォームを複数の部分に分割したものです。

したがって、ユーザー エクスペリエンスが向上し、コンバージョン率が向上し、データの精度が向上します。

以下に、WordPress でプログレスバーを備えたマルチステップフォームを作成する必要がある理由について、さらにポイントをリストします。

• フォーム入力者は、必要に応じて、入力した情報を確認、戻って、修正し、変更することができます。
• プログレス バーにより、複数ステップのフォームの使いやすさが向上し、ユーザーのナビゲーションと理解が容易になります。
• また、ユーザーに進捗状況に関するフィードバックが提供され、アプローチを調整できるようになります。
• また、ユーザーがフォームを送信する前に必要な手順をすべて完了していることを確認することで、エラーも削減されます。

これらは、進行状況バーを備えた WordPress のマルチステップ フォームの利点のほんの一部です。 もう少し深く掘り下げると、さらに多くのことを思いつくことができます。

WordPress でプログレスバーを備えた複数ステップのフォームを作成する (チュートリアル)

進行状況バーを備えたマルチパート フォームの利点をすべて理解したら、すぐにそれをフォームに埋め込む必要があります。

ただし、プロセスを進めるために適切なツールを選択することは非常に重要です。 ここで、最高のフォームビルダープラグイン Everest Forms が活躍します。

Everest Forms を使用すると、求人応募フォーム、連絡フォーム、アンケート、投票など、さまざまなオンライン フォームを作成できます。

しかし何よりも、WordPress では、いくつかの簡単な手順で進行状況バーを備えたマルチステップ フォームを作成できます。

それでは早速、WordPress で進行状況バーを備えたマルチステップ フォームを作成する手順を段階的に見てみましょう。

ステップ 1: Everest Forms と Everest Forms Pro をインストールしてアクティブ化する

まず最初に行う必要があるのは、WordPress ダッシュボードにEverest FormsとEverest Forms Proをインストールすることです。

確かに、プラグインの無料版を使用して単純なフォームを作成できます。

ただし、Multi-Part Forms アドオンを入手するには、プレミアム プラン (Plus 以降) にアップグレードする必要があります。

Everest Forms Pro のインストールプロセスは非常に簡単です。 プラグインの公式サイトにアクセスすると、4 つの異なるプランが表示されます。

ご予算やご要望に応じてプランをお選びください。

その後、メールへのリンクが届きます。 リンクをクリックしてアカウント ダッシュボードにアクセスします。

そこから、プラグインの Pro zip をダウンロードし、 [ライセンス キー]タブでライセンス キーを取得できます。

その後、WordPress ダッシュボードに戻り、 「プラグイン」>>「新規追加」に移動します。 そして、 「プラグインのアップロード」ボタンをクリックするだけです。

次に、以前にダウンロードしたEverest Forms pro zip ファイルを選択し、 [今すぐインストール]をクリックします。

次に、ライセンス キーを必要な領域に貼り付け、サイトでプラグインをアクティブ化します。

インストールとセットアップのプロセス全体の詳細が必要な場合は、Everest Forms pro のインストール方法に関するこのリンクに従ってください。

プラグインを正しく設定したら、次のステップに進むことができます。

ステップ 2: Multi-Part Forms アドオンをインストールしてアクティブ化する

プロ版を入手したので、 Multi Part Forms アドオンを簡単にインストールできるようになりました。 まず、 Everest Forms >> アドオンに移動します。

その後、 「Multi Part add-on」を検索します。 次に、 「Install Addon」ボタンをクリックして「Activate」を押します。

ステータスがActivated と表示されると、アドオンがアクティブであることがわかります。

ステップ 3: 新しいフォームを作成する

Multi-Part Form アドオンをインストールしてアクティブ化したら、新しいフォームを作成します。

そこで、「Everest Forms >> Add new」に進みます。

[新しいフォームの追加]ページには、事前に作成されたフォーム テンプレートのコレクションが表示されます。 ただし、最初から始めることもできます。

このチュートリアルでは、WordPress で複数ステップのフォームを最初から作成する方法を説明します。

そこで、 「最初から開始」をクリックしてフォームに名前を付けます。

これを「従業員評価フォーム」と呼び、 [続行]をクリックします。

その後、以下のような Everest Forms フォーム エディター画面が表示されます。

ステップ 4: マルチパートフォーム設定を有効にする

次に、フォームを複数の部分に分割します。 そのためには、まずマルチパート機能を有効にする必要があります。

上部の「設定」タブに移動します。 そして、 「マルチパート設定」をクリックします。

次に、 [マルチパート フォーム]オプションを有効にするチェック ボックスが表示されます。 チェックボックスにチェックを入れると、オプションが有効になります。

同じページには、次のようなパーツ インジケーターのいくつかのカスタマイズ オプションも表示されます。

進行状況インジケーター:

ここから、次のようにフォームの上部に表示されるドロップダウンからパーツのテーマを選択できます。

1. プログレスバー

2. サークルバー

3. 矢印のステップ

進行状況インジケーターの色:

このオプションでは、パーツ インジケーターの色を選択できます。 お好みに応じて任意の色を選択できます。

パートナビゲーションの配置:

次のようにパーツ ナビゲーション ボタンの配置を選択できます。

1つ残り

2.右

3. センター

4. スプリット

すべての変更を行ったら、忘れずに保存してください。

ステップ 5: フィールドを追加し、複数ステップのフォームを作成する

マルチパート フォーム オプションを有効にした直後、最初のパートがフォーム ビルダーに表示されます。

タイトルは「パート タイトル」で、後から「ページ オプション」から変更できます。

次に、必要なフィールドをすべてフォームにドラッグ アンド ドロップします。

フォームに別のパーツを追加するには、下部にある[新しいパーツの追加]をクリックします。

これにより、次の空白のページが開き、前と同様に必要なフィールドを追加できます。

個々のパーツを調整したり、位置を移動したりすることもできます。 その部分を右または左にドラッグするだけです。

同様に、以前と同様にページオプションでパートタイトルとラベルを編集できます。

ここでは 4 つの部分を追加し、それぞれ「WPEverest 年次パフォーマンス レビュー」、「パフォーマンス測定」、「将来の目標」、「追加情報」という名前を付けました。

最後に、 「保存」ボタンをクリックして、フォームに加えた変更を保存します。

ステップ 6: フォーム設定を構成する

次に、フォームの[設定]タブを開いて、フォームの設定を構成します。

ここには、さまざまなカスタマイズ オプションを備えたさまざまなセクションがあります。

1. 一般

一般設定では、フォームの説明、フォーム無効メッセージ、条件付きロジックの有効化、レイアウト デザインなどを編集できます。

2.電子メール

電子メール設定では、管理者およびユーザーの電子メール通知テンプレートを作成できます。

3.ウェブフック

WebHook を使用すると、フォーム データを任意の外部 URL に送信できます。 リクエスト URL、リクエスト メソッド、リクエスト フォーマット、リクエスト ヘッダーを設定する必要があります。

[保存]をクリックして、フォームに加えた変更を保存できます。

ステップ 7: フォームをプレビューして公開する

Everest Forms を使用して、進行状況フィールドを含むマルチパート フォームが正常に作成されました。

ただし、WordPress Web サイトにフォームを表示する場合にのみユーザーに表示されます。

したがって、フォームを最終チェックしてください。 フォームをプレビューすることもできます。 「保存」ボタンの隣にある「プレビュー」ボタンをクリックするだけです。

次に、サイトにフォームを追加するには、Everest Forms ブロックを使用してフォームを表示します。

投稿/ページ >> 新規追加に移動します。

ブロックエディターが表示されます。 [ブロックの追加 (+)]ボタンをクリックして、Everest Forms ブロックを検索します。

これをページに追加し、ドロップダウンから WordPress従業員評価フォームを選択します。

最後に、上部にある「公開」ボタンをクリックします。

まとめ！

WordPress でプログレスバーを備えたマルチステップフォームを作成する方法に関するガイドは以上です。 このチュートリアルがあなたのお役に立ったと確信しています。

Everest Forms を使用すると、苦労することなく、WordPress でプログレスバーを備えたマルチステップフォームを簡単に作成できるようになりました。

Everest Forms は、基本的なフォーム作成ツール以上のものです。 プラグインに関するレビューをさらに詳しく知りたい場合は、Everest Forms のレビューに関する記事をお読みください。

次に、コンテンツを失わずに WordPress テーマを変更する方法も読むことができます。

最後に、当社のコンテンツを気に入っていただけましたら、ソーシャル メディアでフォローしていただき、今後の最新情報を入手してください。

Facebook と Twitter でご利用いただけます。 簡単なビデオチュートリアルをご覧になるには、YouTube チャンネルに登録してください。