企業様のホームページ案件ではほぼお問い合わせフォームを付けることになりますが、毎回どうだったけ？と思い出しながらやってしまうので、お決まりの手順を書いておきます。
Contact Form 7を使ったお問い合わせフォームに確認画面、完了画面、サンクスメールを付けていきます。
他にも、データベースにためてcsv出力とか、条件分岐でフォームを出し分けるとかありますが、とりあえず基本形を。
CSSはサイトによって変わってくるでしょうから、省きます。
Contact Form 7の説明と言うより、やることリストみたいな感じなのでContact Form 7を使い慣れていない方には少し不親切な内容かもしれませんので、ご注意ください。
記事作成当時のWordPressのバージョンは5.4
※Contact Form 7 add confirmは現在更新が止まっていて、Contact Form 7の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名などは適当につけていますので、適宜書き換えてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <div class="info-wrapper"> <div class="info-box contact-kind-area"> <h5>お問い合わせ種別<span class="attention required">必須</span></h5> <div class="input-box"> [select* your-contact-kind include_blank "製品に関するお問合せ" "採用に関するお問合せ" "その他"] </div> </div> <div class="info-box contact-name-area"> <h5>お名前<span class="attention required">必須</span></h5> <div class="input-box"> [text* your-name] </div> </div> <div class="info-box contact-name-kana-area"> <h5>ふりがな<span class="attention required">必須</span></h5> <div class="input-box"> [text* your-name-kana] </div> </div> <div class="info-box email-area"> <h5>E-mail<span class="attention required">必須</span></h5> <div class="input-box"> [email* your-email] </div> </div> <div class="info-box telno-area"> <h5>電話番号<span class="attention">任意</span></h5> <div class="input-box"> [tel your-telno] </div> </div> <div class="info-box message-area"> <h5>お問い合わせ内容<span class="attention required">必須</span></h5> <div class="input-box"> [textarea* your-message] </div> </div> </div> <div class="caution-area"> <p class="small caution">docomo、au、softbankなど各キャリアメールをご利用の方は、迷惑メールフィルタの影響で確認メールが正しく届かないことがございます。以下のアドレスを受信できるように設定をお願いいたします。</p> <p class="small caution">mail@email</p> </div> <div class="form-button"> <p class="button-wrapper">[confirm class:button "確認画面へ"]</p> <p class="button-wrapper">[back class:button "戻って修正する"]</p> <p class="button-wrapper">[submit class:button "お問い合わせを送信"]</p> </div> |
通知メール＆サンクスメール本文の作成
コンタクトフォームの編集画面のメールタブで行う作業です。
運営者宛て通知メール
まずは運営者宛てメールの設定です。
自分の環境に合わせて設定していきます。
送信元：[your-name] <[your-email]>
題名：お問い合わせがありました（自動配信メール）
追加ヘッダー：Reply-To: [your-email] 「空のメールタグを含む行を出力から除外する」にチェックする
メール本文
あくまで雛形ですので、用途に合わせて書き換えてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 以下のお問い合わせがありました。 受付日時：[_date] [_time] ************************************************ ■お客様情報 ************************************************ お名前 ：[your-name] 様 ふりがな：[your-name-kana] 様 E-mail ：[your-email] 電話番号：[your-telno] ************************************************ ■お問い合わせ種別・内容 ************************************************ ・お問い合わせ種別 [your-contact-kind] ・お問い合わせ内容 [your-message] |
お客様宛てサンクスメール
「メール (2) を使用」にチェックすると、もう1パターンのメール設定を行うことができるようになります。
これをお客様宛てのサンクスメールの設定として使用します。
送信先：[your-email] 送信元：株式会社○○ <運営者メールアドレス>
題名：お問い合わせ内容のご確認（自動配信メール）
追加ヘッダー：Reply-To: 運営者メールアドレス
「空のメールタグを含む行を出力から除外する」にチェックする
メール本文
これもあくまで雛形ですので、用途に合わせて書き換えてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | [your-name] 様 ---------------------------------------------------------------------- 本メールはシステムから自動送信されています。 ---------------------------------------------------------------------- お問い合わせありがとうございます。 以下の内容にてお問い合わせを承りましたので、ご確認ください。 受付日時：[_date] [_time] ************************************************ ■お客様情報 ************************************************ お名前 ：[your-name] 様 ふりがな：[your-name-kana] 様 E-mail ：[your-email] 電話番号：[your-telno] ************************************************ ■お問い合わせ種別・内容 ************************************************ ・お問い合わせ種別 [your-contact-kind] ・お問い合わせ内容 [your-message] ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー このメールはご入力いただいたメールアドレス宛に送信しています。 本メールに覚えがない場合、 大変お手数ですが破棄してくださいますようお願い申し上げます。 /////////////////////////////////////////////////////////////////// 株式会社〇〇 〒000-0000 東京都○○○○○○○ TEL：03-0000-0000 |
固定ページの作成
お問い合わせフォームのページと送信完了ページを固定ページで作成していきます。
ここも雛形を書いてますので、用途に合わせて書き換えてください。
お問い合わせフォームを表示するページの作成
ページタイトル：お問い合わせ
ページスラッグ：contact
1 2 3 4 5 6 7 8 9 10 11 12 | <section id="contact-form"> <div class="section_header"> <div class="contact-form-lead"> <p>お気軽にお問い合わせください。</p> </div> </div> <div class="section_main"> <div class="section_inner"> [contact-form-7 id="ここにフォームのID" title="お問い合わせ"] </div> </div> </section> |
11行目のショートコードを自分が作成したフォームのショートコードに置き換えてください。
ショートコードはContact Form 7 の設定画面の方で確認できます。
送信完了ページの作成
ページタイトル：お問い合わせの送信が完了しました
ページスラッグ：contact-complete
1 2 3 4 5 6 7 8 9 | <section id="contact-complete"> <div class="contact-complete-lead"> <p>お問い合わせ内容の送信が完了しました。</p> <p>ありがとうございました。</p> </div> <div class="link"> <a class="button" href="[url]">トップページに戻る</a> </div> </section> |
8行目のhttps://fixcode.jpというショートコードは、以下のページで紹介したサイトのURLを表示するショートコードです。
送信完了画面の表示
フォーム送信後に完了画面を表示するためのJavaScriptです。
footer.phpに書いてください。
1 2 3 4 5 6 7 8 9 10 | <script> $(window).on('load',function(){ /*--------------------------------------------------------- 完了画面の出力（footer.phpに書くこと） ----------------------------------------------------------*/ document.addEventListener( 'wpcf7mailsent', function( event ) { location = "<?php echo home_url(); ?>/contact-complete/"; }, false ); }); </script> |
もしこのコードをfooter.phpではなくjsファイルに書く場合は8行目のphpコードをサイトのURLに書き換えて、<script></script>タグも消してください。
最後に
フォーム系のプラグインはクラッカーに狙われやすいです。
常に最新版のプラグインにアップデートするようにしてください。
SSLも付けたほうが良いです。というか付けるべきです。
「フォームを付けるなら、セキュリティが～」と言えばクライアントも納得してくれることが多いと思います。
行く行くはMW WP Formを使ったもっと高機能なフォームの作成方法もご紹介したいと思っています。
確認画面（Contact Form 7 add confirm）が動作しない場合の対処方法
CF7 add confirmは現在更新が止まっていて、CF7の5.4以降では動作しなくなっているようです。
ネットで調べたところ軽微なコード修正で動くようになりましたので、紹介します。
修正するファイル（1つ）
contact-form-7-add-confirm/includes/js/scripts.js
※パスはWordPressのプラグインフォルダからのパス
修正コード（3箇所）
80行目に以下を追加
1 2 3 4 | // 確認ボタン挙動 parent.find(".wpcf7c-btn-confirm").on("click", function() { responseOutput.css("display", ""); }); |
223、226行目は変数の置き換え
1 2 3 4 5 6 7 8 9 10 | ・223行目（最終的に228行目となる） wpcf7c_step1(event.detail.id); ↓ wpcf7c_step1(event.detail.unitTag); ・226行目（最終的に231行目となる） wpcf7c_step2(event.detail.id); ↓ wpcf7c_step2(event.detail.unitTag); |
scripts.jsの修正差分（diff）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 81a82,86 > // 確認ボタン挙動 > parent.find(".wpcf7c-btn-confirm").on("click", function() { > responseOutput.css("display", ""); > }); > 223c228 < wpcf7c_step1(event.detail.id); --- > wpcf7c_step1(event.detail.unitTag); 226c231 < wpcf7c_step2(event.detail.id); --- > wpcf7c_step2(event.detail.unitTag); |
