みんな大好き『Contact Form 7』をカスタマイズして最大限に便利に使い倒すためのTips

言わずとしれた超有名プラグイン『Contact Form 7』は、初心者でも簡単にウェブサイトに問い合わせフォームを設置できるスグレモノですが、カスタマイズすることでより便利に利用できるようになります。

この記事では、『Contact Form 7』のポテンシャルを最大化するための Tips をまとめています。

不要な JS や CSS の読み込みを制御する

『Contact Form 7』はその仕様上、フォームを設置しているページ以外にも jQuery と CSS を読み込んでしまうようです。
フォームを多用しているサイトであればさほど問題ではないかもしれません。

ですが、例えば 100ページあるブログで、問い合わせページ1ページのみしかフォームを使っていないサイトであれば、残りの99ページで無駄な jQueryとCSS を読み込む形となってしまいます。

これではサイトを高速化するうえでネックとなりますので、以下の手順で必要なページでだけフォームが動作するようにカスタマイズします。
手順としては以下の通り。

Step1. 一旦『Contact Form 7』の jQueryとCSS の読み込みをすべて停止する

以下のコードを functions.php に記載することで、『Contact Form 7』が吐き出す jQueryとCSS を無効化することができます。

//Contact Form 7 jQueryとCSS読み込み停止 - - - - - - - - - - - - - - - - - - - - */
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

Step.2 必要なページだけ読み込みを行う

つづいて以下のコードを footer.php に記載することで『Contact Form 7』が生成するコードを読み込みます。
一旦すべてリセットして、必要なページでだけ呼び出す形ですね。

<?php if( is_page(array('contact')) ): // コンタクトフォームの読み込み ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ?>
<?php
    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) { wpcf7_enqueue_scripts(); }
    if ( function_exists( 'wpcf7_enqueue_styles' ) ) { wpcf7_enqueue_styles(); }
?>
<?php endif; ?>

ただし、上記のコードは問い合わせフォームのページスラッグが contact である場合を想定した条件分岐です。

例えば問い合わせページのURLが https://sample.com/toiawase/ である場合は contact を toiawase に置き換えてください。

自前で作るフォーム用のCSSも読み込み制御する

フォームのデザインを成形するためのスタイルシートは意外と冗長になりがちです。
こちらも不要なページで読み込む理由はありませんので、 style.css とは別にCSSファイルを作成してフォームページだけで読み込むようにします。

ファイル名は style-form.css で style.css と同じ階層のディレクトリに格納します。
こちらもページスラッグが contact である場合を想定した条件分岐です。

<?php if( is_page(array('contact')) ): // コンタクトフォーム用CSSの読み込み ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style-form.css" type="text/css" />
<?php endif; ?>

問い合わせが完了したらサンクスページにリダイレクトさせる

『Contact Form 7』のプラグイン作者様は、問い合わせ完了後に別のサンクスページにリダイレクト遷移させることは無意味であると仰っています。（それも結構disり気味に）

僕も自分が利用するサイトであれば不要だと感じますが、実際にサイトを運営して問い合わせを頂く側に立つと、意外とウェブ慣れしていない方が多く存在することに気付きます。

例えば、

問い合わせ内容が正しく送信されているか不安
いつ返事が来るのか知りたい
問い合わせしたものの今後の流れがわからない
携帯キャリアメールを記載したのでメールが来ない・添付ファイルが見れない

こういったことはサイトに記載していても、お客様は忙しいので細かい部分まではよく目を通してくれません。

そこでサンクスページを別途作成しておき、そこに上記のような頻繁に頂く質問内容を記載しておけば、こちらとしても不要な手間が省ける。
そういった意味合いで活用できます。

前置きが長くなりましたが、問い合わせ完了後にサンクスページへリダイレクトさせる場合は、 footer.php に下記のコードを記載します。

こちらもスラッグ contact のページで thanks に遷移する場合の記載例です。

