*

【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

        関連記事

        会社を作ったら郵便局に集荷してもらったり銀行引き落とししてもらえるようになろう!

        おすすめのサービス 01 おすすめのサービス 02 これの続きっぽい感じ。

        記事を読む

        注文住宅(マイホーム)を建てる 凄い工務店発見 キミドリ建築の謎

        貧乏人も夢を見てもいいじゃない、というわけで。 前回3回に分けて工務店の探し方としてスーモカウ

        記事を読む

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

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

        記事を読む

        SDカードからデジカメで撮影した写真が消えてしまった時の復元方法~データ削除したけど実際には消えていない?~

        恋人への愛してるとバックアップは定期的に という有名な格言がなかったりなかったりしますが、バッ

        記事を読む

        BUFFALO(バッファロー)製のNAS「LS410D0201」の純正バックアップ機能だと履歴管理バックアップが出来ないから、ネットブックにAcronis製「True Image」をインストして自前バックアップシステムを作ったなう

        タイトル長すぎてうざくて死んで欲しいと思いますが。。。 ネットブックをN君から貰った話の続きと

        記事を読む

        【jQuery】Chart.jsを使って簡単にカッコイイレーダーチャートを実装するの巻

        友達の結婚式のプロフィールムービーが終わって一息ついていた頃。。。 いつもお世話になっている弁

        記事を読む

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

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

        記事を読む

        【WordPress】プラグインBackWPupを3.1.2にアプデしたらDropboxに保存するときにERROR: Dropbox API: (59) ってエラーが出た時の対処法

        バックアップと親孝行は後悔した時には遅いので出来るうちにしておけ! という名言がないとかないと

        記事を読む

        【WordPress】静的htmlサイトをフルCMS化するときにURLを変えないためのパーマリンク自由自在プラグイン「Custom Permalinks」

        静的htmlサイトをCMS化(WordPress化)するメリット 一家にひとつは古い静

        記事を読む

        美女Linuxのブログパーツをこのブログに入れた。そんだけ。。。

        このブログもいろいろ寂しいので、少しでも華やかにしようかなと思いまして。。。 美女Li

        記事を読む

        Message

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

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

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

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

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

        新紙幣とディープインパクトの単勝馬券

        僕は大学生になり、そして20歳になった時に、それまで未成年で禁止されて

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

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

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

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

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

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

        →もっと見る

        PAGE TOP ↑