WordPressのContactForm7でフォームの入力制限を強化する方法

2018年2月14日2018年5月7日

ContactForm7はワードプレスにフォームを簡単に設置できる有名なプラグインです。

1 ContactForm7で使える入力欄
2 入力できる文字の種類を制限する方法
3 ContactForm7が生成するinputタグにpattern属性を追加する方法

ContactForm7で使える入力欄

一般的にフォームの入力項目といえば、普通のテキストボックスのほか、「メールアドレス」「電話番号」「数値」「日付」など様々な種類がありますが、それらはHTMLのinputタグのtype属性を使い分けることで、ブラウザが自動的に該当する種類の入力欄を表示してくれます。

いくつか記述例を示します。

<!--普通のテキストボックス-->
<input type="text" ...>
<!--電話番号-->
<input type="tel" ...>
<!--メールアドレス-->
<input type="email" ...>
<!--日付-->
<input type="date" ...>
<!--数値-->
<input type="number" ...>

本来はこのようなHTMLの構文規則に基づいてタグで記述しなければならないのですが、ContactForm7をはじめとするフォーム系プラグインでは、管理画面に付いている各種のボタンを選ぶと、ショートコードと呼ばれる形式（ワードプレスが自動的にHTMLタグに変換してくれる）で入力欄が埋め込まれます。

ショートコードの例

[text* yourname id:name placeholder akismet:author "お名前をご記入ください"]

HTMLに変換された結果

<input type="text" name="yourname" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="name" aria-required="true" aria-invalid="false" placeholder="お名前をご記入ください">

複雑なinputタグを覚えなくて済むのは一見すると便利なのですが、直接inputタグを編集できないということは、直接inputタグを書き換えなければ実現できないような、きめ細かな入力制限をかけることができないということを意味します。

ユーザーが入力間違いをしないように最適化されたフォームを提供するためには、きめ細かな配慮と、それを実装するための技術が必要なのです。

入力できる文字の種類を制限する方法

たとえば「郵便番号の入力欄には、郵便番号として正しい形式以外は入力できないようにしたい」という場合、inputタグにpattern属性を追加すると、ブラウザが該当するパターン以外は入力できなくしてくれます。

<input type="text" name="郵便番号" pattern="\d{3}-\d{4}">

\d{3}-\d{4}という部分は正規表現と呼ばれる特殊な文法で、\dは数値、{3}は桁数を表します。つまり、「123-4567」のように3桁＋ハイフン＋4桁の形式だけが入力できるようにするという意味です。

正規表現は「郵便番号用」「電話番号用」のように決まった形式を覚えて使うのではなく、記号の組み合わせによって無限のパターンに対応できるような柔軟性を備えた仕組みです。そのため、正規表現を使いこなすには、ある程度の学習が必要だということは覚えておきましょう。

参考記事：
HTML5におけるinput要素のpattern、type属性のおさらい – Qiita

ContactForm7が生成するinputタグにpattern属性を追加する方法

ContactForm7に限った話ではなく、いったんワードプレス側で生成されたHTMLの内容を動的に書き換えるには、ブラウザ側にHTMLが読み込まれた直後にJavaScriptを実行してHTMLタグにアクセスする必要があります。

なぜなら、JavaScriptはブラウザ側で動作するプログラムなので、ブラウザが読み込んだHTMLを自由に変更することができるからです。

たとえば以下の内容を記述したJavaScriptファイルをワードプレスのテーマから読み込むと、ContactForm7が生成するメールアドレスの入力欄に「メールアドレスとして有効な形式以外は入力できないようにする」制限がかかります。

jQuery(function($){
    $('.wpcf7-email').attr('pattern', '^[0-9a-zA-Z]+[\w-]+@[\w\.-]+\.\w{2,}$');
});

ContactForm7が生成する入力欄には、種類に応じたclass名が付きます。メールアドレスの場合はwpcf7-emailが付くことが決まっているので、$('.wpcf7-email')と記述するとメールアドレスのinputタグにアクセスできます。

attr()はjQueryのメソッドで、該当のタグに任意の属性を設定できる関数です。ここでの目的はpattern属性を追加することによる入力制限なので、第一パラメータにpatternを指定します。第二パラメータは前述の正規表現で、暗号のように見えますが、きちんと読み解けばメールアドレスの形式を表しています。

参考記事：
jQuery リファレンス：attr