Haben Sie ein Langformular, dem Sie ein Inhaltsverzeichnis hinzufügen möchten? Sie können ganz einfach HTML-Links in den oberen Teil Ihres Formulars sowie in die Abschnittsüberschriften Ihres Formulars einfügen, die es den Benutzern ermöglichen, schnell und mühelos zwischen den Abschnitten Ihres Formulars zu wechseln.
In diesem Tutorial zeigen wir Ihnen den HTML-Code, den Sie benötigen, um Inhaltsverzeichnisse in Ihren WordPress-Formularen zu aktivieren.
Ihr Formular erstellen
In unserem Beispiel erstellen wir ein Personalformular, in dem Informationen zur Person, zu Familienangehörigen, Notfallkontakten und Interessen erfasst werden.
Erstellen Sie also zunächst ein neues Formular oder bearbeiten Sie ein bestehendes, um auf den Formularersteller zuzugreifen. Fügen Sie im Formularersteller die entsprechenden Felder hinzu. Die verschiedenen Informationskategorien werden, wie bereits erwähnt, mit Hilfe des HTML-Formularfelds unterteilt.
Hinzufügen der HTML-Links zu den Überschriften
Nun, da 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 Informationen hinzu.
<h2><a id="personal">Personal Information</a></h2>
Mit diesem HTML-Code fügen wir eine HTML-Überschrift h2 zu unserem Formular hinzu, und innerhalb dieser Überschrift fügen wir einen Link ein. Die id des Links ist das Wichtigste, da sie das Ziel des Links bestimmt.
Diesen Schritt müssen Sie für jeden Abschnitt wiederholen, den Sie haben.
Hinweis: Die ID jedes Links sollte eindeutig sein. Wenn Sie dieselbe ID für mehrere Abschnitte auf einer Seite verwenden, verwirrt dies den Browser, und der Selektor funktioniert nicht.
Erstellen des Inhaltsverzeichnisses
In unserem letzten HTML-Schritt fügen wir ganz oben im Formular ein HTML-Feld ein, das eine ungeordnete HTML-Liste mit Links enthält, die auf die einzelnen Abschnitte des Formulars verweisen.
Wenn diese Links angeklickt werden, springt die Seite zu dem entsprechenden Abschnitt des Formulars.
<ul>
<li><h2><a href="#personal">Personal Information</a></h2></li>
<li><h2><a href="#dependents">Dependents</a></h2></li>
<li><h2><a href="#emergency">Emergency Contacts</a></h2></li>
<li><h2><a href="#hobbies">Hobbies & Interests</a></h2></li>
</ul>
Hinweis: Die ID aus dem vorherigen Schritt und die href aus diesem Schritt müssen genau übereinstimmen, mit einem Pfundzeichen (#) vor dem Text, oder eine wird nicht auf die andere Link.
Gestaltung des Inhaltsverzeichnisses
Dieser Schritt ist völlig optional, aber wenn Sie diesen Links ein gewisses Styling hinzufügen 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 Feld-ID des HTML-Formulars 14 und unsere Formular-ID ist 1279. Das bedeutet, dass unser CSS nur auf dieses spezielle Formular und diese Feld-ID angewendet wird.
Wenn Sie Hilfe benötigen, um die IDs Ihrer Formulare und Felder zu finden, sehen Sie sich dieses Tutorial an.
Das war's! Sie wissen jetzt, wie Sie ganz einfach ein Inhaltsverzeichnis am Anfang Ihrer Langform erstellen können!
Möchten Sie als nächstes ein internes Feld erstellen, das Sie zum Filtern Ihrer Einträge verwenden können? Werfen Sie einen Blick auf unsere Anleitung zum Hinzufügen eines filterbaren Feldes zu einem Formular für den internen Gebrauch.