WordPressでアコーディオンフォームをデザインする方法

WordPressウェブサイトにアコーディオンフォームのデザインを追加する簡単な方法をお探しですか？

アコーディオンフォームは、複雑なデータを直感的かつアクセスしやすい方法で提示し、クリーンで整理された外観を維持します。

この記事では、ウェブサイトの機能とユーザーエクスペリエンスを向上させるために、アコーディオンフォームをデザインする最も簡単な方法を紹介します。

今すぐWordPressアコーディオンフォームを作成しましょう！ 🙂

WordPressでアコーディオンフォームをデザインする方法

WordPressでアコーディオンデザインフォームを作成するには、WPFormsのシンプルさと機能性に頼ることができます。以下の手順に従って開始してください。

1. WPFormsのインストールと有効化

最初に行うことは、あらゆる種類のフォームを作成するための高度で使いやすいフォームビルダープラグインであるWPFormsをインストールして有効化することです。

サイトの機能を強化するための2,100以上のWordPressフォームテンプレートと多数の機能が付属しています。

開始するには、WPFormsにアクセスしてアカウントを登録してください。このチュートリアルではProライセンスを使用しますが、お好きなライセンスレベルを使用できます。

WPFormsをウェブサイトにインストールする方法についてサポートが必要ですか？WordPressプラグインのインストール方法に関するチュートリアルをご覧ください。プラグインをインストールしたら、必ず有効化してください！

そのステップが完了したら、WPCodeをインストールし、アコーディオンスタイルをまとめるコードスニペットを追加します。

2. アコーディオンコードスニペットの追加

アコーディオンフォームのマジックを機能させるには、WPFormsと連携するWPCodeプラグインをインストールする必要があります。このステップの両方の部分、つまりWPCodeのインストールとアコーディオンコードスニペットの追加を完了してください。

WordPressにWPCodeプラグインをインストールすると、WPFormsユーザー専用の特別なコードスニペットライブラリにアクセスできるようになります。インストールが完了したら、必ずプラグインを有効化してください！

WordPressプラグインリポジトリからWPCodeをインストールした後、WPFormsに戻ります。ここでWPFormsのコードスニペットを有効にします。

WordPressダッシュボードから、左側のナビゲーションサイドバーのWPForms » Toolsに移動します。そのページで、Code Snippetsタブを選択します。

WPCodeがインストールされていない場合、[コードスニペット]オプションは表示されないことに注意してください。スクロールするか、検索機能を使用して、 アコーディオンテンプレートヘルパースニペットを見つけます。

スニペットをインストールボタンをクリックします。

インストールをクリックすると、コードスニペットが表示されるページが開きます。このページで行う必要があるのは、スニペットを有効にして更新をクリックすることだけです。

これでフォームを作成する準備ができました！

3. 新しいWordPressフォームの作成

WordPress管理ダッシュボードから、WPFormsに移動し、オプションのリストから新規追加 をクリックします。

次に、フォームに名前を付けます。特定の要件に基づいて既存のテンプレートを選択できますが、このチュートリアルの目的では、空白のフォームから開始します。これにより、アコーディオン形式の作成方法をよりよく理解できます。

次に、利用可能なフィールドが左側のパネルに表示されるフィールド画面に移動します。アクセスできるフィールドは、ライセンスレベルによって異なります。

右側のパネルには、編集可能なフォームのプレビューが表示されます。空白のフォームを選択した場合、開始するものが何もないことを心配しないでください。フォーム要素をドラッグアンドドロップすると、すぐに空白ではなくなります！

セクション区切りを使用してフォームを作成する

フォームの作成を開始するときは、情報をどのようにグループ化したいかを考えてください。つまり、フォームのアコーディオンが開かれたときに、どの情報を含めたいですか？

これらの各セクションについて、セクション区切りフィールドを追加する必要があります。その情報セクションの名前としてフィールドに好きな名前を付けます。私たちの例は応募フォームなので、最初に連絡先情報を上部に配置します。

セクション区切りを配置したら、その下に目的のフォーム要素を好きなようにドラッグアンドドロップできます。

