### [Mostrar dinámicamente los años en sus formularios](https://wpforms.com/developers/how-to-dynamically-display-years-in-your-forms/) **Publicado:** 18 de febrero de 2022 **Autor:** Umair Majeed **Extracto:** Este tutorial le mostrará cómo usar JavaScript para mostrar dinámicamente los años dentro de su formulario. **Contenido:** ¿Está interesado en mostrar dinámicamente los años en su formulario? Al aprovechar la funcionalidad de JavaScript, puede automatizar sin esfuerzo la progresión de los años. En este completo tutorial, le guiaremos a través del proceso paso a paso para crear un formulario de inscripción escolar mientras utiliza JavaScript para actualizar dinámicamente los años mostrados. ## Creación del formulario Para empezar, creemos un nuevo formulario. En la parte superior del formulario, insertaremos un campo de formulario **HTML**. Este campo comprenderá una combinación de texto y marcado HTML, lo que nos permitirá mostrar dinámicamente el título del formulario, que incluirá el año escolar actual. Después de agregar el campo **HTML** a su formulario, navegue a la sección **Código** dentro de la interfaz del constructor de formularios. Simplemente puede copiar y pegar el siguiente fragmento de código HTML en esta sección: ``` Inscripción escolar Para el año escolar a ``` Siéntase libre de seleccionar y copiar el fragmento de código proporcionado para insertarlo fácilmente en su formulario. En este código HTML, hemos utilizado dos elementos span con IDs únicos: `last-year` y `next-year`. Estos elementos sirven como marcadores de posición donde se insertarán los valores dinámicos de los años. Por ejemplo, `last-year` mostrará el año escolar de inicio, mientras que `next-year` indicará el año escolar de finalización. Si necesita ayuda para crear su formulario, [revise esta documentación](https://wpforms.com/docs/creating-first-form/ "Cómo crear su primer formulario"). ## Mostrar dinámicamente los años Ahora, incorporemos el fragmento de JavaScript responsable de poblar estos años automáticamente. Si no está seguro de cómo o dónde integrar fragmentos como este, le recomendamos que consulte nuestro [tutorial sobre cómo agregar PHP o JavaScript personalizado para WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Cómo agregar PHP o JavaScript personalizado para WPForms"). Con este fragmento, recuperamos dinámicamente el año actual para mostrarlo en el elemento span `next-year`. Para el elemento span `last-year`, restamos un año al año actual para representar el año escolar anterior. Esto asegura que los años mostrados reflejen con precisión el período de inscripción escolar. En conclusión, al incorporar este fragmento de JavaScript en su formulario de inscripción escolar, puede mostrar sin problemas el año escolar actual y el anterior. Esta característica dinámica mejora la experiencia del usuario y garantiza que el proceso de inscripción se alinee con el calendario académico. ¿Le gustaría también proporcionar un recuento de palabras en vivo debajo de su campo de texto? Eche un vistazo a nuestro tutorial sobre [Cómo mostrar un recuento total de palabras debajo del campo de su formulario](https://wpforms.com/developers/how-to-display-a-total-word-count-under-your-form-field/ "Cómo mostrar un recuento total de palabras debajo del campo de su formulario"). ## Acción de referencia [wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "Uso de la acción wpforms_wp_footer_end") **Categorías:** Tutoriales **Etiquetas:** Javascript, JS ---