### [Visualizzazione dinamica degli anni nei moduli](https://wpforms.com/developers/how-to-dynamically-display-years-in-your-forms/)

**Pubblicato:** 18 febbraio 2022
**Autore:** Umair Majeed

**Estratto:** Questo tutorial ti mostrerà come utilizzare JavaScript per visualizzare dinamicamente gli anni all'interno del tuo modulo. 

**Contenuto:**

Ti interessa visualizzare dinamicamente gli anni all'interno del tuo modulo? Sfruttando le funzionalità di JavaScript, puoi automatizzare senza sforzo l'avanzamento degli anni.

In questo tutorial completo, ti guideremo passo dopo passo attraverso il processo di creazione di un modulo di iscrizione scolastica, utilizzando JavaScript per aggiornare dinamicamente gli anni visualizzati.

## Creazione del modulo

Per iniziare, creiamo un nuovo modulo. Nella parte superiore del modulo, inseriremo un campo modulo **HTML**. Questo campo comprenderà una combinazione di testo e markup HTML, consentendoci di mostrare dinamicamente il titolo del modulo, che includerà l'anno scolastico corrente.

Dopo aver aggiunto il campo **HTML** al tuo modulo, vai alla sezione **Codice** all'interno dell'interfaccia del generatore di moduli. Puoi semplicemente copiare e incollare il seguente frammento di codice HTML in questa sezione:

```

Iscrizione scolastica
Per l'anno scolastico  da 
```

Sentiti libero di selezionare e copiare il frammento di codice fornito per inserirlo facilmente nel tuo modulo.

In questo codice HTML, abbiamo utilizzato due elementi span con ID univoci: `last-year` e `next-year`. Questi elementi fungono da segnaposto in cui verranno inseriti i valori dinamici dell'anno. Ad esempio, `last-year` visualizzerà l'anno scolastico di inizio, mentre `next-year` indicherà l'anno scolastico di fine.

![aggiungi il codice HTML al tuo modulo in modo che visualizzi dinamicamente gli anni del tuo anno scolastico](https://wpforms.com/wp-content/uploads/2022/02/wpforms-add-html-field.jpg)Se hai bisogno di aiuto per creare il tuo modulo, [consulta questa documentazione](https://wpforms.com/docs/creating-first-form/ "Come creare il tuo primo modulo").

## Visualizzazione dinamica degli anni

Ora, incorporiamo lo snippet JavaScript responsabile del popolamento automatico di questi anni.

Se non sei sicuro di come o dove integrare snippet come questo, ti consigliamo di consultare il nostro [tutorial sull'aggiunta di PHP o JavaScript personalizzati per WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Come aggiungere PHP o JavaScript personalizzati per WPForms").

Con questo snippet, recuperiamo dinamicamente l'anno corrente da visualizzare per l'elemento span `next-year`. Per l'elemento span `last-year`, sottraiamo un anno dall'anno corrente per rappresentare l'anno scolastico precedente. Questo garantisce che gli anni visualizzati riflettano accuratamente il periodo di iscrizione scolastica.

![ora il modulo visualizzerà l'anno corrente e l'anno corrente meno un anno](https://wpforms.com/wp-content/uploads/2022/02/wpforms-dynamically-change-year.jpg)In conclusione, incorporando questo snippet JavaScript nel modulo di iscrizione scolastica, è possibile visualizzare senza soluzione di continuità l'anno scolastico corrente e quello precedente. Questa funzionalità dinamica migliora l'esperienza utente e garantisce che il processo di iscrizione sia allineato al calendario accademico.

Vorresti fornire anche un conteggio parole in tempo reale sotto il tuo campo di testo? Dai un'occhiata al nostro tutorial su [Come visualizzare un conteggio parole totale sotto il campo del tuo modulo](https://wpforms.com/developers/how-to-display-a-total-word-count-under-your-form-field/ "Come visualizzare un conteggio parole totale sotto il campo del tuo modulo").

## Azione di riferimento

[wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "Utilizzo dell'azione wpforms_wp_footer_end")

**Categorie:** Tutorial

**Tag:** Javascript, JS

---