ページ区切りを追加する

フィールドがすべて配置されたら、各フォームセクションの下部にページ区切りフィールドを追加します。

注意：最初のページ区切りを追加したら、それをクリックしてフィールドオプションを開きます。左側には、進捗インジケーターを変更できるドロップダウンメニューが表示されます。なしを選択します。これはフォームごとに1回だけ行う必要があります。

この手順を省略すると、アコーディオンは引き続き機能しますが、フォームが公開されたときに先頭に非アクティブなプログレスバーが表示されます。改ページを追加した後、フォームに必要なセクション数だけこのプロセスを繰り返します。

今すぐプレビューすると、アコーディオンではなく、マルチページフォームのように見えます。心配しないでください。これから魔法の材料、CSSクラスを追加します！

4. フォームへのCSSクラスの追加

この時点で、フォーム全体が作成されているはずです。フォームの各セクションは、セクション区切りで始まり、改ページで終わる必要があります。これらのセクションがアコーディオンのドロップダウンになります。

フォームを開始する前に、コードスニペットをすでにアクティブ化しています。残っているのは非常に簡単なことだけです。すべてをまとめるCSSクラスを追加する必要があります。

まず、フォームを保存します。フォームビルダーが開いたまま、左側のメニューの[設定]オプションに移動します。[全般]ページにデフォルトで表示されます。一番下までスクロールし、[詳細設定]をクリックします。

次に、[フォームのCSSクラス]フィールドにwpf-accordion-formと入力します。そのコードを入力したら、[保存]ボタンをクリックします。設定中に、フォームの通知と確認を更新しましょう。

5. 通知と確認の設定

ユーザーがフォームに入力して送信した後に表示されるメッセージと通知を設定することは非常に重要です。これは簡単に行えます。[設定]タブに移動し、[通知]を選択します。

管理者は自動的にアラートを受け取ります。ただし、必要に応じてメールの件名、本文、および受信者のリストを変更できます。

次に、[設定]タブの下で、[確認]を選択して、フォームを完了した後に顧客が受け取るメッセージを変更します。

WPFormsの[確認タイプ]設定を使用して、メッセージを表示したり、別のページにリンクしたり、ユーザーをリダイレクトしたりすることもできます。

アコーディオンフォームを公開する

フォームの確認と通知の更新が完了したら、公開の準備が整いました！WordPressにフォームを埋め込む方法はいくつかあります。

チュートリアルでは埋め込みボタンを使用しますが、別の方法を試したい場合は、WordPressサイトにフォームを埋め込む3つの方法に関する投稿をご覧ください。

フォームビルダーでフォームを開いた状態で、右上にある[埋め込み]ボタンをクリックするだけです。モーダルウィンドウで、既存のページにフォームを埋め込むか、新しいページを作成するかを尋ねられます。

既存のページを選択したい場合は、そのページを選択できます。新しいページを作成する場合は、ページに名前を付けるように求められます。

選択が完了すると、選択または作成したページのドラフトとしてWordPressでフォームが開きます。ここでまだマルチページフォームのように見える場合は、心配しないでください。ページをプレビューすると、アコーディオンフォームが表示されるはずです。

これでページを公開し、アコーディオンフォームを世界に公開する準備が整いました。アコーディオンフォームを公開したら、あとは埋め込みフォームをテストすることで、計画どおりに機能することを確認するだけです。

WordPressでアコーディオンフォームをデザインする方法に関するFAQ

アコーディオンフォームの作成は、読者の間でユーザビリティに関する人気のあるトピックです。ここでは、最もよくある質問に対する簡単な回答をいくつか紹介します。

アコーディオンフォームとは何ですか？

アコーディオンフォームは、セクションヘッダーをクリックすることで展開または折りたたむことができる複数のセクションを持つフォームです。

すべてのフィールドを一度に表示する（長いフォームでは圧倒される可能性があります）のではなく、アコーディオンフォームは一度に1つのセクションを表示し、複雑なフォームをより管理しやすくします。

ユーザーは基本的に、タブやマルチページフォームと同様に、すべて単一のページ内でセクションを順番にクリックします。

