WordPressプラグイン「Contact Form 7」でホームページの問合せフォームをカレンダーで日付入力する(2020年4月以降)

事務所のホームページやこのブログについては、WordPressを利用して、専門的な知識がないながらも、何とか自力で管理・運営しています。

何か新しいページや機能を追加しようと思うと、ネットで紹介されている情報や書籍などから情報を得て、時間を掛けながら取り組んでいます。

今回は、ホームページの問合せフォームで希望日時を入力いただく際に、カレンダーを表示させて選択出来るようにしようと奮闘した記録になります。

2020年4月以前であれば、よく使われているプラグインを利用すれば、情報も多くて比較的導入し易かったのですが、そのプラグインが利用できなくなったことで思ったよりも時間がかかってしまいました。

なお、専門家ではないので、もっと効率良い方法などあるかもしれませんが、一つの方法として参考になれば幸いです。

2021年8月11日現在の情報ですので、最新情報は随時リンク先の情報などご確認下さい。

問合せフォームで日時を入力する

ホームページに問合せフォームを設置し、面談希望日などの候補を入力いただくことがあります。

一からコードを書いてとなると大変ですが、WordPressではプラグインを駆使することで、比較的容易に機能を追加することが出来ます。

私も問合せフォームの作成には「Contact Form 7」を使用しています。

ホームページを作成する側としては、一番手間暇が少ないのは、テキストボックスを設置して、そこにテキスト入力してもらう方法になります。

私も最初は以下のようなものを用意していました。
↓↓↓











    ↑↑↑

    当初は事務所ホームページをとりあえず稼働させることを最優先にしたかったので、問合せフォームも形があることが大事というように考えていました。

    そこから、実際に利用していただく際の利便性の向上を図るため、一つ一つのページを見直していきました。

    自分自身がWebから何かを申し込む時には、候補日をカレンダーで日付と時間を選択すると、自動的に日時が入力されるものを利用することがあります。

    いちいち日付と曜日の整合性などを確認することなく、選択出来れば便利です。

    自分のホームページにもこれは導入しなくてはと思い、そういったプラグインがないか探してみると、 「Contact Form 7 Datepicker」 というプラグインの情報が多く出て来ました。

    「Contact Form 7 Datepicker」がよく利用されていたが・・・

    「Contact Form 7 Datepicker」 の利用方法については、今でも色々なページで紹介されていますので、ここで紹介するよりも、そちらを検索していただく方が有用かと思います。

    早速、WordPressのメニュー画面の「プラグイン」から検索してみます。

     

     

    何故か色んなwebページで紹介されているプラグインが出て来ません。

    調べてみると、どうやらセキュリティの問題で2020年4月1日より更新がストップされ、利用出来なくなっているようです。

    WordPress.Orgホームページ
    contact-form-7-datepicker

     

    2021年8月11日現在でも、状況は変わっていないようです。

    「Date Time Picker for Contact Form 7」を利用してみる

    カレンダーから日付入力する方法は、他にも色々あり、代替出来るプラグインなどもいくつかあるようです。

    一つ一つ検証出来ているわけではありませんが、私が比較的導入し易かったプラグインを一つ挙げてみます。

    私は調べたりする時間を短縮するため、有料のものを利用することを選択しましたが、無料で同じような機能が使えるものがあるかもしれませんので、その辺りは自己判断でお願いします。

    WordPress.Orgホームページ
    Date Time Picker for Contact Form 7

     

    以下、プラグインインストール後の設定方法等について、流れを説明していきます。

    プラグインをインストールすると、WordPressのメニューに追加されます。

     

    クリックしてメニューを表示すると、各項目の設定画面となります。
    設定項目が多数ありますが、必要な項目を入力・選択していきます。

    以下全設定項目になります。
    必要最低限の項目のみ設定していますので、適宜変更下さい。

     

     

    あとは、 「Contact Form 7」にコードを記載していきます。

    ↓↓↓このように表示させる場合。





      <時刻>



      <時刻>



      <時刻>


      ↑↑↑

       

      こういった記載になります。

       

      書き方については、プラグインダウンロードページに説明が少しあります。

      WordPress.Orgホームページ
      Date Time Picker for Contact Form 7

       

      有料版であれば、日本語対応も出来る旨の記載があったので、購入してみました。

      設定についての動画マニュアルも用意されています。

      WordPress.Orgホームページ
      Date Time Picker for Contact Form 7

       

      実際にこの問合せフォームから日時入力して申込いただいていますが、今のところは問題なさそうです。

      おわりに

      ちょうど問合せフォームを整備しようとしたタイミングで、よく使われていたプラグインが使えなくなってしまったので、参考になる情報がなかなか見付からず、思ったよりも時間がかかってしまいました。

      こういう事態も想定して、ある程度は勉強しておくことも必要だなと痛感しています。


      【広告スペース】>>>>>>>>>>>>>>


      >>>>>>>>>>>>>> 【広告スペース】

      最後まで読んでいただき、ありがとうございました!

      この記事を書いている人

      エフティエフ税理士事務所
      代表 税理士
      藤園 真樹(ふじぞの まさき)

      大阪市福島区を拠点に活動中。
      オンラインも活用しているので、対応エリアは問いません。

      平日毎日でブログを更新中。

      プロフィールはこちら

      主なサービスメニュー

      【単発サポート】
       単発税務サポート
       個別コンサルティング
       確定申告サポート
       融資サポート

      【継続サポート】
       顧問業務