### [Afficher dynamiquement les années dans vos formulaires](https://wpforms.com/developers/how-to-dynamically-display-years-in-your-forms/)

**Publié le :** 18 février 2022
**Auteur :** Umair Majeed

**Extrait :** Ce tutoriel vous montrera comment utiliser JavaScript pour afficher dynamiquement les années dans votre formulaire. 

**Contenu :**

Souhaitez-vous afficher dynamiquement les années dans votre formulaire ? En tirant parti des fonctionnalités de JavaScript, vous pouvez facilement automatiser le défilement des années.

Dans ce tutoriel complet, nous vous guiderons pas à pas dans la création d’un formulaire d’inscription scolaire tout en utilisant JavaScript pour mettre à jour dynamiquement les années affichées.

## Création du formulaire

Pour commencer, créons un nouveau formulaire. En haut du formulaire, nous allons insérer un champ de formulaire **HTML**. Ce champ comprendra à la fois du texte et du balisage HTML, ce qui nous permettra d’afficher de manière dynamique le titre du formulaire, qui inclura l’année scolaire en cours.

Après avoir ajouté le champ **HTML** à votre formulaire, accédez à la section **Code** dans l’interface du générateur de formulaires. Il vous suffit de copier-coller l'extrait de code HTML suivant dans cette section :

```

Inscription scolaire
Pour l'année scolaire  à 
```

N'hésitez pas à sélectionner et copier l'extrait de code fourni pour l'insérer facilement dans votre formulaire.

Dans ce code HTML, nous avons utilisé deux éléments span avec des identifiants uniques : `last-year` et `next-year`. Ces éléments servent de balises où les valeurs d'année dynamiques seront insérées. Par exemple, `last-year` affichera l'année scolaire de début, tandis que `next-year` indiquera l'année scolaire de fin.

![Ajoutez le code HTML à votre formulaire afin qu'il affiche dynamiquement les années de votre année scolaire](https://wpforms.com/wp-content/uploads/2022/02/wpforms-add-html-field.jpg)Si vous avez besoin d’aide pour créer votre formulaire, [veuillez consulter cette documentation](https://wpforms.com/docs/creating-first-form/ « Comment créer votre premier formulaire »).

## Affichage dynamique des années

Intégrons maintenant l’extrait de code JavaScript chargé de remplir automatiquement ces années.

Si vous ne savez pas comment ou où intégrer des extraits de code comme celui-ci, nous vous recommandons de consulter notre [tutoriel sur l’ajout de code PHP ou JavaScript personnalisé pour WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ « Comment ajouter du code PHP ou JavaScript personnalisé pour WPForms »).

Avec cet extrait de code, nous récupérons dynamiquement l'année en cours pour l'afficher dans l'élément span « next-year ». Pour l'élément span « last-year », nous soustrayons un an de l'année en cours afin de représenter l'année scolaire précédente. Cela garantit que les années affichées reflètent fidèlement la période d'inscription scolaire.

![le formulaire affichera désormais l'année en cours ainsi que l'année en cours moins un an](https://wpforms.com/wp-content/uploads/2022/02/wpforms-dynamically-change-year.jpg)En conclusion, en intégrant cet extrait de code JavaScript à votre formulaire d'inscription scolaire, vous pouvez afficher de manière transparente l'année scolaire en cours et l'année scolaire précédente. Cette fonctionnalité dynamique améliore l'expérience utilisateur et garantit que le processus d'inscription s'aligne sur le calendrier scolaire.

Souhaitez-vous également afficher le nombre de mots en temps réel sous votre champ de texte ? Consultez notre tutoriel sur [Comment afficher le nombre total de mots sous votre champ de formulaire](https://wpforms.com/developers/how-to-display-a-total-word-count-under-your-form-field/ "Comment afficher le nombre total de mots sous votre champ de formulaire").

## Action de référence

[wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "Utilisation de l'action wpforms_wp_footer_end")

**Catégories :** Tutoriels

**Mots-clés :** Javascript, JS

---