プログレスバーでフォームを作成する方法

フォームにプログレスバーを追加する方法を知りたいですか？

フォームに進行状況バーを表示すると、訪問者に進行状況を通知し続けることで、フォームの放棄を減らすことができます。

以下にフォームに追加する方法を示します。

フォームのプログレスバーとは何ですか？

プログレスバーは、フォームに含まれるページ数と現在表示されているページをユーザーに示す視覚的な機能です。

進行状況インジケーターは、ユーザーがフォームに入力するときに、ユーザーの全体的な進行状況を追跡して示します。

プログレスバーでフォームを作成する方法

これから実行する手順は次のとおりです。

1. 1. WPFormsプラグインをインストールします
   2. 新しいフォームを作成する
   3. フォームにページ分割を追加する
   4. フォームを保存して公開する
   5. フォームのプログレスバーを確認する

プログレスバーに必要なフォームプラグインをインストールすることから始めましょう。

1.WPFormsプラグインをインストールします

まず、フォームにプログレスバーを表示するには、WPForms Proライセンスを購入してから、WPFormsアカウントにログインする必要があります。 ログインしたら、[ダウンロード]タブをクリックします。

これにより、使用可能なすべてのライセンスを含むページが表示されます。 プラグインをダウンロードするには、ライセンスの1つの横にある[ WPFormsのダウンロード]ボタンをクリックします。 これにより、WPFormsプラグインのzipファイルがコンピューターに保存されます。

重要：ページ分割フィールドが含まれているため、WPFormsProが必要になります。 フォームにさまざまな手順があり、進行状況バーを表示する場合は、[ページ分割]フィールドが必要です。

サイトへのWPFormsのインストール

zipファイルをダウンロードしたら、WPFormsをインストールするWordPressサイトにアクセスします。 次に、管理ダッシュボード内で、[プラグイン]»[新規追加]に移動し、[プラグインのアップロード]ボタンをクリックします。

ここから、[ファイルの選択]ボタンをクリックして、ダウンロードしたWPFormszipファイルを選択します。

ファイルがアップロードされたら、[今すぐインストール]ボタンをクリックします。

これにより、インストールプロセスが開始されます。 プラグインがインストールされたら、[プラグインのアクティブ化]ボタンをクリックして、サイトでWPFormsをアクティブ化します。

プラグインをアクティブ化した後、WPFormsライセンスキーを確認して、自動更新とプラグインサポートを受け取ります。 ライセンスキーを追加すると、WordPressダッシュボード内からWPFormsアドオンを簡単にインストールしてアクティブ化することもできます。

それでおしまい！ これで、新しいフォームの作成に進むことができます。

2.新しいフォームを作成します

開始するには、WordPress管理エリアにログインする必要があります。 そこで、管理サイドバーのWPFormsをクリックして、FormsOverviewページに移動します。

次に、新しいフォームを作成するには、[新規追加]ボタンをクリックしてWPFormsフォームビルダーを起動します。

フォームビルダーの[セットアップ]ページで、[フォーム名]入力フィールドにフォームに名前を付けることができます。

名前が選択されていない場合、フォーム名はデフォルトで選択したテンプレートの名前になります。

[フォーム名]フィールドの下の[テンプレートの選択]セクションには、何百ものフォームテンプレートがあります。 これらは、すぐに使い始めるのに役立つ、一般的に使用されるフォームの事前に作成されたテンプレートです。

注：フォームを最初から作成する場合は、空白のフォームテンプレートを使用してください。

テンプレートを選択するには、左側のメニューのカテゴリを使用できます。 テンプレートライブラリの左上隅にある検索バーを使用して、使用可能なオプションを検索することもできます。

目的のテンプレートが見つかったら、そのテンプレートにカーソルを合わせて[テンプレートを使用]ボタンをクリックします。

フォームの作成に問題がある場合は、フォームを作成して完全にカスタマイズする方法に関する詳細な手順をお読みください。

3.フォームにページ分割を追加します

これで、ページ分割とプログレスバーを追加する準備が整いました。 ページ分割を追加すると、フォームにプログレスバーが自動的に含まれます。

フォームビルダーを開いたら、先に進んで、フォームに含めるフィールドを追加します。 次に、ページ分割フィールドをプレビュー領域にドラッグし、新しいフォームページを作成する場所にドロップします。

追加する各ページ分割フィールドは、フォームを追加のページに分割し、必要な数のページを追加できます。 ページ分割をフォームの別のセクションに移動するには、プレビュー領域でページ分割をクリックして、好きな場所にドラッグします。

プログレスバーのカスタマイズ

ページ分割を追加すると、プレビュー領域の最初のページ領域がフォームの上部に表示されることに気付くかもしれません。 最初のページ/進行状況インジケーターをクリックして、複数ページのフォームのオプションにアクセスします。

進行状況インジケータードロップダウンで進行状況バーをカスタマイズできます。

次に、3つの進行状況インジケータースタイル（進行状況バー、円、またはコネクタ）から選択できます。

プログレスバー：

サークル：

コネクタ：

進行状況インジケーターの色を変更するには、カラーピッカーを使用するか、HEXコードを入力します。

最後に、フォームの最初のページの名前を[ページタイトル]フィールドに入力します。

ただし、フォームの外観に満足している場合は、[なし]を選択して進行状況バーを非表示にすることができます。

もっと知りたいですか？ このフォーム機能を最大限に活用するために、複数ページのフォームの説明とカスタマイズの詳細を作成する方法の全文をお読みください。

4.フォームを保存して公開します

フォームのカスタマイズが完了したら、フォームを公開できます。 まず、フォームビルダーの右上隅にある大きなオレンジ色の[保存]ボタンをクリックします。

次に、埋め込みウィザードを使用して、[埋め込み]ボタンをクリックしてフォームをWebサイトに統合できます。

ここから、フォームを埋め込むための新しいページを作成するか、フォームを追加する既存のページを選択するかを選択できます。

[新しいページを作成]オプションを選択すると、ページの名前を入力するように求められます。 次に、[ Let's Go ]ボタンをクリックして、フォームを埋め込み、ページを公開します。

[既存のページを選択]オプションを選択した場合、ドロップダウンからフォームを埋め込むページを選択するように求められます。

次に、[ Let's Go ]ボタンをクリックして、フォームを埋め込みます。

これで、選択したページでフォームを表示できます。 埋め込んだページに移動するか、 WPForms»AllFormsに移動します。 フォームのタイトルにカーソルを合わせると、オプションの追加メニューが表示されます。 オプションが表示されたら、[プレビュー]をクリックします。

5.フォームのプログレスバーを確認します

これで、次のような進行状況インジケーターを持つフォームが作成されます。

フィールドに入力して送信することでフォームをテストし、すべてが見栄えがよく、希望どおりに機能することを確認することをお勧めします。

注：レイアウトを調整する場合は、ページ分割フィールドをフォーム上で上下に移動できます。

次に、フォーム作成のエキスパートになります

WPForm構築の知識を増やしたいですか？ フォームフィールドの完全なガイドと、フォームのフィールドをカスタマイズする方法を必ず確認してください。

今すぐフォームを作成する準備はできていますか？ ページ分割フィールドとプログレスバー、何百もの無料テンプレートが含まれているWPForms Proにサインアップすることを忘れないでください。また、14日間の返金保証も提供しています。

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

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