WORDPRESS | Contact Form 7  バリデーションを導入する

      2017/10/07

みなさんこんにちはALEXです。EFOキャンペーンもいよいよ後半戦です。合計7件の記事を執筆しました。

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact form 7にマイクロコピー挿入

 

今回はバリデーションの導入についてご説明します。バリデーションとは、フォーム入力の場合、フォームに入力した内容が妥当かということを検証する、ということです。以前の記事で、

Contact Form7 メールアドレスの再入力チェック

がありますが、これもバリデーションです。入力時にバリデーション表示を出して、入力時の誤りに気付いていただく、という心遣いです。

 

contact Form 7 のデフォルトのバリデーション

Contact Form7にもバリデーション機能があります。編集画面ー「メッセージ」が該当します。以下にデフォルトを表示します。

 

21種類の項目がデフォルトで導入されています。この他に、ご利用状況に応じてバリデーションを追加したいところです。今回は、氏名のフリガナチェックを行います。

 

氏名のフリガナをチェックする

氏名にフリガナを入力していただく場合、フリガナに全角カナが入力されているかチェックします。

フォーム側に氏名(フリガナ)を追加します。タグは以下の通りとします。

 

また、入力された文字が全角カタカナであるかを確認するためのスクリプトをfunciton.phpに記述します。

 

画面を確認しましょう。

ふりがなをひらがなにして送信します。

メッセージが表示されました。

 

まとめ

Contact Form7のデフォルトのバリデーション機能以外にも、function.phpにタグを記述することでオリジナルのバリデーションを追加することができます。

ありがとうございました。

 

Contact Form 7でEFO

Contact Form7 メールアドレスの再入力チェック

Contact Form7 のレイアウトを改良する

Contact Form7 Googleアナリティクスの目標に設定する

Contact Form7 の確認画面を追加する

Contact Form 7 でメール送信ができない(1)

Contact Form7 バリデーションを導入する

Contact form 7にマイクロコピー挿入

Contact Form 7 郵便番号から住所を自動入力する

 - ワードプレス