ワクワクして働くための生産性↗向上Hacks

ワクワクは最強のライフハックなのです。

【保存版】ContactForm7の超カスタマイズ方法まとめ(基本設定~入力補助まで)企業サイト運営者は必見です。

f:id:ganapati55:20170927171128j:plain

どうも!

Ganapatiです。

f:id:ganapati55:20170707142236j:plain

今日も以前運営していたさいとの過去記事から役立つコンテンツを転載します。

画像などが無くなってしまってわかりにくい部分もありますが、それでも参考になるはず。

WordPressのプラグイン「ContactForm7」は世界で最も使用されているプラグインの一つです。お問い合わせフォームという分野においてはNo.1だと思われます。

さて、このContactForm7ですが気軽に使えるというメリットがある一方、カスタマイズすれば有料級の問い合わせフォームに負けない多機能さを発揮することができます。

今回はそんなContactForm7のカスタマイズをまとめてみました。公式HPを見ても良いのですが、ざっくりと理解したいしつつどこまでカスタマイズできるか知りたい人むけの記事です。

問い合わせフォームってお客様との最初の接触になることが多いですので、しっかりと信頼感のあるフォームにしたいですね。

基本的なカスタマイズ

【入力項目と設定のおさらい】

ContactForm7では「タグ」と呼ばれるものを設定することで入力項目を表示させることができます。まずは基本からおさらいします。

◆タグの基本構成を理解しよう!

タグは以下のような構成になっています。それぞれ半角スペースを使用して区切ります。

  • 入力タイプ ⇒ textなど入力フォームの種類
  • ネーム値 ⇒ 入力フォームを特定する値 任意英数字で設定可。欄1とか欄2のように特定する役割
  • オプション ⇒ 入力フォームのカスタマイズ機能
  • classやid ⇒ CSSで編集するなど様々なカスタマイズに使用
  • 表示する文字等 ⇒ チェックボックスなどで使用。基本的に文字列。

取りあえず以下に記載する①~⑧の入力タイプを[ ]で囲むことでそれぞれの入力フォーム(箱のような部分)が表示されます。

そしてname値と呼ばれる任意の英数字を入れることで、同種複数の項目があっても見分けがつくようにします。実際には自動でname値が入りますが、わかりやすくするために自分で編集してもOKです。 また各項目の右側に * をつけることで「必須扱い」にすることができます。

例) [text* name値] 

⇒ テキストという入力タイプに必須設定をし、ネーム値のみの設定。オプション、クラス指定はない。ちなみにネーム値は基本的には自動で決まります。

以下基本項目を紹介しますが、①と⑧さえ知っていればだいたいのフォームは作成できます。

何度か操作してみないと理解しにくいと思いますが、慣れると単純な仕組みであると理解できます。

①テキスト入力欄を作る

文字を入力させる項目。基本的には1行の入力欄が表示されます。

5つの入力タイプ

  • text :文字であれば自由に入力可能。
  • email:メールアドレスを入力可能 @が全角だとエラーになる
  • tel :電話番号やFAX番号が入力可能 半角数字とハイフンを入力できる
  • url :URLを入力。http://を入力しなくとも自動で補正してくれます。全角文字などが入るとエラーになります。
  • textarea :備考・連絡事項などでよく使われる複数行入力可能なテキストエリア。

なお、テキスト項目でよく使うカスタマイズ項目としては

  • 文字数制御(最小文字数/最大文字数)⇒郵便番号などで使用 ○/○
  • id、class指定 ⇒cssでのデザインやjQuery等によるカスタマイズで使用 id:id名
  • water mark ⇒入力事例のボックス内表示 watermark”(表示例)”

があります。これらのオプションは 項目の後に続くname値(任意でOK)の次に記載します。

※設定事例

[TEXT* zip 7/8 class:cf7zipcode watermark” 例)999-9999(必須)”]

⇒7文字から8文字の必須扱いのテキスト入力エリアで、入力事例として「例)999-9999(必須)」が表示される。classとしてcf7zipcodeを指定し「郵便番号」としてしょりできるようにする。

②数値入力欄を作る

なかなか使いこなせない項目。数値入力専用。

2つの入力タイプ

  • number:スピンボックス。細長い数値入力専用の入力欄が表示されます。
  • range:予め設定した上限値・下限値の間で選択できるスライダーが表示されます。

これらの項目は入力させる数値にあらかじめ制限をかけたいときに使います。