WordPressでアコーディオンフォームを作成するにはどうすればよいですか？

WPForms ProとWPCodeプラグインをインストールします。WPCodeで、アコーディオンテンプレートヘルパースニペットをアクティブ化します。

次に、WPFormsでフォームを作成し、セクション区切りフィールドを使用してフィールドをセクションに整理し、各セクションの後にページ区切りフィールドを追加し、フォームの高度な設定にCSSクラスwpf-accordion-formを追加します。

アコーディオンのスタイリングがフォームに自動的に適用されます。

アコーディオンフォームとマルチページフォームの違いは何ですか？

アコーディオンフォームは、展開/折りたたみ機能により、すべてのセクションを1ページに表示し、ユーザーがセクション間を簡単に移動したり、全体像を把握したりできるようにします。

マルチページフォームは、個別のページに1つのセクションを一度に表示し、前/後のナビゲーションを備えています。アコーディオンフォームは、ユーザーが前のセクションを参照する必要がある場合に適しており、マルチページフォームは、非常に長いフォームの場合、関連フィールドのみを表示することで認知負荷を軽減します。

アコーディオンフォームのデザインはいつ使用すべきですか？

アコーディオンフォームは、アプリケーション、詳細な登録、または15以上のフィールドを持つアンケートで、4〜7の論理的なセクションに整理されている場合に使用します。

求人応募（連絡先情報、職務経歴、推薦状）、イベント登録（参加者詳細、食事の好み、支払い）、または包括的なインテークフォームに最適です。

単純な5フィールドの連絡先フォームで、折りたたみ可能なセクションが不要な複雑さを増す場合は、アコーディオンデザインを避けてください。

WordPressサイトにアコーディオンを追加するにはどうすればよいですか？

アコーディオンフォーム専用の場合は、WPFormsと、このガイドで説明されているアコーディオンコードスニペットを使用してください。

アコーディオンコンテンツ（FAQなど）の場合は、専用のアコーディオンプラグインまたはページビルダーのアコーディオンモジュールを使用してください。WPFormsのアコーディオン方法は、一般的なページコンテンツではなく、フォームにのみ機能します。

WPForms Liteでアコーディオンフォームを使用できますか？

アコーディオンフォームの手法は、WPCodeプラグインがインストールされ、Accordion Template Helperスニペットがアクティブになっている限り、Liteを含むすべてのWPFormsライセンスレベルで機能します。

ただし、WPForms Proを使用すると、条件付きロジックや支払い統合などの高度な機能にアクセスでき、アコーディオンフォームを大幅に強化できます。

アコーディオンフォームのラベルのベストプラクティスは何ですか？

そのセクションにどのような情報が含まれているかをユーザーに正確に伝える、明確で説明的なセクションタイトルを使用してください。良い例：「連絡先情報」、「職務経歴」、「学歴」。

「セクション1」や「詳細」のような曖昧なラベルは避けてください。ユーザーがレビューまたは編集する必要のあるセクションをすばやく見つけて展開できるように、セクションタイトルをスキャン可能にしてください。

アコーディオンフォームはモバイルデバイスで機能しますか？

はい、アコーディオンフォームはモバイルデバイスで機能し、実際には長いフォームのモバイルユーザーエクスペリエンスを向上させます。

小さな画面で30以上のフィールドをスクロールする代わりに、ユーザーは一度に展開できる折りたたみ可能なセクションを表示します。

ただし、常に実際のモバイルデバイスでアコーディオンフォームをテストして、セクションがスムーズに展開し、各セクション内で過度のスクロールを必要としないことを確認してください。

次に、ファイルダウンロードにメールアドレスを要求する方法を学ぶ

ユーザーにWordPressサイトからファイルをダウンロードする前にメールアドレスを送信してもらうとしたら、素晴らしいと思いませんか？ユーザーにWordPressサイトからファイルをダウンロードするためにメールアドレスを共有してもらう方法を学びましょう。

今すぐアコーディオンフォームを作成しましょう！🙂

フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。

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