生年月日入力フォームをContact Form 7で実装

「よくある項目なのに日付の入力フォームってサイトによって全然違うな」と思ったことありませんか?テキストボックスだったり、プルダウンだったり、はたまたカレンダーが出てきたり……

入力フォームの中でも日付の扱いは難しくと言われており、1つのUIで全ての問題を解決できないため「何を重視するか」によって最適なUIが変わります。そのためサイトによって様々な工夫がされています。

日付の扱いが難しいことはよく知られています。タイムゾーン、フォーマット、区切り文字、各月の日数、一年の長さ、夏時間など、一定でない要素がいくつもあります。これほど複雑なものをデザインするのは大変な作業であり、通常のインターフェースを作るのとはわけが違います。

アダム・シルヴァー 著, 土屋一彦 監修, Form Design Patterns,  ボーンデジタル, 2019, p.129

生年月日という一例をとってみても同様で、たとえばTwitterの生年月日入力フォームにもさりげない工夫がされています。

Twitterの生年月日入力フォーム

Twitterの新規登録フォームを見てみます。(2021/9/19段階)

Twitterの新規登録フォーム
Twitterの新規登録フォーム

項目が3つに別れた一般的なプルダウンですが、「年」だけ降順になっています。

つまり、若い人ほど自分の生まれた年が上に表示されるのでスクロール量が少なくなります。

Twitterの利用者は若年層が多い1Distribution of Twitter users worldwide as of April 2021, by age group | statistaので、ほとんどの利用者にとって降順のほうが合理的です。仮に昇順の場合、人間の寿命である120歳のユーザーを考慮した1900年あたりからスクロールすることになるのでかなり不便ですよね。

サービスにも依りますが「年を降順で選択できるようにする」というのはかなり有効なUIだと思います。

Contact Form 7で生年月日入力フォーム

※プラグイン化にともないコードを削除しました(2021/11/12)→Watts | CF7を更に使いやすくするEFOプラグイン

WordPressのContact Form 7でも同じことがしたい!ということで独自の生年月日フォームタグを実装してみました。

※実装時のContact Form 7のバージョンは5.4.2

独自の生年月日フォーム
独自の生年月日入力フォーム
生年月日のフォームタグ
生年月日のフォームタグ
生年月日のフォームタグ生成画面
生年月日のフォームタグ生成画面
生年月日の取り扱い形式
生年月日の取り扱い形式(Flamingo)

いい感じですね~。タグ名はdob(Date Of Birth)としました。独立したプルダウンで「年」「月」「日」をそれぞれ処理するのではなく3つまとめて処理を行っているので、正しく日付のチェックやデータの送信が行えます。

Contact Form 7の「日付」タグはdate入力タイプですが、あくまで汎用的な日付の入力タイプです。生年月日に特化させたい場合はこちらのほうが使い勝手がいいんじゃないかな?と思います。

また、date入力タイプはブラウザやOSごとにUIが大きく異なるので、UIを統一させたい場合にも有効だと思います。

実装してみて思ったこと

Contact Form 7で既に実装されているタグのコードを参考に実装しました。「日付(date)」と「プルダウンメニュー(select)」のニコイチです。もともと改造しやすいように作られているので、素直に機能追加できると思います。

気をつけるポイントとして、JavaScriptが無効だったときのためにエラー表示用のHTMLをPHP側で組み立てる必要があります。2デバッグの際はdefine (‘WPCF7_LOAD_JS’, false);でJavaScriptを無効にすると楽ただ、JavaScriptが有効な場合は共通の処理で勝手に書き換えてくれるので、それを前提とするなら雑に実装しても大丈夫かも。

メッセージについてですが、Contact Form 7の翻訳を流用できるところは流用しました(行儀が悪くてすみません…)。それ以外の独自のメッセージは日本語で直接指定しています。

このように実装だけ公開するのはあんまりよくないことだなぁと思っています。バージョンアップのときに困るし、WordPressの翻訳の仕組みにも乗れないし……折を見てプラグイン化したいところです。

↑プラグイン化にともない修正しました。

脚注