### [Exibindo anos dinamicamente em seus formulários](https://wpforms.com/developers/how-to-dynamically-display-years-in-your-forms/)

**Publicado:** 18 de fevereiro de 2022
**Autor:** Umair Majeed

**Trecho:** Este tutorial mostrará como usar JavaScript para exibir anos dinamicamente dentro do seu formulário. 

**Conteúdo:**

Você tem interesse em exibir anos dinamicamente dentro do seu formulário? Ao aproveitar a funcionalidade do JavaScript, você pode automatizar facilmente a progressão dos anos.

Neste tutorial abrangente, vamos guiá-lo pelo processo passo a passo de criação de um formulário de matrícula escolar, utilizando JavaScript para atualizar dinamicamente os anos exibidos.

## Criando o formulário

Para começar, vamos criar um novo formulário. Na parte superior do formulário, inseriremos um campo de formulário **HTML**. Esse campo será composto por uma combinação de texto e marcação HTML, permitindo-nos exibir dinamicamente o título do formulário, que incluirá o ano letivo atual.

Depois de adicionar o campo **HTML** ao seu formulário, navegue até a seção **Código** na interface do construtor de formulários. Você pode simplesmente copiar e colar o seguinte trecho de código HTML nesta seção:

```

Matrícula escolar
Para o ano letivo  até 
```

Fique à vontade para selecionar e copiar o trecho de código fornecido para facilitar a inserção no seu formulário.

Neste código HTML, utilizamos dois elementos span com IDs exclusivos: `last-year` e `next-year`. Esses elementos servem como espaços reservados onde os valores dinâmicos do ano serão inseridos. Por exemplo, `last-year` exibirá o início do ano letivo, enquanto `next-year` indicará o fim do ano letivo.

![adicione o código HTML ao seu formulário para que ele exiba dinamicamente os anos do seu ano letivo](https://wpforms.com/wp-content/uploads/2022/02/wpforms-add-html-field.jpg)Se precisar de ajuda para criar seu formulário, [consulte esta documentação](https://wpforms.com/docs/creating-first-form/ "Como criar seu primeiro formulário").

## Exibição dinâmica dos anos

Agora, vamos incorporar o trecho de JavaScript responsável por preencher esses anos automaticamente.

Se você não tiver certeza de como ou onde integrar trechos como este, recomendamos consultar nosso [tutorial sobre como adicionar PHP ou JavaScript personalizado para o WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Como adicionar PHP ou JavaScript personalizado para o WPForms").

Com este trecho, estamos recuperando dinamicamente o ano atual para exibir no elemento span `next-year`. Para o elemento span `last-year`, estamos subtraindo um ano do ano atual para representar o ano letivo anterior. Isso garante que os anos exibidos reflitam com precisão o período de matrículas da escola.

![agora o formulário exibirá o ano atual, bem como o ano atual menos um ano](https://wpforms.com/wp-content/uploads/2022/02/wpforms-dynamically-change-year.jpg)Concluindo, ao incorporar este trecho de JavaScript ao seu formulário de matrícula escolar, você pode exibir de forma integrada o ano letivo atual e o anterior. Esse recurso dinâmico melhora a experiência do usuário e garante que o processo de matrícula esteja alinhado com o calendário acadêmico.

Gostaria de fornecer também uma contagem de palavras em tempo real abaixo do seu campo de texto? Dê uma olhada em nosso tutorial sobre [Como exibir uma contagem total de palavras abaixo do campo do seu formulário](https://wpforms.com/developers/how-to-display-a-total-word-count-under-your-form-field/ "Como exibir uma contagem total de palavras abaixo do campo do seu formulário").

## Ação de referência

[wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "Usando a ação wpforms_wp_footer_end")

**Categorias:** Tutoriais

**Tags:** Javascript, JS

---