【CONTACT FORM7用】都道府県・生年月日テンプレートの実装方法

Contact Form 7は、WordPressで非常に人気のあるフォームプラグインです。
その使いやすさから、多くのサイトで使用されていますが、
都道府県選択や生年月日の入力フィールドの設定は少し手間がかかる場合があります。
今回は、簡単に都道府県選択や生年月日入力フィールドを追加できるテンプレートの作成方法を紹介します。

都道府県セレクトボックスの実装

日本の都道府県をフォームで選択できるようにするためには、選択ボックス（<select>タグ）を使用します。
以下は、都道府県のリストを含むコードです。

<label>都道府県：
    [select* prefecture include_blank "北海道" "青森県" "岩手県" "宮城県" "秋田県" "山形県" "福島県" "茨城県" "栃木県" "群馬県" "埼玉県" "千葉県" "東京都" "神奈川県" "新潟県" "富山県" "石川県" "福井県" "山梨県" "長野県" "岐阜県" "静岡県" "愛知県" "三重県" "滋賀県" "京都府" "大阪府" "兵庫県" "奈良県" "和歌山県" "鳥取県" "島根県" "岡山県" "広島県" "山口県" "徳島県" "香川県" "愛媛県" "高知県" "福岡県" "佐賀県" "長崎県" "熊本県" "大分県" "宮崎県" "鹿児島県" "沖縄県"]
</label>

このコードをContact Form 7のフォーム内に追加するだけで、
日本全国の都道府県から選択できるようになります。

ポイント

include_blankオプションを使用することで、最初に空の選択肢が表示され、ユーザーが都道府県を選択しない限り何も選ばれない状態にすることができます。

*は必須項目であることを示しており、ユーザーがこの項目を入力しないとフォーム送信時に警告が表示されます。

生年月日入力フィールドの作成

次に、生年月日を入力するフィールドを作成します。
Contact Form 7では、[text]タグを使用して入力フィールドを追加することができますが、
生年月日を正確に入力させるためには、少し工夫が必要です。

生年月日入力テンプレート

<label>生年月日：
    [select* birth_year include_blank "1920" "1921" ... "2023"]
    [select* birth_month include_blank "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]
    [select* birth_day include_blank "1" "2" "3" "4" "5" ... "31"]
</label>

このテンプレートは、年、月、日を選択するドロップダウンをそれぞれ用意しています。
都道府県セレクトボックスと同様に、include_blankオプションを使用することで空欄からスタートし、
必須フィールドとして設定することが可能です。

年数を自動更新する場合

未来の年も考慮して、自動で最新の年を含めることができるようにするために、
functions.phpを編集して年のリストを自動生成する方法もあります。
以下のようにして、年数をダイナミックに更新できます。

function generate_year_options() {
    $current_year = date('Y');
    $year_options = '';
    for ($year = 1920; $year <= $current_year; $year++) {
        $year_options .= '<option value="' . $year . '">' . $year . '</option>';
    }
    return $year_options;
}

フォームデザインのカスタマイズ

Contact Form 7では、HTMLの基本的なタグを使うことができますが、
フォームデザインを整えるために、CSSでスタイルをカスタマイズすることもできます。
たとえば、都道府県や生年月日のフィールドの幅や余白、色合いを調整することで、
サイト全体のデザインにマッチしたフォームを作成することが可能です。

カスタマイズ例

.wpcf7 select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 20px;
}

まとめ

都道府県選択や生年月日入力のフィールドは、ユーザーにとって非常に便利であり、
フォームの使い勝手を向上させる要素です。
Contact Form 7を使用することで、これらの項目を簡単に追加・カスタマイズすることができ、
さらにfunctions.phpを使うことで、動的に年数を変更することも可能です。

サイトに適したフォームを作成し、ユーザーの入力をスムーズに進められるようにしましょう！

Favorite