### [フォーム内で年を動的に表示する方法](https://wpforms.com/developers/how-to-dynamically-display-years-in-your-forms/)

**公開日:** 2022年2月18日
**著者:** Umair Majeed

**抜粋:** このチュートリアルでは、JavaScriptを使用してフォーム内に年号を動的に表示する方法をご紹介します。

**内容：**

フォーム内で年号を動的に表示することに興味はありませんか？JavaScriptの機能を活用すれば、年号の更新を簡単に自動化できます。

この包括的なチュートリアルでは、JavaScriptを利用して表示される年号を動的に更新しながら、学校登録フォームを作成する手順を段階的に解説します。

## フォームの作成

まず、新しいフォームを作成しましょう。フォームの上部に、**HTML**フォームフィールドを挿入します。このフィールドはテキストとHTMLマークアップを組み合わせたもので、現在の学年を含むフォームのタイトルを動的に表示できるようにします。

フォームに**HTML**フィールドを追加したら、フォームビルダーインターフェース内の**コード**セクションに移動します。 以下のHTMLコードスニペットをこのセクションにコピーして貼り付けるだけで済みます：

```

学校登録
学年度  から 
```

フォームへの挿入を簡単にするため、提供されているコードスニペットを選択してコピーしてください。

このHTMLコードでは、`last-year`と`next-year`という一意のIDを持つ2つのspan要素を使用しています。これらの要素は、動的な年次値が挿入されるプレースホルダーとして機能します。 例えば、`last-year` には学年度の開始年度が、`next-year` には終了年度が表示されます。

![フォームにこのHTMLコードを追加すると、学年度の年が動的に表示されます](https://wpforms.com/wp-content/uploads/2022/02/wpforms-add-html-field.jpg)フォームの作成についてサポートが必要な場合は、[こちらのドキュメント](https://wpforms.com/docs/creating-first-form/「初めてのフォームの作成方法」）をご確認ください。

## 学年の動的表示

それでは、これらの学年を自動的に設定する JavaScript スニペットを組み込んでみましょう。

このようなスニペットをどのように、どこに組み込めばよいか分からない場合は、[WPFormsへのカスタムPHPまたはJavaScriptの追加に関するチュートリアル](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "How to Add Custom PHP or JavaScript for WPForms")を参照することをお勧めします。

このスニペットを使用すると、`next-year` span要素に表示する現在の年を動的に取得します。`last-year` span要素については、現在の年から1年を引いて、前年度の学年を表示します。これにより、表示される年が学校の登録期間を正確に反映するようになります。

![これで、フォームには今年度と、今年度から1年を引いた年度が表示されるようになります](https://wpforms.com/wp-content/uploads/2022/02/wpforms-dynamically-change-year.jpg)結論として、このJavaScriptスニペットを学校の登録フォームに組み込むことで、今年度と前年度の学年をシームレスに表示できるようになります。 この動的な機能により、ユーザーエクスペリエンスが向上し、登録プロセスが学事暦と確実に一致するようになります。

テキストフィールドの下にリアルタイムの文字数を表示したいですか？[フォームフィールドの下に総文字数を表示する方法](https://wpforms.com/developers/how-to-display-a-total-word-count-under-your-form-field/ "How to Display a Total Word Count Under Your Form Field")に関するチュートリアルをご覧ください。

## アクションの参照

[wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "wpforms_wp_footer_end アクションの使用方法")

**カテゴリ:** チュートリアル

**タグ:** Javascript, JS

---