Contact Form 7で確認画面・完了画面・サンクスメール付きお問い合わせフォーム作成手順

プラグイン

2020.04.10

企業様のホームページ案件ではほぼお問い合わせフォームを付けることになりますが、毎回どうだったけ?と思い出しながらやってしまうので、お決まりの手順を書いておきます。
Contact Form 7を使ったお問い合わせフォームに確認画面、完了画面、サンクスメールを付けていきます。
他にも、データベースにためてcsv出力とか、条件分岐でフォームを出し分けるとかありますが、とりあえず基本形を。
CSSはサイトによって変わってくるでしょうから、省きます。
Contact Form 7の説明と言うより、やることリストみたいな感じなのでContact Form 7を使い慣れていない方には少し不親切な内容かもしれませんので、ご注意ください。
記事作成当時のWordPressのバージョンは5.4

お問い合わせフォーム作成に必要なプラグイン

  • Contact Form 7(バージョン 5.1.7)
    フォームプラグイン
  • Contact Form 7 add confirm(バージョン 5.1)
    Contact Form 7に確認画面を付けるプラグイン

お問い合わせフォーム作成に必須ではないが、あったら便利なプラグイン

  • WP Mail SMTP
    localhostでメールの送信テストまでやりたい場合
  • Contact Form 7 Conditional Fields
    selectなどの選択内容によって処理を分岐させたい場合
  • Contact Form DB
    受信したお問い合わせ内容をデータ保存したい場合

Contact Form 7 の設定

Contact Form 7の一覧にはデフォルトで下のように「コンタクトフォーム1」というフォームのサンプルがあるので、これを使っていきましょう。
「コンタクトフォーム1」の編集をクリックして、コンタクトフォームの編集画面に行きます。
そしてまずタイトルを「お問い合わせ」に変更して、入力フォームの作成などを行っていきます。

入力フォームの作成

コンタクトフォームの編集画面のフォームタブで行う作業です。
下は一般的なフォームの内容で、あくまで雛形です。
htmlのタグやclass名などは適当につけていますので、適宜書き換えてください。

 

通知メール&サンクスメール本文の作成

コンタクトフォームの編集画面のメールタブで行う作業です。

運営者宛て通知メール

まずは運営者宛てメールの設定です。
自分の環境に合わせて設定していきます。

メール本文以外の設定項目
送信先:運営者メールアドレス
送信元:[your-name] <[your-email]>
題名:お問い合わせがありました(自動配信メール)
追加ヘッダー:Reply-To: [your-email] 「空のメールタグを含む行を出力から除外する」にチェックする
メール本文

あくまで雛形ですので、用途に合わせて書き換えてください。

 

お客様宛てサンクスメール

「メール (2) を使用」にチェックすると、もう1パターンのメール設定を行うことができるようになります。
これをお客様宛てのサンクスメールの設定として使用します。

メール本文以外の設定項目
「メール (2) を使用」にチェックする
送信先:[your-email] 送信元:株式会社○○ <運営者メールアドレス>
題名:お問い合わせ内容のご確認(自動配信メール)
追加ヘッダー:Reply-To: 運営者メールアドレス
「空のメールタグを含む行を出力から除外する」にチェックする
メール本文

これもあくまで雛形ですので、用途に合わせて書き換えてください。

 

固定ページの作成

お問い合わせフォームのページと送信完了ページを固定ページで作成していきます。
ここも雛形を書いてますので、用途に合わせて書き換えてください。

お問い合わせフォームを表示するページの作成

ページタイトル:お問い合わせ
ページスラッグ:contact

11行目のショートコードを自分が作成したフォームのショートコードに置き換えてください。
ショートコードはContact Form 7 の設定画面の方で確認できます。

送信完了ページの作成

ページタイトル:お問い合わせの送信が完了しました
ページスラッグ:contact-complete

8行目のhttps://fixcode.jpというショートコードは、以下のページで紹介したサイトのURLを表示するショートコードです。

仕事で使えるWordPressショートコード集

送信完了画面の表示

フォーム送信後に完了画面を表示するためのJavaScriptです。
footer.phpに書いてください。

もしこのコードをfooter.phpではなくjsファイルに書く場合は8行目のphpコードをサイトのURLに書き換えて、<script></script>タグも消してください。

最後に

フォーム系のプラグインはクラッカーに狙われやすいです。
常に最新版のプラグインにアップデートするようにしてください。
SSLも付けたほうが良いです。というか付けるべきです。
「フォームを付けるなら、セキュリティが~」と言えばクライアントも納得してくれることが多いと思います。
行く行くはMW WP Formを使ったもっと高機能なフォームの作成方法もご紹介したいと思っています。