KI-Zusammenfassung
Haben Sie ein langes Formular, zu dem Sie ein Inhaltsverzeichnis hinzufügen möchten? Sie können ganz einfach HTML-Links oben in Ihrem Formular sowie zu den Abschnittsüberschriften in Ihrem Formular hinzufügen, die es Benutzern ermöglichen, schnell und mühelos zwischen den Abschnitten Ihres Formulars zu springen.
In diesem Tutorial zeigen wir Ihnen das HTML, das Sie benötigen, um ein Inhaltsverzeichnis in Ihren WordPress-Formularen zu aktivieren.
Erstellen Ihres Formulars
In unserem Beispiel erstellen wir ein Mitarbeiterformular, um Informationen wie persönliche Daten, Angehörige, Notfallkontakte und Interessen zu sammeln.
Um zu beginnen, erstellen Sie ein neues Formular oder bearbeiten Sie ein vorhandenes, um auf den Formular-Generator zuzugreifen. Gehen Sie im Formular-Generator und fügen Sie die relevanten Felder hinzu. Die verschiedenen Informationskategorien werden, wie bereits erwähnt, durch die Verwendung des HTML-Formularfelds unterteilt.
Hinzufügen der HTML-Links zu den Überschriften
Nachdem das Formular eingerichtet ist, ist es an der Zeit, unsere Links zu den Abschnittsüberschriften hinzuzufügen.
Fügen wir zum Beispiel einen Link zum Abschnitt Persönliche Daten hinzu.
Mit diesem HTML fügen wir eine HTML-Überschrift vom Typ h2 zu unserem Formular hinzu, und innerhalb dieser Überschrift fügen wir einen Link hinzu. Die id des Links ist am wichtigsten, da sie das Ziel des Links bestimmt.
Sie müssen diesen Schritt für jeden Ihrer Abschnitte wiederholen.
Hinweis: Die ID jedes Links sollte eindeutig sein. Die Verwendung derselben ID für mehrere Abschnitte auf einer Seite verwirrt den Browser, und der Selektor funktioniert nicht.
Erstellen des Inhaltsverzeichnisses
Mit unserem letzten HTML-Schritt fügen wir ganz oben im Formular ein HTML-Feld hinzu, das eine ungeordnete HTML-Liste mit Links enthält, die auf jeden Abschnitt unseres Formulars verweisen.
Wenn auf diese Links geklickt wird, springt die Seite zum entsprechenden Abschnitt des Formulars.
Hinweis: Die ID aus dem vorherigen Schritt und der href aus diesem Schritt müssen exakt mit einem Rautenzeichen (#) vor dem Text übereinstimmen, sonst verlinkt das eine nicht mit dem anderen.
Styling des Inhaltsverzeichnisses
Dieser Schritt ist optional. Wenn Sie jedoch diesen Links ein bestimmtes Aussehen verleihen möchten, kopieren Sie einfach dieses CSS auf Ihre Website. Wenn Sie Hilfe beim Hinzufügen von CSS zu Ihrer Website benötigen, lesen Sie bitte dieses Tutorial.
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;
}
In unserem Beispiel ist die ID des HTML-Formularfelds 14 und unsere Formular-ID ist 1279. Das bedeutet, dass unser CSS nur auf diese spezifische Formular- und Feld-ID angewendet wird.
Wenn Sie Hilfe beim Auffinden Ihrer Formular- und Feld-IDs benötigen, sehen Sie sich dieses Tutorial an.
Das ist alles! Sie wissen jetzt, wie Sie ganz einfach ein Inhaltsverzeichnis am Anfang Ihres langen Formulars erstellen können!
Möchten Sie als Nächstes ein internes Feld erstellen, mit dem Sie Ihre Einträge filtern können? Sehen Sie sich unser Tutorial zum Hinzufügen eines filterbaren Feldes zu einem Formular für die interne Verwendung an.