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

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

**Excerto:** Este tutorial irá mostrar-lhe como utilizar JavaScript para apresentar dinamicamente os anos no seu formulário. 

**Conteúdo:**

Está interessado em apresentar dinamicamente os anos no seu formulário? Ao tirar partido da funcionalidade do JavaScript, pode automatizar facilmente a progressão dos anos.

Neste tutorial abrangente, iremos guiá-lo através do processo passo a passo de criação de um formulário de inscrição escolar, utilizando JavaScript para atualizar dinamicamente os anos apresentados.

## Criação do formulário

Para começar, vamos criar um novo formulário. Na parte superior do formulário, vamos inserir um campo de formulário **HTML**. Este campo será composto por uma combinação de texto e marcação HTML, permitindo-nos apresentar 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é à secção **Código** na interface do criador de formulários. Pode simplesmente copiar e colar o seguinte trecho de código HTML nesta secção:

```

Inscrição escolar
Para o ano letivo  até 
```

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

Neste código HTML, utilizámos dois elementos span com IDs exclusivos: `last-year` e `next-year`. Estes 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 este 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 o seu formulário, [consulte esta documentação](https://wpforms.com/docs/creating-first-form/ "Como criar o seu primeiro formulário").

## Exibição dinâmica dos anos

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

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

Com este fragmento de código, estamos a recuperar dinamicamente o ano atual para apresentar no elemento span `next-year`. Para o elemento span `last-year`, estamos a subtrair um ano do ano atual para representar o ano letivo anterior. Isto garante que os anos apresentados refletem com precisão o período de inscrição escolar.

![agora o formulário irá apresentar o ano atual, bem como o ano atual menos um ano](https://wpforms.com/wp-content/uploads/2022/02/wpforms-dynamically-change-year.jpg)Em conclusão, ao incorporar este fragmento de JavaScript no seu formulário de inscrição escolar, pode apresentar de forma integrada os anos letivos atual e anterior. Esta funcionalidade dinâmica melhora a experiência do utilizador e garante que o processo de inscrição está alinhado com o calendário letivo.

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

## Ação de referência

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

**Categorias:** Tutoriais

**Etiquetas:** Javascript, JS

---