任意の値で良いならtextで十分。

カスタマイズオプションとしてはstepなどがあります。stepは入力数値を例えば100毎の差で入力させたい時などに使用します。

③日付入力欄を作る

日程予約などのフォームで使用できる項目です。

入力タイプは1つ。

date:YYYY-MM-DDの形式で入力させる。クリックするとスライダーが表示され選択も可能。和暦不可。

なお、スライダーで選択しやすいように、ある程度上限・下限を設定しておいたほうが良いです。

④選択式の項目を作る

あらかじめ設定した項目から選択させる項目。

入力タイプは3つ。

  • checkbox:箱形の選択ボタン。基本的にはこの項目が無難。
  • radio:丸型の選択ボタン。これを使うと必ず「必須扱い」になるので注意。
  • select:ドロップダウンメニュー。複数選択可能だが使う方はそう思わないかもしれないので注意。

選択項目でよく使用するカスタマイズ項目としては

  • default:(num):数えて〇番目をデフォルト選択化する
  • label_first:クリックする丸や箱よりも先に項目名を表示する
  • use_label_element:推奨。項目部分をクリックしても選択される
  • exclusive:排他処理。択一させたいとき使用。
  • free_text:自由記入項目を最後に表示。「その他( )」といえばわかるかと。

このあたりがあります。オプションを使用するときはname値の右側にそれぞれ入れましょう。

⑤ファイルのアップロードボタンを作る

添付ファイルを送ってもらうときに使用します。タグは file を使用します。必須化もOK。

カスタマイズの項目としては

  • filetypes:アップロードできるファイルの種類を指定します。例)filetypes:gif|png|jpg|jpeg ※縦線でつなげます。
  • limit:ファイルの容量を制限します。kb単位、mb単位で指定すると良いです。ちなみに指定しないとデフォルトとして1MBが設定されます。

のようなものがあります。

注意点としてはメールで受信するための設定もしないとダメなことです。

[name値] をメール設定画面の添付ファイル欄に入力しましょう。

⑥セキュリティ関連項目を表示させる

ボットなどによるスパムを防ぐための項目です。

入力タイプは2つ。

  • captchac captchar:画像などを表示してそれを正しく入力しないと問合せできなくなります。APIの設定が必要なのでちょっと面倒です。
  • quiz:回答が絶対一つの値にしかならないようなクイズを出題するタイプです。

いずれもAkismetプラグインの設定さえしていれば不要かなと個人的には思います。

⑦承諾確認ボックスを作る

承諾しないと問い合わせを送信できなくなる項目。

利用規約や個人情報取り扱いに同意の上送信させるようなときに使用します。

acceptance のタグを使います。

カスタマイズ項目としては

  • invert:チェックボックスを外すと送信できるようになる
  • default:on :デフォルトでチェックされているようになる

があります。

⑧送信ボタンを設置する

当然ですが送信ボタンがないと問合せできません。。。

例)[submit “問合せメールを送信する”]

⇒送信ボタンが表示され、ボタンの中に「問合せメールを送信する」と表示される

だいたい、ここまでの基本情報を理解するだけで、しっかりとしたコンタクトフォームは作れます。CSSでデザインをカスタマイズすれば見栄えも良くなるはず。

ただ、機能的にやや物足りなさがあります。そう思う方はつぎの「中級者向け」をやってみましょう。プラグインによるカスタマイズなので結構簡単です。

中級者向けカスタマイズ

基本的にはプラグインの紹介です。こんなこともできるってことを覚えておけばそれでOKです。使い方はググってください。

⑨入力内容の確認画面を表示させる

「Contact Form 7 add confirm」というプラグインを使用します。

Contact Form 7 add confirm — WordPress プラグイン

有効化するとContactForm7の設定画面の中に、「確認ボタン」「戻って編集ボタン」というタグが表示されます。

それらのタグを送信タグの前に配置してやればOKです。

なお、確認ボタンはCSSでデザインを整えたほうが良いです。また、確認画面に移動しても入力フォームの枠線は消えません。入力内容が編集できなくなって見えるというだけの機能です。

⑩確認メールなどをSMTPで送信し到達率をUPさせる

様々なプラグインがありますが、代表的なものとして「WP Mail SMTP」があります。

WP Mail SMTP by WPForms — WordPress プラグイン

お客様から「メールが届かない」といった連絡が入るようなら設定したほうが良いです。

