AI要約
目次を追加したい長文フォームはお持ちですか？フォームの先頭にHTMLリンクを追加したり、フォームのセクション見出しにリンクを追加したりすることで、ユーザーはフォームのセクション間を素早く簡単に行き来できるようになります。
このチュートリアルでは、WordPressフォームで目次を有効にするために必要なHTMLを紹介します。
フォームの作成
例として、個人情報、扶養家族、緊急連絡先、興味などの情報を収集するための従業員名簿フォームを作成します。
それでは、まず新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスします。フォームビルダーで、関連するフィールドを追加してください。前述したように、さまざまな情報カテゴリは、HTMLフォームフィールドを使用して分割されます。
セクション見出しへのHTMLリンクの追加
フォームの準備ができたので、セクション見出しにリンクを追加しましょう。
例として、個人情報セクションにリンクを追加しましょう。
このHTMLでは、フォームにh2のHTML見出しを追加し、その見出し内にリンクを追加します。リンクのidが最も重要です。なぜなら、リンクの宛先を決定するからです。
この手順を、各セクションで繰り返す必要があります。
注意: 各リンクのidは一意である必要があります。ページ上の複数のセクションで同じidを使用すると、ブラウザが混乱し、セレクターが機能しなくなります。
目次の作成
最後のHTML手順では、フォームの先頭にHTMLフィールドを追加し、フォームの各セクションを指すリンクを含むHTML順序なしリストを保持します。
これらのリンクをクリックすると、ページはフォームの適切なセクションにジャンプします。
注意: 前の手順のidとこの手順のhrefは、先頭にポンド記号（#）を付けて正確に一致させる必要があります。そうしないと、一方から他方へリンクされません。
目次のスタイリング
この手順は完全にオプションですが、これらのリンクにスタイルを追加したい場合は、このCSSをサイトにコピーしてください。サイトにCSSを追加する方法についてサポートが必要な場合は、このチュートリアルを確認してください。
div#wpforms-1279-field_34 ul {
text-align: center;
}
div#wpforms-1279-field_14 ul li {
list-style: none !important;
display: inline-block;
margin: 5px 10px !important;
}
div#wpforms-1279-field_14 ul li h2 a {
font-size: 18px;
}
#wpforms-form-1279 h2 a {
font-size:26px;
width: 100%;
display: block;
color: #000000;
}
div#wpforms-1279-field_14 ul li h2 a:hover {
color: #b95d52;
text-decoration: underline;
}
私たちの例では、HTMLフォームフィールドIDは14で、フォームIDは1279です。これは、CSSがこの特定のフォームとフィールドIDにのみ適用されることを意味します。
フォームとフィールドIDの場所を見つけるのにヘルプが必要な場合は、こちらのチュートリアルをご覧ください。
これで完了です！これで、長いフォームの先頭に目次を簡単に作成する方法がわかりました！
次に、エントリのフィルタリングに使用できる内部フィールドを作成しますか？内部使用のためにフォームにフィルタリング可能なフィールドを追加するチュートリアルをご覧ください。