【2022年版】Contact Form 7とプラグインできっちり作る問合せフォーム
いよいよ雪も消えて暖かくなってきていまして、農作業がスタートしています。当初予定で書きたかったことをまとめる時間がないので、ちょっと別な話題、最近ようやく解決した「お問い合わせフォーム」の制作方法を今後のためにまとめてみたいと思います。
WordPressで作ったサイトでお問い合わせフォームを設置する場合「Contact Form 7」か「MW WP Form」といういずれかのプラグインを使う方が多いと思います。
「Contact Form 7」の方がダウンロード数が多く利用している方が多いようです。基本機能では「MW WP Form」の方が充実しているような気もするのですが、使ってみた印象としては「Contact Form 7」の方がとっつきやすいので人気なんだと思います。
今回は「Contact Form 7」と不足する機能を補うプラグインを使いながらお問い合わせフォームを作る方法について説明します。
（１）Contact Form 7プラグインの追加
色々なページで基本的なことは説明されているので私は省略します。自分のWordpressの管理ページでプラグイン→新規追加と進み「プラグインの検索」で「Contact Form 7」と入力すると富士山マークのプラグインが表示されますのでインストールし有効化します。
ダッシュボードに「お問い合わせ」というメニューが追加されます。
（２）必要なプラグインの追加
「Contact Form 7」だけで基本的なお問い合わせフォームは作成できるのですが、そのままだと色々機能的に不足しているんですね。そこで以下の３つのプラグインを必要に応じてインストールし有効化します。
ａ）Confirm Plus Contact Form 7
問合せフォームに入力した項目を送信前に確認する画面を表示させるプラグインです。
Contact Form 7は「入力項目の確認画面」がないので「送信」ボタンを押すとすぐに内容が送信されてしまいます。入力項目のチェック機能はついていますが入力ミスを確認するクッションページがないのでメールアドレスの入力間違えなど気が付きにくいと思います。
そこでこのプラグインによって確認ページを生成し入力内容を確認していただいてから送信することで入力ミスを防ぎます。
ｂ）Redirection for Contact Form 7
問合せ送信後に「送信完了画面」などを表示させるためのプラグインです。
Contact Form 7はフォーム送信後、そのフォームページの下に「送信されました」というメッセージ（任意の文章に編集可能）が表示されるだけなので一瞬入力した内容が送信されたのか分かりにくい印象です。
このプラグインは送信処理が完了した後指定したページへ自動的にジャンプさせるなどの機能を追加するもので、あらかじめ用意した「送信完了しました」ページへジャンプさせることができます。
ｃ）Contact Form CFDB7
問合せデータをサーバに蓄積し閲覧したり、ＣＳＶなどのデータとしてダウンロードすることができるプラグインです。
Contact Form 7はフォーム入力項目は指定したアドレスへ指定した形式でメールを送信するものですが入力されたデータ自体は蓄積されません。
例えばイベントの申込み受付など一定数のデータを短期間で受け付けたものをExcelなどで加工する場合、メールのデータから作成するのは大変です。
このプラグインを使用すればCSVで一括ダウンロード可能なので二次利用などが容易にできますし、メールを消去した場合などにもサーバのデータを削除しない限り対応可能です。
（３）Contact Form 7の入力で気を付けたいこと
WordPressのメニューに追加された「お問い合わせ」から「新規追加」をクリックするとデフォルトでメールドアレスや名前などが設定された状態の画面が開きます。
編集ウインドウ上部に電話番号やチェックボックスなどを追加するボタンがありますので、必要な項目を追加してください。
見た目のカスタマイズなど詳細の設定方法は、検索するとそのままコピペ可能なサンプルがたくさんありますので「Contact Form 7 カスタマイズ」などで検索してみてください。
意外と情報が薄いのが「メール」設定です。
これは入力されたデータをメールとして送信するための重要な設定です。
重要なのが「メールは２つ設定」することです。
ひとつは自身への通知用で、もうひとつは送信者への「確認メール」です。
まず自分あての通知メールを設定します。
「送信先」は通知を受け取りたいメールアドレスを入力します。
「送信元」はメールの差出元の情報です。私は自分のメールアドレスを入れていますが、サイトのドメインと異なるドメインのメール（Gmailなど）を指定した場合エラーアラートが出ます。
しかしこのエラーは動作には影響がないので無視しています。
「題名」は「お問い合わせ通知」など自分が分かりやすいものにすればよいと思います。
「メッセージ本文」も同様にご自身の見やすいものでよいでしょう。
通知メールの設定が終わったら、下段の「メール（２）」をチェックして送信者向けの「確認メール」も登録しましょう。
「送信先」は [your-email]になります。
「送信元」は自分のメールアドレスを設定します。先ほど触れた通りサイトのドメインと異なる場合はエラーが出ますが動作に問題はありません（ただしメールを受信した側で「なりすましの可能性があります」などの警告が出る場合がありますので要注意）
「題名」は私の場合は「お問い合わせありがとうございます【いからし農園｜if-creative】」としています。
「メッセージ本文」も送信者に送られるものなので丁寧な文章になるように気を付けたいものです。参考までこのサイトの設定を画像で紹介します。
（４）機能を拡張するプラグインの注意点
ａ）Confirm Plus Contact Form 7
他で公開されているフォームデザインのHTMLをコピペした場合など少し凝ったHTMLで組まれたフォームの場合、確認画面が正しくテーブルで表示されないことがあります。
画像は私が経験した崩れた画面です。項目名が表示されず、入力内容が一行でつながって表示されています。
プラグイン公式ページでは対処方法がいくつか書いてありますが初心者には少々分かりにくいと思います。
こういった場合、フォームのHTMLソースを以下のように少し修正すれば正しく表示されるようになりました。
項目名を＜label for＝”input nameと同じタグ”＞で囲む
<label for="komoku">項目名</label>
<input name="komoku" type="text">
これ以外の修正方法もあるようですがこれが一番シンプルで分かりやすいかなと思います。
ｂ）Redirection for Contact Form 7
このプラグインは特に難しいことはないと思います。
あらかじめフォーム送信後に表示させたい送信完了画面を固定ページで作成しておいて、Contact Form 7のフォーム入力画面に追加された「Actions」というタブから「Choose Action」で「Redirect」を選択して「Add Action」をクリックします。
「New Action」が追加されるので「Edit」をクリックして編集画面して「Rule Title（適当でOK）」にアクション名を書いて「Select a page」でリダイレクトさせるページを選択するだけです。
WEBで調べると送信完了画面を表示させるためのPHPソース修正がヒットしますが、PHPがよく分からない方にはこちらの方が断然おすすめです。
ｃ）Contact Form CFDB7
フォームで送られてきたデータを蓄積しておきたいとき便利なプラグインですが、現状デフォルトのままだと厄介なことがあります。
「Confirm Plus Contact Form 7」と組み合わせて使用するとデータが重複して登録されてしまうんです。
どうも「確認」ボタンを押した時点で1回データが登録され、「修正」もしくは「送信」すると更にデータが登録されるようです。
Googleなどで検索してみましたがどこにも対処方法が書いていません。
色々調べた結果「Contact Form CFDB7」のソースを一部修正する必要があるようです。
やり方としては、Wordpressダッシュボードの「プラグイン」から「プラグインファイルエディター」を選択。
右上の「編集するプラグインを選択」のドロップダウンリストから「Contact Form CFDB7」を選んで「選択」ボタンをクリックしてソースコードを表示させます。
116行目に“ if ( $submission ) { ”とある部分を
” if ( $submission && $_POST['_wpcf7cp’] ===’status_confirm’ ) { ”と書き換えて保存します。
これで重複登録は解消しますが、プラグイン自体にアップデートがあった場合、上記の修正が上書きされてしまうのでアップデート後に同様の修正が必要になりますのでご注意ください。
以上で私の思う理想的なフォームの機能がすべて実装できました。
色々思い通りに動作しないことがあったので他の方があまり説明していない部分に絞って書いてみました。
多少でもお役に立てればうれしいです。