*

【WordPress】Contact Form 7の追加プラグイン「Contact Form 7 DatePicker」便利だけど手動入力されたときにエラー吐いちゃうのの対策

便利なプラグインContact Form 7の追加プラグイン「Contact Form 7 DatePicker」

過去に紹介したWordPressで簡単にお問い合わせフォームが実装できる有名プラグインContact Form 7。

◆過去記事
【WordPress】Contact Form 7で送信できないからWP-Mail-SMTPで対策!でもgoogle appsのsmtpの設定がわからない人のためだけの記事

それの追加プラグインでContact Form 7 DatePickerってやつがあります。

百聞は一見にしかず。実際に実装したのがこれです。

一番上の「希望日」ってところをクリックして見てください。

    必須希望日

    必須お名前

    必須メールアドレス

    必須お問い合わせ内容

    ※内容は送信されません。

    日付の選択でカレンダーが表示されないでしょうか?

    これがこの「Contact Form 7 DatePicker」の機能です。

    jQuery UIのDatepickerをWordPressのContact Form 7に簡単に実装できるということで非常に人気です。

    jQuery UIですのでUI(ユーザーインターフェイス)的に非常に向上(使いやすくなる)し、ユーザーにとっても嬉しいのはもちろんのこと。

    管理者としても、多くのお問い合わせフォームのデータベース化についても入力フォーマットが統一され、非常に勝手が良いです。

    • 2014年7月23日
    • 2014/7/23
    • 平成26年7月23日
    • 2014-7-23
    • 7/23
    • 7月23日

    なんていう風にそれぞれバラバラな形式だと、管理や検索が面倒ですし、これに数字の全角半角などが混ざると発狂ものです(#・∀・)

    というわけで非常に便利なのですが。。。

    入力文字の不正チェックで手動入力されるとエラーを吐く

    もう一度フォームを下記に貼りました。

    そこで「希望日」の欄をクリックすると同じくカレンダーが出てきますがそれを無視して適当に

    あああ

    とか入れてみて、次に送信してみてください。

      必須希望日

      必須お名前

      必須メールアドレス

      必須お問い合わせ内容

      すると赤文字で

      Invalid date supplied.

      ってのが希望日の入力フィールドの下に出ましたでしょうか?

      ※日本語にすると無効な日付が入力されました。って意味でこれは「Contact Form 7 DatePicker」のデフォルトのエラーメッセージです。設定で後から変更可能です。

      これはつまりカレンダーが表示されるので基本的にはそれを選択してもらうのでこういったことは起こらないのですが。

      もし万が一手動で入力した文字が違うフォーマットで入力された場合、さっきの管理者から見た管理や検索しやすさ的によろしくないので、エラーを出すといった仕組みです。

      ちなみに手動入力でもカレンダー選択と同じ形式で入力された場合は、エラーは出ません。

      当然これはこれで便利な機能であります。

      しかし、良く考えてみてください。

      カレンダー出てるのにあえて手動入力するのはなにか理由が?

      そう勘ぐりますよね?

      で、具体的に僕が仕事で管理してたフォームでよく起こっていたのが、以下のように入力したら送信出来ない!というのでした。

      • 7月の第一週
      • 7,8月の週末
      • 7/25-30のどれか1日
      • 今年度中
      • 未定

      などです。まあ当然起こり得ますよね。

      これらを入力すると、全てエラーで送信出来ません。

      なんとかならんもんかいな?と考えまして。

      で、出した結論が、管理や検索しやすさ的に入力形式は揃うのが望ましいが、

      そもそもカレンダー表示されるので多くの場合形式は揃う

      日程が複数あったり流動的だったり未定な人が送信出来ないのは意味が無い

      であれば、あえて入力形式によるフィルターは不要ではないのか?うん、そうだ!

      ということでした。

      なので、「Contact Form 7 DatePicker」で行われるこの日付入力形式のフィルターを解除してやろうと思い実際にしました。

      ただし、設定項目にこれらが見当たらなかったので、プラグインのコードを少しいじってやることで解決しました。

      少しというか本当にちょっとだけです。

      「Contact Form 7 DatePicker」の日付入力形式フィルターを解除

      まず、いじるファイルはWordPressのルート(WordPressをインストしたところ)から

      wp-content/plugins/contact-form-7-datepicker/modules/

      まで進むと、

      • date.php
      • datetime.php
      • time.php

      この3つのファイルがあるかと思います。

      これらは「Contact Form 7 DatePicker」で選択可能な入力形式で、それぞれこんな感じです。

        必須date

        必須datetime

        必須time

        で、それぞれ自分が使っているものをいじってください。

        一番ベタなdateであれば「date.php」といった具合です。

        今回も「date.php」を基準に説明します。

        まずは、「date.php」の冒頭部分を転記します。

        
        <?php
        
        class ContactForm7Datepicker_Date {
        
        	static $inline_js = array();
        
        	public static function register() {
        		// Register shortcodes
                add_action('wpcf7_init', array(__CLASS__, 'add_shortcodes'));
        
        		remove_filter('wpcf7_validate_date', 'wpcf7_date_validation_filter', 10);
        		remove_filter('wpcf7_validate_date*', 'wpcf7_date_validation_filter', 10);
        		remove_filter('wpcf7_messages', 'wpcf7_date_messages');
        		remove_action('admin_init', 'wpcf7_add_tag_generator_date', 19);
        
        		// Validations
        		add_filter('wpcf7_validate_date', array(__CLASS__, 'validation_filter'), 10, 2);
        		add_filter('wpcf7_validate_date*', array(__CLASS__, 'validation_filter'), 10, 2);
        ・
        ・
        ・
        
        

        こちらでいじるのは、これで言うと16行目の

        // Validations

        以降の

        add_filter(‘wpcf7_validate_date’, array(__CLASS__, ‘validation_filter’), 10, 2);
        add_filter(‘wpcf7_validate_date*’, array(__CLASS__, ‘validation_filter’), 10, 2);

        この2行です。

        datetime.phpやtime.phpでも10数行目と比較的早めに出てきます。

        そしてこの2行がそれぞれ

        【time】
        add_filter(‘wpcf7_validate_time‘, array(__CLASS__, ‘validation_filter’), 10, 2);
        add_filter(‘wpcf7_validate_time*‘, array(__CLASS__, ‘validation_filter’), 10, 2);

        【datetime】
        add_filter(‘wpcf7_validate_datetime‘, array(__CLASS__, ‘validation_filter’), 10, 2);
        add_filter(‘wpcf7_validate_datetime*‘, array(__CLASS__, ‘validation_filter’), 10, 2);

        となってます。

        で、ズバリこの2行が日付入力形式フィルターですので、これらを消す(わかりやすくコメントアウト)してあげれば完成です。

        偉そうにソースをいじるとか言ってましたが超カンタンでしょ?

        コメントアウトは文頭に「//」です。ネットスラングの照れじゃないよ。

        やだ、恥ずかしいそんなの///

        冗談はさておき、これで完成!

        
        <?php
        
        class ContactForm7Datepicker_Date {
        
        	static $inline_js = array();
        
        	public static function register() {
        		// Register shortcodes
                add_action('wpcf7_init', array(__CLASS__, 'add_shortcodes'));
        
        		remove_filter('wpcf7_validate_date', 'wpcf7_date_validation_filter', 10);
        		remove_filter('wpcf7_validate_date*', 'wpcf7_date_validation_filter', 10);
        		remove_filter('wpcf7_messages', 'wpcf7_date_messages');
        		remove_action('admin_init', 'wpcf7_add_tag_generator_date', 19);
        
        		// Validations
        		//add_filter('wpcf7_validate_date', array(__CLASS__, 'validation_filter'), 10, 2);
        		//add_filter('wpcf7_validate_date*', array(__CLASS__, 'validation_filter'), 10, 2);
        ・
        ・
        ・
        
        

        一点注意としては、これは「Contact Form 7 DatePicker」の本体を直接いじっているので、「Contact Form 7 DatePicker」のアプデが行われた時はこのファイルが上書きされることになると思われます。

        なので、アプデの度に、この2行のコメントアウトをするか、なんか自分で外部ファイル化するなりしなきゃですけど、まあ今日は疲れたので、これにて。

        バーイセンキュー!

        タイタイタイツマン 黒

        WordPress レッスンブック 3.x対応
        エビスコム
        ソシム
        売り上げランキング: 10,460

        関連記事

        Amazonの神対応に触れて~月曜始まり縦6行カレンダーはおすすめよ~

        おじいちゃんに囲碁の本が欲しいって言われたからアマゾンで買うねって言ったら「そんな遠くまで行かなくて

        記事を読む

        lightbox クリック前

        lightbox(ライトボックス)のie9のバグの修正方法(って言っても新しいバージョン入れなおすだけ)

        lightboxっていう無料のJavaScriptがあるの知ってますか? lightboxダウ

        記事を読む

        【WordPress】Contact Form 7でEnterキーを押すと勝手に送信されてしまう問題を解決する魔法のコード(JavaScript)

        アイキャッチ画像はギャグとして(笑) 就職活動中の女子大生にJavaとJavaScri

        記事を読む

        【ユーザー車検】軽トラを無料でGETしたけど車検代が無いから初の軽自動車ユーザー車検に挑戦!

        青春カーと悲しい別れ どうも。貧乏が板に付いてきて久しい僕です。 そのため、青春カー

        記事を読む

        【PHP】スマホ対応 メールフォーム設置 PEARを使ってgmailのsmtpサーバで送信する(ダウンロード可能)

        メールフォーム(お問い合わせフォーム)をサイトに設置したいというのはよくあります。 で、フォー

        記事を読む

        「いま、IS01を想う。」に想う。。。おっさんくさい話。

        川脇議員に貴重なお時間を割いていただき、インタビューをさせて頂いたのですが。 知多市議会議員「

        記事を読む

        起業するときにおすすめのサービス【PCFAXでペーパーレス】 02

        前回のやつ 前回の流れから、ミニマムに商売をはじめるためのおすすめのサービスの紹介です。

        記事を読む

        【感想】Netflixオリジナルドラマ『Jimmy〜アホみたいなホンマの話〜』 オクレさんもはや本人でしょ??

        Netflixオリジナルドラマ『Jimmy〜アホみたいなホンマの話〜』 くそ珍しい3泊4日

        記事を読む

        【PHP】〓WordPressとかで便利〓Internet Explorerの古いバージョンの場合は違うページにリダイレクトさせる ハック編 2/2

        【PHP】〓WordPressとかで便利〓Internet Explorerの古いバージョンの場合は

        記事を読む

        【apacheモジュール】mod_pagespeedのキャッシュの削除の仕方

        あいも変わらずgoogle先生はとんでもないものを作りますね!! インストールするだけ! お手

        記事を読む

        Message

        メールアドレスが公開されることはありません。

        日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

        このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

        • 高橋拓郎歳)
          愛知県知多市生まれ。
          大学在学中に個人で始めた事業を、大学院中退後法人化(法人化のために中退が正しいかも)。
          簡単にコンタクトとれるのでt@takuro.infoまで何か御用があればなんなりと。
          ブログの感想やご意見も大歓迎です!
        人生はサウナ理論~結婚するあなたへ~

        人生はサウナ理論。 というのを、敬愛するさんちゃんの名言「生きて

        e-taxでの確定申告のもにょもにょ(noteからの転載)

        この記事は2016年にnoteに投稿した記事の転載です。 ちょう

        【感想】Netflixオリジナルドラマ『Jimmy〜アホみたいなホンマの話〜』 オクレさんもはや本人でしょ??

        Netflixオリジナルドラマ『Jimmy〜アホみたいなホンマの話〜』

        【javaScript】2017年版 法人税実効税率 シミュレーション 自動計算機(コードも置いとくね)

        今日は4/3だからこれは嘘じゃないよ!! 法人税実効税率

        【ユーザー車検】軽トラを無料でGETしたけど車検代が無いから初の軽自動車ユーザー車検に挑戦!

        青春カーと悲しい別れ どうも。貧乏が板に付いてきて久しい僕で

        →もっと見る

        PAGE TOP ↑