手軽に ContactForm7 で文字数&数値の 入力制限 をする方法

ContactForm7 で 電話番号などをハイフンなしの数字で制限したいと思った際に、簡単な方法がないかと試行錯誤してみました。

前準備

子テーマ等でJavaScriptを使えるようにしておきます。

ContactForm7 側の作業

ContactForm7 側は number だと文字数の制限ができないため、text か tel あたりを使います。


今回は” number ” というクラスに対して、JavaScriptを実行します。

<!-- Sample -->
<dl>
<dt>郵便番号 (必須、ハイフンなし)</dt>
<dd>[text* your-zipcode minlength:7 maxlength:8 class:form-control class:number] </dd>
</dl>

<dl>
<dt>電話番号 (必須、ハイフンなし)</dt>
<dd>[tel* your-tel minlength:6 maxlength:11 class:form-control class:number]</dd>
</dl>

JavaScriptの記述

jQuery(function(){
    jQuery('.number').attr('pattern', '\\d*');
    jQuery('.number').attr('onkeyup','if(event.keyCode==9||event.keyCode==16) return; this.value=this.value.replace(/[^0-9]+/i,"")');
});

スマートフォンで入力する場合、” pattern ” を指定しておけば、数字キーボードが出るのでそちらはおまけ。

” onkeyup “でキーが入力された後、数値じゃない場合は強制クリアするようにしています。

プラグインでも可能ですが、、、

ContactForm7の入力制限が可能なプラグインがいくつかありますが、本日時点では、日本語化されているプラグインが見つかりませんでした。

今回の方法はエラーメッセージ等は表示出来ませんが、簡易的な制限としては十分だと思います。

応援よろしくお願いします。
いいね ! してもらえると嬉しいです。

Twitter で

自己紹介

松田 大 と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか...

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています(^_^)。

現在勤めているJTクラウドシステムでは、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

現在、代表取締役兼二児のパパ。社畜ながらイクメン目指して、公私ともに慌ただしくしています(笑)

お問い合わせはJTクラウドシステムホームページからお願いします。