この記事では「Web制作でContact Form 7を使う上で遭遇するほぼ全てのパターン」を解説します。
- 自作フォームにContact Form 7を埋め込む
- 自動返信メールなどの設定
- 送信完了画面
- 確認画面（記事下部に別記事リンク掲載）
- スパム対策のreCAPTCHA導入（記事下部に別記事リンク掲載）
イメージとして、この記事を起点にContact Form 7に関する様々な情報を解説している感じです。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
Contact Form 7とはそもそも何なのか
Contact Form 7とは、WordPressで作成したホームページに問い合わせフォームを設置するためのプラグインです。
私が知る限り、Web制作でのWordPressではダントツで一番よく使われるプラグインで、制作人生の中で、触らない月は存在しなかったと思います。
- 確認画面
- 送信完了画面への遷移
- reCHAPCHAでスパム対策
もう一つのお問い合わせプラグイン、「MW WP Form」もWeb制作界隈では有名で、このサイトでもかなり解説しています。
しかし、今後クローズされる予定らしく、今後はより一層Contact Form 7に制作会社なども流れてくると思います。
前提：Contact Form 7が出力するコードを先回り
この記事ではWeb制作でContact Form 7を使用することを前提としているので、まずはデザインカンプからフォームをHTMLでコーディングしていきます。
今回は以下の雛形を用意しました。
<div class="Form">
<!-- 会社名input -->
<div class="Form-Item">
<p class="Form-Item-Label">
<span class="Form-Item-Label-Required">必須</span>会社名
</p>
<span class="wpcf7-form-control-wrap text-xxx">
<input type="text" name="conpany_name" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="例）株式会社令和">
</span>
</div>
<!-- 名前input -->
<div class="Form-Item">
<p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>氏名</p>
<span class="wpcf7-form-control-wrap text-xxx">
<input type="text" name="your_name" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="例）山田太郎">
</span>
</div>
<!-- 電話番号input -->
<div class="Form-Item">
<p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>電話番号</p>
<span class="wpcf7-form-control-wrap tel-xxx">
<input type="tel" name="tel" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" placeholder="例）000-0000-0000">
</span>
</div>
<!-- メールアドレスinput -->
<div class="Form-Item">
<p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>メールアドレス</p>
<span class="wpcf7-form-control-wrap email-xxx">
<input type="email" name="email" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" aria-invalid="false" placeholder="例）example@gmail.com">
</span>
</div>
<!-- ラジオボタン -->
<div class="Form-Item">
<p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>ラジオボタン</p>
<span class="wpcf7-form-control-wrap radio-xxx">
<span class="wpcf7-form-control wpcf7-radio">
<span class="wpcf7-list-item first">
<input type="radio" name="radio-xxx" value="選択技1" checked="checked">
<span class="wpcf7-list-item-label">選択技1</span>
</span>
<span class="wpcf7-list-item">
<input type="radio" name="radio-xxx" value="選択技2">
<span class="wpcf7-list-item-label">選択技2</span>
</span>
<span class="wpcf7-list-item last">
<input type="radio" name="radio-xxx" value="選択技3">
<span class="wpcf7-list-item-label">選択技3</span>
</span>
</span>
</span>
</div>
<!-- チェックボックス -->
<div class="Form-Item">
<p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>チェックボックス</p>
<span class="wpcf7-form-control-wrap checkbox-xxx">
<span class="wpcf7-form-control wpcf7-checkbox">
<span class="wpcf7-list-item first">
<input type="checkbox" name="checkbox-xxx[]" value="選択技1">
<span class="wpcf7-list-item-label">選択技1</span>
</span>
<span class="wpcf7-list-item">
<input type="checkbox" name="checkbox-xxx[]" value="選択技2">
<span class="wpcf7-list-item-label">選択技2</span>
</span>
<span class="wpcf7-list-item last">
<input type="checkbox" name="checkbox-xxx[]" value="選択技3">
<span class="wpcf7-list-item-label">選択技3</span>
</span>
</span>
</span>
</div>
<div class="Form-Item">
<p class="Form-Item-Label isMsg"><span class="Form-Item-Label-Required">必須</span>お問い合わせ内容</p>
<span class="wpcf7-form-control-wrap textarea-xxx">
<textarea name="textarea-xxx" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea>
</span>
</div>
<div class="button-wrap">
<input type="submit" value="送信" class="wpcf7-form-control wpcf7-submit">
<span class="ajax-loader"></span>
</div>
</div>慣れていないと、この後HTMLタグをContact Form7のものに置き換える段階で、HTML構造が崩れてしまいやすいです。
「最初からContact Form 7と同じ構造のフォームを作っておく」のが非常に大事になってきます。
以下がContact Form 7が出力するHTMLタグになります。これを使ってフォームは構築しましょう。
クラス名などはプラグインが自動出力しています。
独自のクラス名を与えていても、この後オプションでつけられるので問題ないです。
不安なら以下構造をそのまま使ってもいいです。
テキスト
<span class="wpcf7-form-control-wrap text-xxx">
<input type="text" name="text-xxx" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false">
</span>
<span class="wpcf7-form-control-wrap email-xxx">
<input type="email" name="email-xxx" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" aria-invalid="false">
</span>電話番号
<span class="wpcf7-form-control-wrap tel-xxx">
<input type="tel" name="tel-xxx" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false">
</span>ラジオボタン
ラジオボタンとチェックボックスはそれぞれの選択肢がlavelで囲まれていても大丈夫です。
<span class="wpcf7-form-control-wrap radio-xxx">
<span class="wpcf7-form-control wpcf7-radio">
<span class="wpcf7-list-item first">
<input type="radio" name="radio-xxx" value="選択技1" checked="checked">
<span class="wpcf7-list-item-label">選択技1</span>
</span>
<span class="wpcf7-list-item">
<input type="radio" name="radio-xxx" value="選択技2">
<span class="wpcf7-list-item-label">選択技2</span>
</span>
<span class="wpcf7-list-item last">
<input type="radio" name="radio-xxx" value="選択技3">
<span class="wpcf7-list-item-label">選択技3</span>
</span>
</span>
</span>チェックボックス
<span class="wpcf7-form-control-wrap checkbox-xxx">
<span class="wpcf7-form-control wpcf7-checkbox">
<span class="wpcf7-list-item first">
<input type="checkbox" name="checkbox-xxx[]" value="選択技1">
<span class="wpcf7-list-item-label">選択技1</span>
</span>
<span class="wpcf7-list-item">
<input type="checkbox" name="checkbox-xxx[]" value="選択技2">
<span class="wpcf7-list-item-label">選択技2</span>
</span>
<span class="wpcf7-list-item last">
<input type="checkbox" name="checkbox-xxx[]" value="選択技3">
<span class="wpcf7-list-item-label">選択技3</span>
</span>
</span>
</span>テキストエリア
<span class="wpcf7-form-control-wrap">
<textarea name="textarea-xxx" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea>
</span>送信ボタン
Contact Form 7にはinput type=”submit”の送信ボタンしかないので、こちらを用いるようにお願いします。
<input type="submit" value="送信" class="wpcf7-form-control wpcf7-submit">
<span class="ajax-loader"></span>
ここまででContact Form 7の構造に準拠したフォームがコーディングできたと思うので、いよいよプラグインを導入します！！
Contact Form 7の基本的な使い方
❶フォームを固定ページに表示させてみる
まずはプラグインをインストールし、有効化します。
その後、「お問い合わせ→コンタクトフォーム」をクリック。
すると、既にコンタクトフォームの雛形がありますが、使わないので消します。
その後、自分のフォーム部分のHTMLコードをコピペし、「保存」します。
この時にformタグを入れないようにご注意下さい。
そしたら、ショートコードをコピーしておきましょう。この後フォームを表示させるのに使います。
「固定ページ→新規追加」をクリック。
「お問い合わせ」などと見出しをつけて、コンテンツ入稿欄では「ショートコードブロック」を挿入します。
/と入力して検索すれば、ショートコードブロックが出てくるはずです。
その後、先程のショートコードをコピペします。
右上に視点を移して、「下書き保存」をします。
その後、「URL」をcontactとして、「公開」をクリック。
補足：もしテンプレートファイルにコード直書きの場合
以下のコードをかけば、テンプレートファイルでもショートコードを実行可能です。
<?php echo do_shortcode( '//ここにショートコード' ); ?>自分のサイトURL/contactを見て、問題なくお問い合わせフォームが再現できていることを確認してください。
補足：勝手にbrやpタグが挿入されている場合の消し方
たまに勝手に改行されていることがあります。
コードを見ると、見知らぬbrやpタグが…
これらはfunctions.phpに以下の記述をすれば良いです。
// Contact Form 7で自動挿入されるPタグ、brタグを削除
add_filter('wpcf7_autop_or_not', 'wpcf7_autop_return_false');
function wpcf7_autop_return_false() {
return false;
} 
❷入力欄をContact Form 7のものに置き換える
ここからは入力欄をContact Form 7のものに順次置き換えます。
まずは以下の簡単なinput type=”text”を置き換えてみましょう。
<input type="text" placeholder="例）株式会社令和">まずは、タグを挿入する部分に空行を入れて、任意のタグを選択します。
その後、項目を設定します。
| 必須項目 | 入力必須にする場合はチェック |
| 名前 | name属性の値、必ず設定する |
| デフォルト値 | placeholderや最初から入力されている状態にする場合はチェック |
| ID,クラス属性 | 自前のタグにclass,idをつけていた場合はここに書くと反映される |
「タグを挿入」を押すと、以下のようなタグが挿入されます。
[text conpany_name placeholder "例）株式会社令和"]このタグが仕事をしますので、自分の該当部分のコードは消しましょう。
これを全パーツ分行っていくことになります！！
補足：ラジオボタンとチェックボックスの場合
この２つは少し特殊です。
「オプション」の入力欄は、選択肢を一つずつ改行して入力するようにします。
また、「個々の項目をlabel要素で囲む」は、今回は外していますが、自分の事前のHTMLコードによっては、必要になるかもしれません。
チェックボックスもラジオボタンと大きく変わりません。
ラジオボタンやチェックボックスは置き換えのコード量が増えるので、挿入されたタグがどこを置き換えるのかよく確認して、元コードを消すようにしましょう。
全ての置き換えが完了して、表示に問題ないことを確認したら、次に行きます。
確認画面はデフォルトでは無いので、独自に実装が必要です。
以下の記事にまとめました。
❸メール設定を行う
管理者向けメール設定
ここからフォームとして機能させるために、メール設定を行います。
サイトの所有者向けのメール。クライアントワークだとしたら、クライアントに「お問い合わせ内容」を知らせるメール設定。
まずは「メール」をクリックします。
その後、下記項目を設定します。
| 送信先 | 管理者のメールアドレス（デフォルトだとWordPressに登録されているもの） |
| 送信元 | ここから自分に送信される、デフォルトでOK |
| 題名 | メールの題名 |
| 追加ヘッダー | 返信用、メールアドレスタグに使用したname属性の値を使用する |
| メッセージ本文 | 管理者宛に届くメール文。大抵は各項目のname属性を入れることが多い。 |
先程設定したタグのname属性の値です。これを埋め込むことで、フォームで入力された名前やメールアドレス、内容を取得し埋め込むことができます。つまり人によって表示は違います。
ちなみに、送信先をデフォルトのままにすると、WordPressの「設定→一般」から見れる管理者メールアドレスのメールアドレスが適用されます。
自動返信メール設定
自動返信メールがあったほうが「自分のメールが無事送信されたことがわかって安心しやすすい’」というメリットがあるので、大体設定することが多いです。
まずは「メール(2)を使用」にチェックを入れます。
設定する項目は、大体管理者向けと変わりません。
自動返信なので、「送信先」は送信者のメールアドレス(name属性で指定)するようにしましょう。
自動返信メールはお客さん向けなので、できるだけ丁寧で分かりやすいといいですね。
❹メールの送信テスト
最後に送信テストを行って、ちゃんと動作しているか確認していきます。
サーバーにアップしていないとフォームは送信されないので、ご注意下さい。
フォームに入力して…
無事送信されると、画面遷移はせずにAJAXでそのまま下に送信成功メッセージが出て来ます。
少し立つと、メールが来ました。これは管理者宛のメールです。
こちらは自動返信メールです。
お客さんに納品する前に、お客さん自身のメールアドレスでテストして問題ないことを確認しておきましょう。
Contact Form 7でメールが届かなかった場合
プラグインの設定に問題ないのであれば、サーバーに原因がある可能性があります。
その場合、まず以下記事を参考にSMTPの利用も検討してください。
Contact Form 7に送信完了画面（サンクスページ）をつける
デフォルトではそのまま入力画面からAJAX送信されてしまうのですが、カスタマイズすることで、Contact Form 7にも送信完了画面（サンクスページ）を簡単につけることが可能です。
サンクスページのアクセス数は、つまりお問い合わせ完了数を表します。
Google AnalyticsでサンクスページのPV数を見ることによって、お問い合わせ完了数の計測ができます。
よって、お問い合わせ→サンクスページまでの離脱率の計算ができれば、フォーム改善施策もできるはずです。
まずは送信完了の固定ページを作成します。
URLはthanksとしました。
ここからJSかPHPかで２つの方法に分かれます。
方法❶JavaScriptを用いる場合
フォーム最下部にスクリプトを置きます。
location = ‘ここに完了ページのURLを記入’;ということになりますので、location = ‘http://example.com/’;の部分は、ご自身の完了画面URLに書き換えてください。
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://example.com/';
}, false );
</script>方法❷functions.phpに記述する場合
functions.phpに以下をコピペして、location = ‘{$homeUrl}/thanks/’;は完了ページがthanksで無ければそこだけ変えて下さい。
add_action('wp_footer', 'redirect_to_thanks_page');
function redirect_to_thanks_page() {
$homeUrl = home_url();
echo <<< EOD
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = '{$homeUrl}/thanks/';
}, false );
</script>
EOD;
}$homeUrlは自分のサイトのトップページURLを取ってきてくれるので、ドメインが変わっても動作し続けてくれますね。
送信テストをする
フォーム送信をすると、無事送信完了サンクスページに飛んだことを確認できました。
送信完了メッセージを消したい場合
完了画面に飛ばすのであれば、完了メッセージを出す必要はありませんね。
その場合、以下のCSSコードで消すことが可能です。
.wpcf7 form.sent .wpcf7-response-output {
display: none;
}Contact Form 7に確認画面をつける方法
こちらも同様の理由で確認画面はデフォルトではないのと、追加のコードやプラグインが必要になり、多少面倒です。
プラグインを使って確認画面を実装する方法
お手軽に確認画面が欲しい人のためには、以下記事で「Contact Form 7 Multi-Step Forms」を使った実装を解説しています。
ただし、長文やファイル添付が不可能なので、実用性はあまり高くありません。
プラグインを使わずに確認画面を実装する方法（おすすめ）
こちらはJavaScriptを書くので難しいですが、制限なくCF7に確認画面とサンクスページを追加できます。
これをマスターできると、ほぼどんな確認画面・サンクスページの実装もこなせるようになります。
Contact Form 7のスパム対策はreCAPTCHAで！
Contact Form 7はデフォルトのままだと割りとスパムメールが来ますので、設置でreCAPTCHAも設定しておくといいですね。
Contact Form 7のよくある質問
Contact Form7で承認確認はどうやってする？
[acceptance]タグを使用します。フォームに「[acceptance your-consent]同意します[/acceptance]」と追加し、「その他の設定」に「acceptance_as_validation: on」を記述します。
Contact Form 7はスパムになる？
なる可能性があります。対策としてreCAPTCHA (v3)の導入が効果的です。プラグイン「CAPTCHA 4WP」を使用する方法もあります。
Contactform7の自動返信メールの設定方法は？
管理画面の「メール」タブで「メール（2）を使用」にチェックを入れ、題名と本文を設定します。送信先は[your-email]のままで、内容は親切で丁寧な文面にします。
Contact Form 7で確認画面の作り方は？
プラグインを使う場合は、「Contact Form 7 Multi-Step Forms」を使用します。確認ページとサンクスページを作成し、フォームに確認ボタンを追加、確認用フォームを別途作成します。
ただしプラグインを使わない確認画面も実装可能です。コードが書ける方はこちらをおすすめします。
Contact Form 7はWordPress案件で一番使う
Contact Form 7はWeb制作実案件で頻繁に使うことになるプラグインです。
私が出している「コーディング演習課題」でも、WordPress上級課題では「お問い合わせフォームプラグイン」の使用を入れているので、そこでも練習していただけます。
是非、Contact Form 7を使いこなしていきましょう！！
超実践編では納期厳守の模擬案件を経験し、スキル面以外にコミュニケーションも徹底レビューを受けることができます。
最近は実案件のノウハウも多いですが、「納期が短い案件の中で、丁寧なコミュニケーションを本当に実践できますか？」
この課題では、極限まで実案件に近い状況で、発注者である私とコミュニケーションを取りながら、
- 見積書提出
- 実装→初稿提出
- レビュー→修正
- 再修正→納品
- 請求書
この流れを実践していただき、最後にzoomであなたに全体レビューを行います。
- 学習はだいたい終わったけど、納期までに納品できるか不安
- 中々継続と紹介で案件が回らない
このような中級者を飛躍させる超実践編、受講には条件がありますので、詳細はリンク先よりご確認下さい。
あなたの挑戦を待っています！！
＼レビューを受けて圧倒的な自信を身につける！／
ご寄付を頂けると今後の更新の励みになります！
