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

前準備

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

ContactForm7 側の作業

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

Contact Form 7

最大、最小長オプションと文字数カウント

https://contactform7.com/ja/max-min-length-options-and-character-count/

Contact Form 7 4.1 で maxlength と minlength のオプションがいくつかの…

今回は” 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の入力制限が可能なプラグインがいくつかありますが、本日時点では、日本語化されているプラグインが見つかりませんでした。

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

自己紹介

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

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

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

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

現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「こどもICTかつしか教室」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

お問い合わせ