生年月日(都道府県)の入力フォームをプルダウンメニューで作成する手順(Contact form 7)

コンタクトフォーム7で生年月日の入力フォームを作る


コンタクトフォーム7(Contact form7)は言わずと知れたお問い合わせフォームを簡単に作れる和製プラグインです。

先日、WordPressの使い方のサポートをしていた時、使いまわしできそうなコンタクトフォーム7のフォームを作ったのでメモ。

見た方が早いですね。これです。

生年月日をプルダウン化し、中央値を設定したコンタクトフォーム

生年月日(必須)


日付フォーマットを選ぶ

よく見る形の日付フォームですが、Contact form7で日付のフォームを簡単に作ろうと思ったら、
「日付」を選ぶと思うんです。

すると実際に表示されるのはこんなカレンダー形式です。

カレンダーをクリックするだけなので、現在に近い日付の入力には便利なんですが、
生年月日を入れるとなると、特に生まれ年を選ぶのが面倒です。

遡らないといけないので。

なので、かえってシンプルなプルダウンリストの方がユーザーに親切なのですが、作るのが面倒なんですよね~
option項目が多いから。

今回の場合は1920年(98歳)生まれ~2001年(17歳)と82年分の西暦+12の月+31の日、
これを用意しないと行けないので、どうせならコピペで済むようなフォーマットがあれば嬉しいですよね。

生年月日って使う機会が多いと思われるので、残しておきます。

フォーム欄貼り付け用コード

生年月日(必須) [select* birth-year default:61 "1920" "1921" "1922" "1923" "1924" "1925" "1926" "1927" "1928" "1929" "1930" "1931" "1932" "1933" "1934" "1935" "1936" "1937" "1938" "1939" "1940" "1941" "1942" "1943" "1944" "1945" "1946" "1947" "1948" "1949" "1950" "1951" "1952" "1953" "1954" "1955" "1956" "1957" "1958" "1959" "1960" "1961" "1962" "1963" "1964" "1965" "1966" "1967" "1968" "1969" "1970" "1971" "1972" "1973" "1974" "1975" "1976" "1977" "1978" "1979" "1980" "1981" "1982" "1983" "1984" "1985" "1986" "1987" "1988" "1989" "1990" "1991" "1992" "1993" "1994" "1995" "1996" "1997" "1998" "1999" "2000" "2001"]年 [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" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31"]日

西暦のセレクトボックスでは、default: オプションで初期値を指定しています。
値は、「~番目の項目」を表しているので、ターゲットの年齢に合わせて変えると良いでしょう。
例では1980年生まれ(2018年現在、38歳)にしました。

コンタクトフォームの貼り付け場所は?

コンタクトフォーム7にプルダウンで生年月日を表示した例

(2018/09/07 追記)
どこに貼り付けるのですか?とご質問をいただきましたので、利用例を画像で示しておきます。

左メニュー「お問い合わせ」より「新規追加」(編集の場合は作成済みのフォーム)を開き、上部のタブの「フォーム」欄に貼り付けます。

上の例では、コード全体を段落タグ<p>で囲っています。

メール欄コピペ用

自走送信メールも同様に、メールタブを開き、必要な箇所に以下のコードを入れます。

[birth-year]年[birth-month]月[birth-day]日

東京都が初期値の都道府県のコピペ用フォームも

都道府県のコンタクトフォームも、ちょっと調べたところ他のブログでも複数紹介されてましたが、残念ながら「北海道」が先頭にあってちょっと不親切でした。
沖縄の人のスクロール量を合理的に減らしてあげたい・・・。

そんなわけで、確率的に使いやすい「東京都」を初期値にしたものをメモしておきます。

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

メール用

[your-pref]

ちなみに今回ご相談頂き、一緒に作業したのは占い師さん。
四柱推命で占う場合もあるので、年月日、だけでなく時・分も加えたフォーマットも作りました。

コメント

  1. アバター吉田愼吾 より:

    試しに黒い箱の中の内容をコピペしたら、設定エラーが出て使えませんでした。

    • タカハシタカハシ より:

      コメントありがとうございます(^^)
      私も再度試してみましたが、設定エラーは再現できませんでした。

      どのような作業をされたタイミングでエラーが出たのでしょうか?
      エラーメッセージなど具体的にお書きいただけると検証できるかも知れません。

  2. アバターfocus より:

    コンタクトフォームで生年月日をドロップダウン表示のやり方を探していて此方にたどり着きました。
    黒枠の部分をどこに貼り付ければいいのか分からず、躓いております…。
    どこに貼り付ければいいのでしょうか?
    よろしくお願いします。

    • タカハシタカハシ より:

      ご質問ありがとうございます。
      記事中に画像とともに追記しておきましたので、ご覧ください ^^

  3. アバターfocus より:

    早々に返信ありがとうございます!無事解決しました!
    私がlabelで囲んでいたためうまく表示されていなかったのかもしれません。
    助かりました!(^^)!

  4. アバターMegu より:

    サイト上で表示した時に、ボックスの中の背景色と文字色がどちらも白っぽく表示されてしまい見えづらいのですが、文字色を黒に変えることは可能でしょうか?

    • ヤタガラスヤタガラス より:

      コメントありがとうございます ^^
      文字色や背景色については、ご利用のテーマのスタイルに依存しています。
      色を変える方法はいくつか考えられますが、コンタクトフォームのタグを入れる時にクラスを指定いただき、追加CSSで色指定を追記するのが良いかと思います。

      • アバターMegu より:

        返信ありがとうございます。
        Contact Form 7のCSSカスタマイズについて書かれたブログなども参考にしながら追加CSSでなんとか文字色変更に成功しました!
        便利なフォームをお教えいただきありがとうございました。

タイトルとURLをコピーしました