### [Dynamische Anzeige von Jahreszahlen in Ihren Formularen](https://wpforms.com/developers/how-to-dynamically-display-years-in-your-forms/)

**Veröffentlicht:** 18. Februar 2022
**Autor:** Umair Majeed

**Auszug:** In diesem Tutorial erfahren Sie, wie Sie mit JavaScript Jahreszahlen in Ihrem Formular dynamisch anzeigen können. 

**Inhalt:**

Möchten Sie Jahreszahlen in Ihrem Formular dynamisch anzeigen? Mithilfe von JavaScript-Funktionen können Sie den Jahresverlauf mühelos automatisieren.

In diesem umfassenden Tutorial führen wir Sie Schritt für Schritt durch die Erstellung eines Anmeldeformulars für eine Schule und zeigen Ihnen, wie Sie die angezeigten Jahreszahlen mithilfe von JavaScript dynamisch aktualisieren können.

## Erstellen des Formulars

Lassen Sie uns zunächst ein neues Formular erstellen. Am oberen Rand des Formulars fügen wir ein **HTML**-Formularfeld ein. Dieses Feld besteht aus einer Mischung aus Text und HTML-Markup, wodurch wir den Titel des Formulars dynamisch anzeigen können, der das aktuelle Schuljahr enthält.

Nachdem Sie das **HTML**-Feld zu Ihrem Formular hinzugefügt haben, navigieren Sie zum Abschnitt **Code** in der Benutzeroberfläche des Formular-Builders. Sie können den folgenden HTML-Codeausschnitt einfach kopieren und in diesen Abschnitt einfügen:

```

Schulanmeldung
Für das Schuljahr  bis 
```

Sie können den bereitgestellten Codeausschnitt gerne auswählen und kopieren, um ihn einfach in Ihr Formular einzufügen.

In diesem HTML-Code haben wir zwei span-Elemente mit eindeutigen IDs verwendet: `last-year` und `next-year`. Diese Elemente dienen als Platzhalter, an denen die dynamischen Jahreswerte eingefügt werden. Beispielsweise zeigt `last-year` das beginnende Schuljahr an, während `next-year` das endende Schuljahr angibt.

![Fügen Sie den HTML-Code in Ihr Formular ein, damit die Jahre für Ihr Schuljahr dynamisch angezeigt werden](https://wpforms.com/wp-content/uploads/2022/02/wpforms-add-html-field.jpg)Wenn Sie Hilfe bei der Erstellung Ihres Formulars benötigen, [lesen Sie bitte diese Dokumentation](https://wpforms.com/docs/creating-first-form/ „So erstellen Sie Ihr erstes Formular“).

## Dynamische Anzeige der Jahre

Fügen wir nun das JavaScript-Snippet ein, das für die automatische Einblendung dieser Jahre zuständig ist.

Wenn Sie sich nicht sicher sind, wie oder wo Sie solche Snippets integrieren sollen, empfehlen wir Ihnen, unser [Tutorial zum Hinzufügen von benutzerdefiniertem PHP oder JavaScript für WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ „So fügen Sie benutzerdefiniertes PHP oder JavaScript für WPForms hinzu“) zu lesen.

Mit diesem Snippet rufen wir dynamisch das aktuelle Jahr ab, um es für das `next-year`-Span-Element anzuzeigen. Für das `last-year`-Span-Element ziehen wir ein Jahr vom aktuellen Jahr ab, um das vorangegangene Schuljahr darzustellen. Dadurch wird sichergestellt, dass die angezeigten Jahre den Schulanmeldezeitraum genau widerspiegeln.

![Jetzt zeigt das Formular sowohl das aktuelle Jahr als auch das aktuelle Jahr minus ein Jahr an](https://wpforms.com/wp-content/uploads/2022/02/wpforms-dynamically-change-year.jpg)Zusammenfassend lässt sich sagen, dass Sie durch Einbindung dieses JavaScript-Snippets in Ihr Schulanmeldeformular das aktuelle und das vorangegangene Schuljahr nahtlos anzeigen können. Diese dynamische Funktion verbessert die Benutzererfahrung und stellt sicher, dass der Anmeldeprozess mit dem akademischen Kalender übereinstimmt.

Möchten Sie unter Ihrem Textfeld auch eine Live-Wortanzahl anzeigen? Werfen Sie einen Blick auf unser Tutorial zum Thema [So zeigen Sie eine Gesamtwortanzahl unter Ihrem Formularfeld an](https://wpforms.com/developers/how-to-display-a-total-word-count-under-your-form-field/ "So zeigen Sie eine Gesamtwortanzahl unter Ihrem Formularfeld an").

## Referenz-Aktion

[wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "Verwendung der Aktion wpforms_wp_footer_end")

**Kategorien:** Tutorials

**Tags:** Javascript, JS

---