WordPressでマルチステップフォームを作成する方法
公開: 2018-06-15数日前、WordPressでマルチステップフォームを作成することについて誰かが私に尋ねていました。 私はパーティーに参加していましたが、どういうわけか会話の中で、問題が発生しました。 その瞬間、私はその点について説明する気にはなれませんでしたが、WordPressで作業していると、彼を説得し、どういうわけか彼に理解させなければならなかったと感じました。
後で、この問題は私の考慮事項となり、他の人がWordPressでマルチステップフォームを作成するのに役立つ可能性のあるチュートリアルベースの投稿を書くことを考えました。 だから私はこれを可能にしようとしています。
マルチステップフォームを設計する理由
フォームは、情報を収集して視聴者と連絡を取るための最も簡単な方法の1つです。 単純なカジュアルフォーム、ビジネスフォーム、またはあらゆる種類の調査関連フォームの場合があります。
WP Fluent Forms Pro
今日FluentFormsを試して、自分の目で確かめてください！
ただし、長い形式はユーザーにとって不快な場合があり、最終的には悪いUXと見なされることもあります。 この問題を取り除くために、ほとんどすべての大企業は、セクションとページに分割されたマルチステップフォームを使用しています。
ページ上部のプログレスバーは、ユーザーがフォームに入力する際の快適さと制御を向上させ、最も重要なこととして、ユーザーとのインタラクティブ性の異なるフレーバーを提供します。 さらに、ユーザーとのエンゲージメントが急速に高まります。
WPFluentFormを使用してマルチページのWordPressフォームを作成する方法
ここでは、理解してもらうためにWPFluentFormを使用します。 WP Fluent Formは、あらゆる種類のフォームを作成するための、急成長しているユーザーフレンドリーなWordPressフォームプラグインです。
まず、WordPressにWPFluentFormプラグインをインストールしてアクティブ化する必要があります。 詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。
WP Fluent Formsプラグインをアクティブ化し、ライセンスプロセスを完了すると、Webサイトでマルチステップフォームを作成するための快適な環境が得られます。
私が今しているように、あなたは3つのステップのマルチステップフォームを作成しようとしていると思います。 最初のステップはユーザーの個人情報用で、2番目のページはユーザーの教育情報用で、3番目のページはユーザーの趣味をカバーします。 次に、WPFluentFormを使用してそれを実現する方法を紹介します。
WP Fluent Formsは、60以上の組み込みの既製のフォームテンプレートを提供します。 それぞれの目的を果たすために、シングルクリックでそれらのいずれかを使用できます。 クリックが完了すると、それぞれのフォームが自動的に作成されたことがわかります。
フォームを最初から手動で作成することもできます。 フォームを最初から作成するには、 [流暢なフォーム] —> [空白のフォームを作成]に移動します。3つのデフォルトのフォーム形式と、新しいフォームを作成するためのカスタムオプションを含むダイアログボックスが表示されます。
詳細については、 FluentFormsを使用して新しいフォームを作成する方法を参照してください。
[空白のフォームを作成]をクリックして完了すると、構成オプションとともに表示されるフォームビルダーが表示されます。 右側のサイドバーから、特定の機能をフォームに追加するためのドラッグアンドドロップ可能な入力フィールドがあります。
フォームを作成したら、必要なフィールドをそのフォームに入力する必要があります。 これを可能にするには、目的のフィールドをドラッグアンドドロップします。 たとえば、あなたからの個人情報については、フォームに4つの異なるフィールドを入力します。
入力フィールドがあります。フォームに機能を追加するには、特定の入力フィールドをクリックまたはドラッグアンドドロップする必要があります。 入力フィールドを追加したら、目的の名前に従って各パーツの要素ラベルを変更します。 理解を深めるために、スクリーンショットをいくつか残しておきます。
必要に応じて、名前フィールド、アドレスフィールド、電子メールを追加します。 すべての入力フィールドをカスタマイズし、それらの管理フィールドラベル、プレースホルダー、要素ラベルなどを変更できます。
[アドレス]フィールドの前にドロップダウン入力フィールドをエディターに追加し、 Genderという名前を付けています。 [性別]セクションで、ドロップダウンメニューのオプションを構成する必要があります。
ドラッグアンドドロップするだけで、入力フィールドを並べ替えることもできます。 次の画像でわかるように、性別入力フィールドをドラッグアンドドロップしています。
フォームの最初のステップを終了するフォームステップ入力フィールドを追加します。 これにより、マルチステップフォームにページ分割が作成されます。 その下に他のフィールドを追加して、次のページに表示します。
次に、 [ページングの開始]セクションにカーソルを置くと、[編集]オプション（鉛筆アイコン）が表示されます。 それをクリックすると、入力のカスタマイズに移動します。 そこで、プログレスバーボタンをクリックして、すべてのステップにタイトルを付ける必要があります。
各ステップのタイトル名を書き留めます。 たとえば、ステップ1の入力フィールドに個人情報を入力します。 ステップ2の入力フィールドなどにEducationを入力します。 次に、プレビューセクションを見てください。
写真は、フォームの上部と下部にそれぞれ1つのプログレスバーと1つの[次へ]ボタンがインジケーターとして表示されていることを示しています。
次に、フォームの教育部分を示すフォームの2ページ目で作業する必要があります。 このために、 University ＆ CollegeのSimpleTextフィールドを入力に使用できます。 フォームの「度」入力にはドロップダウンフィールドを使用する必要があります。
すべての入力フィールドのスクリーンショットを見てみましょう。 大学や大学では、最初にラベルをカスタマイズする必要があります。
Degree入力フィールドには、 Dropdown入力フィールドを使用する必要があります。 この場合、最初にラベルをカスタマイズしてから、ドロップダウンリストのオプションを指定する必要があります。
次に、ユーザーの趣味に関連する3ページ目に移動します。 これを実現するには、フォームステップを再度選択して、このアプローチを作成する必要があります。
[ページング開始]セクションの[フォームステップ]フィールドをクリックすると、すぐに新しい入力フィールドが作成されます。 [フォームステップ]セクションの[編集]オプションをクリックして、3番目のステップのタイトル名を書き留めます。
入力フィールドに「趣味」と入力して、タイトルを書き留めます。 次に、フォームの3番目のセクションに進みます。 趣味ごとにシンプルテキストフィールドを選択できます。
[フォームを送信]ボタンのすぐ上にドロップする必要があります。
このようにして、フォームの3番目のセクションに全体ビューを表示するために、さらに2つのシンプルテキスト領域を取得できます。 次に、「要素ラベル」をHobbyOneのテキストでカスタマイズします。
残りの2つのフィールドは、それぞれHobbyTwoとHobbyThreeの名前でカスタマイズする必要があります。 次に、このインターフェースのプレビューを見てください。
ページの下部にある[利用規約]フィールドに、手順全体を完了することができます。 次に、フォームを送信するプロセス全体を確認できます。
さて、究極のプレビューを見てみましょう。
これは、WPFluentFormを使用してマルチステップフォームを作成する方法です。 これは、特定の目的に役立つマルチステップフォームを作成するための最も便利な機能を提供するため、 WPFluentFormでの作業に非常に便利で効果的です。
この機能を利用して、美しくコンパクトで直感的なマルチステップフォームを作成するには、 WP FluentFormProアドオンを今すぐダウンロードしてください。
WordPress関連のヒントやコツを入手するには、YouTubeチャンネルに登録してください。 また、TwitterやFacebookでフォローしてください。