心配な方は自分のGmailやYahooメールのアドレスを使用してあらかじめテストして届かない、迷惑メールフォルダに入るなどの現象が起きていれば設定しましょう。

SMTPという仕組みに関してはググってください。

⑪受付メールに通し番号付与し管理しやすくする

フォームから送信されたら送られてくるメールに通し番号を付与できればチェック漏れなどを防げます。

「Contact Form 7 Serial Numbers」とうプラグインを使います。

Contact Form 7 Serial Numbers — WordPress プラグイン

有効化し、基本的な設定を完了したら、専用のタグをContactForm7のメール設定の例えばメールタイトル欄に入力しておけば良いです。

ただ、次に紹介する⑫⑬を使うのであれば⑪は不要かもしれません。

⑫問い合わせ内容をCSVでデータベース化しエクスポートできるようにする

顧客情報をエクセルやCRM/SFAシステムで管理している場合、CSVで吐き出したいときもありますよね。

そんな時は「CFDB7」を使います。

Contact Form 7 Database Addon – CFDB7 — WordPress プラグイン

ただし、UTF-8でデータがダウンロードされます。Excelなどで直接使うにはShift-JISに変換が必要なのでご注意を。

また、ちょくちょくデータを消さないと、万が一Wordpressがハックされた時大変です。ご注意を。

⑬ダッシュボードで送信記録を見れるようにする

WordPressから送信されたメールが何らかの原因で届かない可能性もあります。この場合⑫のような対策をしていないと全く分からなくなるわけです。ただ、⑫のプラグインのUIが使いにくい人はContactform7の制作者純正プラグイン「Flamingo」を使うと良いでしょう。

Flamingo — WordPress Plugins

⑭スパム対策強化する

スパム対策をより強化したいときは「HoneyPot」というプラグインがあります。

Contact Form 7 Honeypot — WordPress プラグイン

このプラグインは人の目には見えない入力フィールドを作成し、そこに機械的に入力して送信して来たらスパムと判断して送信できなくさせるというものです。考えましたね!

上級者向けカスタマイズ

サーバーへファイルのアップロードをしたり、ヘッダにコードを挿入したりできる方でないと以下のカスタマイズはほぼできないのでご了承ください。ちなみにclass指定について「?」という人も理解が厳しいです。

実際の操作は簡単ですけどね。

⑮メールアドレスを再入力させ正確性を向上させる

メールアドレスを2度入力させて、正確性をアップするというのは常套手段ですね。

この機能をプラグインなしで設定します。

functions.phpに以下のコードを記載し、確認するための機能を追加します。私は子テーマのfunctions.phpに追記しました。

add_filter( 'wpcf7_validate_email', 'wpcf7_text_validation_filter_extend', 11, 2 );
     add_filter( 'wpcf7_validate_email*', 'wpcf7_text_validation_filter_extend', 11, 2 );
    
    function wpcf7_text_validation_filter_extend( $result, $tag ) {
     global $my_email_confirm;
     $tag = new WPCF7_Shortcode( $tag );
     $name = $tag->name;
     $value = isset( $_POST[$name] )
     ? trim( wp_unslash( strtr( (string) $_POST[$name], "\n", " " ) ) )
     : '';
     if ($name == "<span style="color: #ff0000;">your-email</span>"){
     $my_email_confirm=$value;
     }
     if ($name == "<span style="color: #ff0000;">your-email_confirm</span>" && $my_email_confirm != $value){
     $result->invalidate( $tag,"確認用のメールアドレスが一致していません");
     }
    
    return $result;
     }

上記の事例では、最初のメールアドレス入力箇所のname値がyour-emailで確認用のものがyour-email_confirmとなっている場合です。必要に応じて変更してください。

ですのでContactform7の設定画面では

[email* your-email]

[email* your-email_confirm]

の2つが入っていることになります。 これで完了です。

⑯選択項目を縦並び表示にし見栄えをよくする

例えばチェックボックスが横並びに表示されると見栄えが悪いと思う人もいると思います。

特にスマホ表示の時は縦並びのほうがわかりやすいです。そんなときはCSSで調整します。

※画像無くてすみません・・・。

span.wpcf7-list-item {
     display: block;
     }

wpsf7-list-itemのところを調整したい項目(ラジオボタンとか)に設定したクラスに変更してください。

style.cssに直接書き込めない人はWordpress標準装備の外観カスタマイズ機能を使ってください。

