WordPressウェブサイトにアコーディオン・フォームのデザインを追加する簡単な方法をお探しですか？
アコーディオン・フォームは、すっきりと整理された外観を保ちながら、複雑なデータを直感的かつアクセスしやすい方法で表示します。
この記事では、ウェブサイトの機能性とユーザー体験を高めるアコーディオンフォームをデザインする最も簡単な方法を紹介します。
WordPressでアコーディオンフォームをデザインする方法
WordPressでアコーディオンデザインのフォームを作成するには、WPFormsのシンプルさと機能性に頼ることができます。以下のステップに従って始めてください：
この記事で
1.WPFormsのインストールと有効化
最初にやることは、WPFormsをインストールして有効化することだ。
WPFormsはあらゆる種類のフォームを作成できる先進的でユーザーフレンドリーなフォーム作成プラグインです。2,000以上のWordPressフォームテンプレートとあなたのサイトの機能を高めるための機能のトンが付属しています。
まずはWPFormsにアクセスし、アカウントを登録してください。このチュートリアルではProライセンスを使用しますが、お好きなライセンスレベルをお使いください。
WPFormsのインストールにお困りですか？WordPressプラグインのインストール方法についてのチュートリアルをご覧ください。
プラグインをインストールしたら、忘れずに有効化してください！
このステップが終わったら、WPCodeをインストールして、アコーディオン・スタイルを作るコード・スニペットを追加する。
2.WPCodeをインストールし、アコーディオンコードスニペットを追加する
アコーディオン・フォームのマジックを機能させるには、WPFormsで動作するWPCodeプラグインをインストールする必要があります。WPCodeのインストールとアコーディオンのコード・スニペットの追加です。
WordPressにWPCodeプラグインをインストールすると、WPFormsユーザーのための特別なコードスニペットライブラリにアクセスできるようになります。プラグインをインストールしたら、有効化をお忘れなく！
WordPressのプラグイン・リポジトリからWPCodeをインストールしたら、WPFormsに戻ります。今度はWPFormsでコードスニペットを有効化します。
コードスニペットにアクセスするには、WPForms 1.8.5以上を実行し、WPCodeをインストールしている必要があります。
WordPressのダッシュボードから、左のナビゲーション・サイドバーにあるWPForms " Toolsに移動します。そのページで、コードスニペットのタブを選択します。
WPCodeがインストールされていない場合、Code Snippetsオプションは表示されません。
スクロールするか、検索機能を使ってアコーディオン・テンプレート・ヘルパーのスニペットを探してください。
Install Snippet ボタンをクリックします。
インストールをクリックすると、コード・スニペットを表示するページが開きます。このページで必要なことは、スニペットを有効にして「更新」をクリックすることだけです。
これでフォームを作成する準備ができました！
3.新しいフォームを作成する
WordPressの管理ダッシュボードからWPFormsに移動し、オプションのリストから新規追加を クリックします。
次に、フォームに名前を付けます。特定の要件に基づいて既存のテンプレートを選択することもできますが、このチュートリアルでは目的のために空白のフォームから始めます。こうすることで、アコーディオン形式の作成方法をより理解しやすくなります。
左側のパネルに利用可能なフィールドが表示されます。あなたがアクセスできるフィールドは、あなたのライセンスレベルによって異なります。
右側のパネルに、フォームの編集可能なプレビューが表示されます。空白のフォームを選択した場合、最初は何もないので心配しないでください。フォームの要素をドラッグ＆ドロップすれば、長い間空白になることはありません！
セクションディバイダーを使ってフォームを作る
フォームを作り始めたら、情報をどのようにグループ化したいかを考えましょう。つまり、フォームアコーディオンを開いたときに、どのような情報をドロップダウンに含めたいのか。
これらのセクションごとに、セクションの区切りフィールドを追加 する必要があります。そのフィールドには、そのセクションの情報をどのように呼びたいか、好きな名前をつけてください。
この例は申し込みフォームなので、一番上に連絡先から始めます。
セクションの仕切りができたら、その下に好きなようにフォーム要素をドラッグ＆ドロップします。
改ページの追加
フィールドをすべて配置したら、各フォームセクションの下部に改ページフィールドを追加します。
注：最初の改ページを追加したら、それをクリックしてフィールド・オプションを開いてください。左側にドロップダウンメニューがあり、進捗インジケータを変更することができます。なし」を選択します。これは1つのフォームにつき1回だけ行う必要があります。
このステップを見逃すと、アコーディオンは機能しますが、フォームの上部に非アクティブなプログレスバーが表示されます。
改ページを追加した後、フォームが持つセクションの数だけこのプロセスを繰り返します。
今すぐプレビューすると、アコーディオンではなくマルチページのフォームのように見えます。 ご心配なく。これから魔法の材料、CSSクラスを追加します！
4.CSSクラスを追加する
この時点で、フォーム全体が作成されているはずです。フォームの各セクションは、セクションの区切りで始まり、ページの区切りで終わるようにします。これらのセクションがアコーディオンのドロップダウンになります。
フォームを開始する前に、すでにコード・スニペットを有効にしました。あとは超簡単なことが一つだけ残っています。すべてをまとめるCSSクラスを追加するのです。
まず、フォームを保存します。フォームビルダーを開いたまま、左メニューの設定オプションに移動します。デフォルトはGeneralページです。下にスクロールし、詳細設定をクリックします。
次に、次のように入力する。 wpf-accordion-form をフォームCSSクラスフィールドに入力します。
コードを入力したら、保存 ボタンをクリックします。設定をしている間に、フォームの通知と確認を更新しましょう。
5.通知と確認の設定
ユーザーがフォームに入力して送信した後に表示されるメッセージや通知を設定することは非常に重要です。
これは簡単です。設定]タブに移動し、[通知]を選択します。
管理者は自動的にアラートを受信します。ただし、メールのタイトル、本文、受信者リストは必要に応じて変更できます。
次に、[設定]タブで[確認]を選択し、フォーム入力完了時にお客様が受け取るメッセージを変更します。
WPFormsの確認タイプ設定を使用して、メッセージを表示したり、別のページにリンクしたり、ユーザーをリダイレクトしたりすることもできます。
アコーディオンフォームを公開する
フォームの確認と通知の更新が終わったら、公開の準備は完了です！
WordPress にフォームを埋め込むには、さまざまな方法があります。このチュートリアルでは埋め込みボタンを使用しますが、他の方法を試してみたい方は、WordPressサイトにフォームを埋め込む3つの方法についての記事をご覧ください。
フォームビルダーでフォームを開いた状態で、右上の埋め込みボタンをクリックします。
モーダルウィンドウが、既存のページにフォームを埋め込むか、新しいページを作成するかを尋ねます。
既存のページを選びたい場合は、どのページを選ぶかを選択できます。新しいページを作成する場合は、名前をつけるよう促されます。
選択が完了すると、フォームがWordPressで開かれ、選択または作成したページの下書きが表示されます。ここでまだ複数ページのフォームのように見えても心配しないでください。クリックしてページをプレビューすると、アコーディオンフォームが表示されるはずです。
これでページを公開し、アコーディオン・フォームを世に送り出す準備が整いました。
アコーディオンフォームを公開したら、あとは埋め込みフォームをテストして計画通りに動作することを確認するだけです。
アコーディオン・フォームの完成、おめでとう！
アコーディオン・フォームに関するFAQ
アコーディオン・フォームの作成は、読者の間でユーザビリティに関する人気のトピックです。ここでは、よくある質問に簡単にお答えします：
アコーディオン・フォームとマルチページ・フォームの長所／短所は？
アコーディオン・フォームは、小さなスペースに多くのコンテンツを収めることができるが、うまくデザインしないと圧迫感を与えてしまう。
アコーディオン・フォーム・ラベルのベストプラクティスとは？
ラベルは簡潔で明瞭なものを使用する。見出しを利用し、"セクション1 "のような表記は避ける。
デスクトップ用とモバイル用のアコーディオン・フォームはどのようにデザインするのか？
レスポンシブに対応し、デスクトップでもモバイルでもスムーズに動作するアコーディオンフォームをデザインするには、WPFormsとの契約をご検討ください！
次に、ファイルのダウンロードに電子メールアドレスを要求する方法について説明します。
WordPressサイトからファイルをダウンロードする前に、ユーザーにEメールアドレスの提出を求めることができたら素晴らしいと思いませんか？WordPressサイトからファイルをダウンロードする際に、ユーザーにメールアドレスの共有を促す方法をご紹介します。
フォームを作る準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proにはたくさんの無料テンプレートが含まれており、14日間の返金保証がついています。
この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。
データが入力された後にアコーディオンを再び閉じると、データが失われ、再入力しなければならないようです。何か見落としているのでしょうか？
ピーター - 喜んでお手伝いさせていただきます！お時間がありましたら、サポートまでご連絡ください。
WPFormsのライセンスをお持ちの方は、メールサポートをご利用いただけますので、サポートチケットを送信してください。
それ以外の場合は、WPForms Lite WordPress.orgのサポートフォーラムで限定的な無料サポートを提供しています。
ありがとう🙂。