AI要約
WordPressのプログレスバープラグインをお探しですか？
プログレスインジケーターとも呼ばれるものは、ユーザーがフォームに入力する際の全体的な進捗状況を追跡および表示します。
この記事では、WPFormsを使用してフォームにプログレスバーを簡単に追加する方法を紹介します。
WordPressのプログレスバーを追加するには？
プログレスバーは、機能を追加し、ユーザーエクスペリエンスを向上させる視覚的な機能です。ユーザーにフォームのページ数と現在のページを示します。
フォームにプログレスバーを追加するために、WordPressのプログレスバープラグインは必要ありません。代わりに、WPFormsのようなフォームビルダープラグインを使用できます。フォームを作成し、ページ区切りを追加すれば完了です！WordPressフォームにプログレスバーが表示されます。
フォームにプログレスバーがあると、訪問者に進捗状況を知らせることで、フォームの放棄を減らすのに役立ちます。
フォームに追加する最も簡単な方法は、プラグインを使用することです。特に初心者にとって良いニュースは、特定のプログレスバーWordPressプラグインを必要としないことです。WPFormsは非常に使いやすく、プログレスバー付きの複数ページフォームを簡単に作成できるため、プロセスが合理化されます。
WordPressフォームにプログレスバーを追加する方法
これから行う手順は次のとおりです。
この記事の内容
まず、フォームビルダーおよびプログレスバープラグインとしてWPFormsをインストールしましょう。
1. WPFormsプラグインのインストール
まず、フォームにプログレスバーを表示するには、WPForms Proライセンスを購入し、次にWPFormsアカウントにログインする必要があります。ログインしたら、**ダウンロード**タブをクリックします。
これにより、利用可能なすべてのライセンスが表示されます。プラグインをダウンロードするには、ライセンスの隣にある**WPFormsのダウンロード**ボタンをクリックします。これにより、WPFormsプラグインのZIPファイルがコンピューターに保存されます。
**重要：** WPForms Proにはページ区切りフィールドが含まれているため、WPForms Proが必要です。フォームに複数のステップがあり、プログレスバーを表示するには、ページ区切りフィールドが必要です。
WordPressサイトへのWPFormsのインストール
ZIPファイルをダウンロードしたら、WPFormsをインストールしたいWordPressサイトに移動します。次に、管理ダッシュボードで、**プラグイン** » **新規追加**に移動し、**プラグインのアップロード**ボタンをクリックします。
ここで、**ファイルを選択**ボタンをクリックし、ダウンロードしたばかりのWPForms ZIPファイルを選択します。
ファイルがアップロードされたら、**今すぐインストール**ボタンをクリックします。
これにより、インストールプロセスが開始されます。プラグインがインストールされたら、**プラグインを有効化**ボタンをクリックして、サイトでWPFormsを有効化します。
プラグインを有効化した後、WPFormsライセンスキーを確認して、自動更新とプラグインサポートを受け取ります。ライセンスキーを追加すると、WordPressダッシュボード内からWPFormsアドオンのインストールと有効化も簡単に行えるようになります。
これで完了です！新しいフォームを作成できます。
2. 新規フォームの作成
まず、WordPress管理画面にログインしている必要があります。ログインしたら、管理画面サイドバーのWPFormsをクリックして、フォーム一覧ページに移動します。
次に、新しいフォームを作成するには、新規追加ボタンをクリックしてWPFormsフォームビルダーを起動します。
フォームビルダーのセットアップページで、フォーム名入力フィールドにフォームの名前を入力できます。
名前が選択されていない場合、フォーム名はテンプレートの名前にデフォルト設定されます。
フォーム名のフィールドの下には、テンプレートを選択セクションに何百ものフォームテンプレートがあります。これらは、連絡フォーム、登録フォームなど、一般的に使用されるフォームの事前構築済みテンプレートであり、すばやく開始するのに役立ちます。
注意：最初からフォームを作成したい場合は、空白フォームテンプレートを使用してください。
テンプレートを選択するには、左側のメニューのカテゴリを使用できます。また、テンプレートライブラリの左上隅にある検索バーを使用して、利用可能なオプションを検索することもできます。
目的のテンプレートを見つけたら、それをホバーしてテンプレートを使用ボタンをクリックします。
そこからフォームビルダーに入り、必要に応じて追加の要素をドラッグアンドドロップできます。また、インラインフィールドから複数列へのフォームレイアウトを変更することもできます。
フォームの作成に問題がある場合は、フォームの作成と完全なカスタマイズ方法に関する詳細な手順をお読みください。
3. フォームへのページ区切りの追加
これで、ページ区切りとプログレスバーを追加する準備ができました。ページ区切りを追加すると、フォームに自動的にプログレスバーが含まれます。
フォームビルダーが開いたら、フォームに含めたいフィールドを追加します。次に、ページ区切りフィールドをプレビューエリアにドラッグアンドドロップして、新しいフォームページを作成したい場所に配置します。
追加する各ページ区切りフィールドは、フォームを複数のページに分割します。必要に応じてページを追加できます。ページ区切りをフォームの別のセクションに移動するには、プレビューエリアでクリックして、目的の場所にドラッグします。
プログレスバーのカスタマイズ
ページ区切りを追加すると、プレビューエリアのフォームの上部に最初のページセクションが表示されていることに気付くかもしれません。これは水平プログレスバーのプレースホルダーです。最初のページ / プログレスインジケーターをクリックして、複数ページフォームのオプションにアクセスします。
プログレスインジケータードロップダウンでプログレスバーをカスタマイズできます。いくつかのカスタマイズオプションが利用可能です。
まず、プログレスインジケーターのスタイルを選択します。WPFormsは、プログレスバー、円形プログレスバー、コネクタプログレスバーを提供しています。
プログレスバー：
円：
コネクタ：
これらの複数ページフォームに関して、いくつかのスタイルオプションがあります。プログレスインジケーターの色を変更するには、カラーピッカーを使用するか、16進コードを入力します。
最後に、ページタイトルフィールドにフォームの名前を入力します。
しかし、フォームの外観がそのまま気に入っている場合は、なしを選択してプログレスバーを非表示にすることができます。
さらに詳しく知りたいですか？複数ページフォームの作成方法に関する全手順をお読みになり、このフォーム機能を最大限に活用してください。
ユーザーが進捗状況を保存し、後でフォームの残りの部分を記入できるようにすることも検討してください。これは、フォームの放棄を減らし、フォーム完了率を高めるための優れた方法です。
4. フォームを保存して公開する
フォームのカスタマイズが完了したら、公開できます。まず、フォームビルダーの右上隅にある保存ボタンをクリックします。
埋め込みボタンをクリックして、フォームをウェブサイトに追加できます。
ここから、新しいページを作成するか、既存のページを選択してフォームを追加するオプションがあります。
後でフォームをページに直接埋め込みたい場合は、ショートコードオプションもあることに注意してください。これは、ウィジェットにフォームを配置する予定がある場合にも役立ちます。
新しいページを作成オプションを選択した場合、ページの名前を入力するように求められます。次に、開始ボタンをクリックしてフォームを埋め込み、ページを公開します。
既存のページを選択オプションを選択した場合、ドロップダウンからフォームを埋め込むページを選択するように求められます。
次に、開始ボタンをクリックしてフォームを埋め込みます。
これで、選択したページでフォームを表示できます。フォームを埋め込んだページに移動するか、WPForms » すべてのフォームに移動します。フォームのタイトルにカーソルを合わせると、追加のオプションメニューが表示されます。オプションが表示されたら、プレビューをクリックします。
5. フォームのプログレスバーを確認する
これで、次のような進捗インジケーターが表示されるフォームが作成されます。
すべてがうまく表示され、意図したとおりに機能することを確認するために、フィールドに入力して送信することでフォームをテストすることをお勧めします。
注意：レイアウトを調整したい場合は、ページ区切りフィールドをフォームの上または下に移動できます。
次に、フォーム作成の専門家になりましょう
WPFormsのフォーム作成に関する知識を増やしたいですか？フォームフィールドの完全ガイドとフォームのフィールドをカスタマイズする方法を必ず確認してください。
フォームを次のレベルに引き上げる準備ができている場合は、WordPressテーマに合わせてフォームをカスタマイズする方法に関する記事を読む価値があります。WordPressブロックエディターから、フォームの外観、ボタン、背景色などをカスタマイズする方法を学びます。一番良いところは？CSSを知らなくても大丈夫です。これらのカスタマイズにはカスタムCSSは必要ありません！
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
もしこの記事がお役に立ったなら、WordPressの無料チュートリアルやガイドをもっと知るために、FacebookとTwitterでフォローしてください。
プログレスバーがクリック可能だと素晴らしいのですが。
Harunさん、この機能が実装されると非常に役立つことに全く同意しますが、現時点ではアップデートはありません。機能リクエストにあなたの投票を追加しました。
ありがとうございます