⑰テーブルを使用して項目タイトルを左側に表示させ見栄えを良くする

ContactForm7で項目タイトルは基本的に入力ボックスの上部に表示されます。

企業サイトなどでは左側に表示させることも多いですね。

※画像がなくてすみません・・・。

こんな感じで表示させたいときはテーブルタグを上手に利用します。

説明すると長くなるので以下のサイトを参考にしてください。

tonari-it.com

WordPressの定番メールフォームプラグインContactForm7を、項目と入力フォームを横並びにし、レスポンシブにも対応させるCSSとフォーム作成方法を解説しています。

⑱郵便番号から住所自動入力できるようにする

yubinbango.jsを使います。ajaxzip3というライブラリもあるのですが、古くなっているそうで、その後継としてyubinbangoというライブラリが発表されています。

※参考サイト

qiita.com

目標はこんな感じです。

f:id:ganapati55:20170927170049g:plain

Step1:ヘッダ部分に以下のコードを挿入する。もちろんサーバーに対象ファイルを置いて呼び出しても良いです。

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

Step2:ContactForm7の設定画面の郵便番号および住所入力タグの前に以下のコードを挿入する。

<div class="h-adr">
<span class="p-country-name" style="display:none;">Japan</span>

ちなみにこのJapanの指定がないと動きません。

Step3:郵便番号、住所入力タグをコンタクトフォーム7に設置

■郵便番号(例:1234567 "-"ハイフンなし半角入力)(必須)
[text* zip 7/7 class:<span style="color: #ff0000;">p-postal-code</span>]
■住所(都道府県名より入力。郵便番号を入れると自動入力されます)(必須)
[text* address<span style="color: #ff0000;"> class:p-region class:p-locality class:p-street-address class:p-extended-address</span>]</div>

郵便番号のところにclass:p-postal-code を指定することでライブラリが働きます。

そのうえで、自動入力させたい箇所で class:p-region(都道府県) class:p-locality(市区町村) class:p-street-address(町域) class:p-extended-address(その他住所)をいれます。

住所を細分化してそれぞれ指定しても良いです。実際にどのように動くかは試して自分でみてください。

そして最後にdivタグで閉めましょう。divタグを使用するとその中に入力した郵便番号に関して住所の自動入力が働きます。

複数の住所入力欄がある場合は上記の

を複数コピペするだけで対応します。

ただし、name値は変えておきましょう。送られてきたデータがどの入力項目に該当するかわからなくなりますので。

⑲フリガナの自動入力機能を付ける

住所の他に自動入力させたいと言ったらフリガナです。コピペだと機能しませんが、タイプしていただくとフリガナもタイプどおりに自動入力される方法があります。

ちなみに jquery.autoKana.js を使います。

目標はこんな感じ

f:id:ganapati55:20170927170231g:plain

Step1:jsファイルを入手し、サーバー内に設置

こちらからダウンロードできます。

GitHub - harisenbon/autokana: Library for automatically rendering Furigana for inputted Japanese Text

設置場所は任意ですが、ContactForm7プラグインのフォルダ内が良いかと思います。

そのうえでファイルパスを取得しておきます。http:からのURLでもOK。

Step2:以下のコードをヘッダ内に挿入します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="〇〇〇/jquery.autoKana.js"></script>

〇〇〇部分は設置個所を確認して入力して下さい。

Step3:前述のコードの直下に以下を挿入

<script>
$(document).ready(function(){
$.fn.autoKana('#name1', '#kana1', {katakana:true});
$.fn.autoKana('#name2', '#kana2', {katakana:true});
});
</script>

上記の事例ではContactForm7の設定画面で

漢字入力部分で idを name1 に指定し

フリガナ入力部分で idを kana1 に指定し

フリガナは カタカナ で入力されるようにしています。

4行目にname2と kana2があるのは 他にももう一つ対応させたい漢字入力およびフリガナ入力がある場合を想定しています。1か所のみでしたら4行目は必要ありませんし3か所以上あれば1行ずつ似たように増やせばOKです。

なおkatakana:falseでひらがな入力になります。

Step4:ContactForm7の設定画面でid指定

例えば以下のように入力フォームのテキスト項目にid指定してやれば完成です。

お名前:[text name id:name1]
フリガナ:[text kana id:kana1]</div>

⑲全角カナ・半角カナ指定する

正直全角カナ・半角カナを強制させるのは難しいです。

そこでこんな方法を考えました。

