本サイト内のコンテンツはNORILOGが独自に制作しています。メーカー等から商品提供を受けることもありますが、その場合は記事内に明記しております。コンテンツの内容や評価に関するランキングの決定には一切関与していません。メーカー等の指示による表示部分にはPRを表記します。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。詳しくはサイト運営ポリシーをご覧ください。
今回はWordPressには欠かすことができないお問い合わせフォームについて解説します。
WordPressを使ってシンプルなお問い合わせフォームを設置したいけど、設置方法や使い方がいまいちわからない方の悩みを解決します。
A子さん
NORI
WordPressのお問い合わせ専用プラグイン「Contact Form 7」を使うことで、お問い合わせフォームの設置や、お問い合わせ時の自動返信メールなどのカスタマイズをすることができるようになります。
Apple製品の他、カメラやドローンが好きです。趣味で2021年から登山やキャンプもはじめました。国交省全国包括許可承認取得済 三陸特/アマ無線4級/DJI CAMPスペシャリストを取得。運営者の詳しい情報はこちら
Contact Form 7とは
Contact form 7 はWordPress（ワードプレス）にお問い合わせページを設置する場合に、非常に手軽に導入・設置ができる便利なお問い合わせフォームに特化したプラグインです。
Contact Form 7を利用するメリット
通常お問い合わせフォームを設置する場合はいろいろな知識が必要になってしまうのですが、このContact Form 7（コンタクトフォーム セブン）を使うことで専門的な知識のない方でも簡単にお問い合わせページを作ることができます。
個人的に何年もいろいろな形でこのプラグインをインストールしてカスタマイズしていますが、セキュリティー（スパム防止等）設定を含め、とても便利なプラグインでWordPressに絶対入れおくべきプラグインのベスト5に間違いなく入るプラグインです。
Contact Form 7のインストール方法
プラグインの追加のキーワードで「Contact Form 7 」を検索
プラグインのインストール方法
Contact Form 7をインストールするには以下の記事を参考に、インストールして有効化しましょう。
【初心者でも安心】WordPress プラグインのインストール方法を動画で解説
コピペで作れるお問い合わせフォームの完成デザイン
先にお伝えしておきたいのが、今回この記事のソースコードをコピペして作れるお問い合わせフォームの完成形デザインです。
CSSとお問い合わせフォームのソースコードをコピーするだけで、このブログのお問い合わせフォームと同じ以下のお問い合わせフォームデザインを手に入れることができます。
お問い合わせフォームの作成
Contact Form 7を有効化したら、WordPressのダッシュボード内にある「お問い合わせ」から「新規追加」で新しいフォームを作成します。
フォーム名は自分がわかりやすい名前をつけてもらって構いません。今回紹介してる例では、フォーム名をそのまま「お問い合わせフォーム」という名前にしています。
フォーム内に設置するソースコード
上の動画のように、以下のソースコードをコピーして全部貼り付けたあとに「保存」ボタンを押します。
CSSが適用されてない状態のお問い合わせフォーム
上記ソースコードをお問い合わせフォームに設定した状態のお問い合わせフォームです。これではデザインがイケてないのでお問い合わせフォームとしてはNGです。
それでは次にフォームのデザインの部分となる、CSSをコピペします。
Contact Form 7のCSSの設定
お問い合わせフォームにソースコードを貼り付け終わったら、今度はフォームのデザイン（見た目）を整えるためのCSSのデザインが必要となります。自分の子テーマなどのCSSに以下のソースコードを追記します。
Contact Form 7のCSSソースコード
以下のソースコードをご自身のWordPressのCSSへ追記します。
これでお問い合わせフォームのデザインは完了です。
お問い合わせフォームの公開
お問い合わせフォームを設置した際にできた以下のショートコードをチェックします。
このショートコードをお問い合わせフォームを設置したいページ（固定ページ等）に貼り付けて公開します。
お問い合わせフォームの動作確認
お問い合わせフォームに設置したコピペコード（お問い合わせ項目）を「メッセージ本文」にもあわせて入れてあげなければ、設置したお問い合わせ内容を管理者側で受信（確認）することができないので注意しましょう。
コピペした以下の問い合わせ項目を「メッセージ本文」に必ず入力してください。設置したお問い合わせ内容を管理者側で受信（確認）することができなくなってしまうので注意しましょう。設置後必ず動作チェックをすることをおすすめします。
管理者側へ送られるメッセージ内容設定
こちらは上記の画像の部分にコピペして保存します。お問い合わせフォームを設置した側に送られるメール文面です。
以下はサンプルですが内容はご自身のサイトに合わせて自由に書き換えてもらっても構いません。括弧で囲まれたショートコード部分を削除してしまうと、その内容がメールで受信できなくなるので注意してください。
ご依頼された方： [your-name] <[your-email]>
--------
名前：[your-name]
メールアドレス：[your-email]
電話番号：[your-tel]
お問い合わせ内容： [contact-menu]
お問い合わせ内容詳細：
[your-message]お問い合わせした側へ送られるメッセージ内容設定
お問い合わせされた側へ自動返信メールを送りたい場合には、メール (2) を使用にチェックを入れて以下のソースコードをコピペして保存しましょう。
以下はサンプルですが内容はご自身のサイトに合わせて自由に書き換えてもらっても構いません。括弧で囲まれたショートコード部分を削除してしまうと、その内容がメールで受信できなくなるので注意してください。
※このメールはシステムからの自動返信です
[your-name] 様
お世話になっております。
●●へのお問い合わせありがとうございました。
以下の内容でお問い合わせを受け付けいたしました。
2営業日以内に、担当者よりご連絡いたしますので
今しばらくお待ちくださいませ。
--------お問い合わせ内容--------
名前：[your-name]
メールアドレス：[your-email]
電話番号：[your-tel]
お問い合わせ内容： [contact-menu]
お問い合わせ内容詳細：
[your-message]
------------------------------設置したお問い合わせフォームのデザインチェック
以下のようなデザインになりましたか？上のソースコードをコピーしても同じようにならない場合には一度コピーしたソースコードを見直してみましょう。
このサイトはreCAPTCHAによって保護されています… の文言部分は以下のスパムメール排除でGoogle reCAPTCHA v3を導入する際に記述した文章なので、ご自身のサイトで「お問い合わせのスパムメール」対応の必要がなければこの文言は削除してください。
お問い合わせフォームへのスパムメール排除方法
お問い合わせフォーム（Contact Form 7）を設置すると、必ずといっていいほど英文メールなどのスパムメールが届きます。
それを避けたい場合にはこちらの記事を参考に対策を取ることをおすすめします。
コピペでカスタマイズできるContact Form 7のデザインまとめ
本記事は、ソースコードのコピペで簡単に美しいデザインのお問い合わせフォームが手に入れられるお問い合わせフォーム（Contact Form 7）についての解説記事です。
お問い合わせフォームはサイトを作る上では割と重要な部分でもあるので、自分のサイトにあったお問い合わせフォームのカスタマイズをしてみてくださいね！
以上、NORI（@norilog4）でした。
