HTMLのinput要素のreadonly属性をWordPressのコンタクトフォームプラグイン「Contact Form 7」で実装することで、メールフォームの項目に会議室予約を特定の月が自動的に入力されるようにする方法

こんにちは。コワーキングスペース7Fの星野邦敏です。

このブログ記事は、「アドベントカレンダー」という12月1日から25日まで25記事のブログ記事をリレー形式で繋ぐというインターネット上のイベントが最近ありまして、その中で、WordPress Advent Calendar 2015という「WordPress」に関するブログ記事のリレー記事として書いています。

さて、6F増床に伴い6Fに貸し会議室を作ることから、コワーキングスペース7F内の会議室エリアを電話可能ルームに運用を変更するお知らせにも書きましたが、今までコワーキングスペース7Fにおいて、会議室と呼んでいた部屋は、6Fにしっかりとした会議室を作ることで、2015年12月31日までで会議室としての役割を終えて、2016年1月より電話可能ルームにすることになりました。

このことにより、今まで7Fの会議室は事前予約が可能ではありましたが、
会議室の仮予約フォーム
この予約は2015年12月31日までしか出来なくする必要があります。

現在のコワーキングスペース7Fの予約フォームは、WordPressのコンタクトフォームプラグイン「Contact Form 7」で実装していまして、会議室の仮予約フォームの目立つ所に、上のキャプチャ画像のようにお知らせを出しました。しかしながら、うっかり見逃して、2016年1月以降の日付で入力された場合、「実は2016年1月以降は6Fでの会議室となりまして7Fでの会議室はご予約できなくなりまして」というような連絡のやり取りが発生してしまいます。

この連絡のやり取りは、利用者さんにとっても、スタッフにとっても、大変だと思いますので、運用から考えて、メールフォームの「月」の項目を「12月」が予め入っているように、HTMLのinput要素のreadonly属性を予め設定しておく、これをWordPressのコンタクトフォームプラグイン「Contact Form 7」で実装しました。

実装方法は簡単です。
Contact Form 7の［コンタクトフォームの編集］から［フォーム］に

[text* month readonly 3/ "12"]

と書くだけです。

ショートコードに「readonly」、そのショートコードの末尾に固定で入れておきたい文字を入れる、という形式です。

すると、以下のように、予め「12」が入った項目となり、その項目が送信されます。

今回、私達は、会議室の予約フォームとして使いましたが、他にも明示的に項目を固定しておきたい場合があるかと思います。その時にぜひ使ってみてください。なお、明示的にしないで固定の項目を送信するにはhiddenという隠し要素を使いましょう。

以上で、HTMLのinput要素のreadonly属性をWordPressのコンタクトフォームプラグイン「Contact Form 7」で実装することで、メールフォームの項目に会議室予約を特定の月が自動的に入力されるようにする方法でした。運用の関係でごくたまに使う場合があるかなと思いますので、もしそのような時にはぜひご参考ください。