全角カナ指定⇒上記⑱で自動入力させて、「ここ全角カナだってわかるよね?」という雰囲気にする。

半角カナ指定⇒全角カナで入力されたら半角カナに置き換わるようにする。

目標はこんな感じです。

f:id:ganapati55:20170927170341g:plain

一度は全角で表示されるのですが次の入力欄をクリックした瞬間半角になっています。

設定の手順ですが

Step1:全角から半角へ変換されるJavaScriptファイルを設置する。

以下のコードをhankakuhenkan.jsという名前で保存してサーバー内に設置してください。

    // 変換前
     var beforeStr = new Array('ァ','ィ','ゥ','ェ','ォ','ャ','ュ','ョ','ッ','ー','ヴ','ガ','ギ','グ','ゲ','ゴ','ザ','ジ','ズ','ゼ','ゾ','ダ','ヂ','ヅ','デ','ド','バ','ビ','ブ','ベ','ボ','パ','ピ','プ','ペ','ポ','ア','イ','ウ','エ','オ','カ','キ','ク','ケ','コ','サ','シ','ス','セ','ソ','タ','チ','ツ','テ','ト','ナ','ニ','ヌ','ネ','ノ','ハ','ヒ','フ','ヘ','ホ','マ','ミ','ム','メ','モ','ヤ','ユ','ヨ','ラ','リ','ル','レ','ロ','ワ','ヲ','ン');
     // 変換後
     var afterStr = new Array('ァ','ィ','ゥ','ェ','ォ','ャ','ュ','ョ','ッ','ー','ヴ','ガ','ギ','グ','ゲ','ゴ','ザ','ジ','ズ','ゼ','ゾ','ダ','ヂ','ヅ','デ','ド','バ','ビ','ブ','ベ','ボ','パ','ピ','プ','ペ','ポ','ア','イ','ウ','エ','オ','カ','キ','ク','ケ','コ','サ','シ','ス','セ','ソ','タ','チ','ツ','テ','ト','ナ','ニ','ヌ','ネ','ノ','ハ','ヒ','フ','ヘ','ホ','マ','ミ','ム','メ','モ','ヤ','ユ','ヨ','ラ','リ','ル','レ','ロ','ワ','ヲ','ン'); 
     function convertStr(str) {
     var fullStr = str;
     for(var i = 0; i < beforeStr.length; i++) {
     fullStr = fullStr.replace(new RegExp(beforeStr[i], 'g'), afterStr[i]);
     }
     return fullStr;
     }
     $(function() {
     $('.autohanka').on('blur', function() {
     var str = $(this).val();
     $(this).val(convertStr(str));
     });
     });

もちろんですがUTF8で保存してからアップロードしてください。

※逆に半角を全角に変えたいときは変換前と後のArrayの中身を逆にしてください。

Step2:上記jsを読み込むようにヘッダに挿入

 <script src="〇〇〇/hankakuhenkan.js" charset="UTF-8"></script>

※〇〇〇は保管したURLを確かめて入力して下さい。

Step3:ContactForm7の設定で半角カナに変換したいテキスト項目でclass指定する

上記のコードでは”autohanka”というclassに設定されていますので

例えば⑱で全角カナがフリガナとして自動入力されているような場合は次のような設定になります。

[text* name値 id:kana1 class:autohanka]

⑳チェックを入れると表示される入力欄を作る

ニーズがどれだけあるかわからないので参考記事を紹介します。

ngns4.net

㉑エラー表示を入力欄全体を赤くしてわかりやすくする

ContactForm7では送信時のエラーは赤文字の文章で表示します。

これだとエラー箇所がわかりにくいという問題も残ります。

そこでエラー箇所の入力欄そのものをCSSで赤く(ピンクに)表示してしまいます。

    .wpcf7 .wpcf7-not-valid {
     background: #ffb6c1;
     }
     .wpcf7 .wpcf7-validation-errors {
     color: #B94A48;
     background-color: #F2DEDE;
     border: 1px solid #EED3D7;
     }
     .wpcf7 .wpcf7-mail-sent-ok {
     color: #3A87AD;
     background-color: #D9EDF7;
     border: 1px solid #BCE8F1;
     }

こんな感じで上手く調整してください。

以上、ContactForm7のカスタマイズまとめでした!

※再掲載お詫び:掲載当時は画像を多用してわかりやすかったのですが、画像データが吹っ飛んだのでそのまま掲載させていただいております。申し訳ございません。