<?php if( is_page(array('contact')) ): // コンタクトフォーム送信後に別ページへ遷移 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = '<?php bloginfo('url'); ?>/thanks/';
}, false );
</script>
<?php endif; ?>

問い合わせ内容を table表形式で受け取る

シンプルに氏名・メールアドレス・本文のみの問い合わせフォームであればさほど必要ではないと思いますが、見積書を作成するといった場合などは以下のようにすると業務効率化につながります。

問い合わせ内容を table表形式で受け取る
VLOOKUP関数を組んだエクセルの見積書ファイルに表をコピペ
PDF作成のマクロボタンを押下

これで問い合わせメールを確認してから、見積書を発行するまでの時間はわずか10秒程度です。

問い合わせ内容を何かとゴニョゴニョするのであれば、tableで表組みした HTML形式のメールで受け取るとエクセルとの親和性が高く便利です。

『Contact Form 7』のメール設定タブに以下のコードを記載します。
ただし、メール設定タブの HTML 形式のメールを使用する にチェックを入れることを忘れずに。

レイアウトやデザインをカスタマイズする場合は、インラインCSSで記述を行います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-2022-jp">
</head>
<body bgcolor="#fff" style="margin: 20px;">
<table border="1" cellpadding="10" cellspacing="0" align="left" style="margin: 20px;">
  <tr>
    <th style="background: #eee;">お名前</th>
    <td>[your-name]</td>
  </tr>
  <tr>
    <th style="background: #eee;">メールアドレス：</th>
    <td>[your-email]</td>
  </tr>
  <tr>
    <th style="background: #eee;">本文</th>
    <td>[your-message]</td>
  </tr>
</table>
</body>
</html>

プラグインなしで迷惑メールを撃退する

コードを functions.php に記述して迷惑なスパムメールを防止するカスタマイズです。
詳細は下記のページに記載しています。

『Contact Form 7』の迷惑スパムメールをプラグインなしで撃退する

ワードプレスサイトで問い合わせフォーム機能を実装するために『Contact Form 7』を使うケースは多いと思いますが、迷惑なスパムメールに悩まされることもしばしば。プラグイン『Akismet』を導入して対策する方法もありますが...

意外と知らない『Contact Form 7』の便利タグ

テキストボックスやラジオボタンなど、『Contact Form 7』で使用するタグはある程度決まってくると思いますが、実はひっそりと以下のようなタグも用意されています。
活用の仕方によっては、より便利なお問い合わせフォームを構築できるのではないでしょうか。

コンタクトフォームが設置されているページの URL を取得

問い合わせメールを見て、一旦フォームを設置した自サイトの該当ページを見たいときに便利そうです。

[_url]

不正な入力のあった入力項目の数を取得

もしかするとあなたが作ったフォームは、じつはユーザーにとっては使いにくいフォームであるかもしれません。
頻繁にエラーが起こる箇所は改善する必要がありそうです。

[_invalid_fields]

シリアルナンバーを取得

個々の問い合わせにシリアルナンバーを振ることができます。
見積書などの発行時に使えそうです。
ただし、『Contact Form 7』との連携プラグイン『Flamingo』のバージョン 1.5以上がインストールされている必要があります。

[_serial_number]

なお、『Flamingo』は、問い合わせ内容の情報を蓄積することができるプラグインです。
アナリティクスで調べることができるものもありますが、以下のようなタグを使用すると、問い合わせ一覧から手軽に分析を行いたい時に活用できそうです。

投稿の ID を取得

[_post_id]

投稿の名前(スラッグ)を取得

[_post_name]

投稿のタイトルを取得

[_post_title]

投稿のパーマリンク URL を取得

[_post_url]

送信の日付を取得

[_date]

送信の時刻を取得

[_time]

送信者のユーザーエージェント(ブラウザ)情報を取得

[_user_agent]

その他の特別なタグは以下のページに掲載されています。

特別なメールタグ | Contact Form 7