【2024年5月版】Contact Form 7の設定方法と使い方を初心者にもわかりやすく解説する

2024年5月26日更新：操作手順画像を最新の物にしました

サイト・ブログにお問い合わせフォームを設置する際に便利なのが、「Contact Form 7」というプラグインです

お問い合わせフォームを設定しておけば、サイトを訪れた人が気軽にお問い合わせできるようになります

この記事ではそんな「Contact Form 7」の設置方法から便利な使い方まで、初心者にもわかりやすく説明してきます

ヒトデ君

画像付きで、詳しく解説していくよ〜っ

動画もあるのでもしよかったら参考にしてください▼

「Contact Form 7」とは？

「Contact Form 7」とは、WordPressサイトに簡単にお問い合わせフォームを設定できるプラグインです

設定しておくと

上記のようなお問い合わせフォームを、とても簡単にサイト内に作成することができます

ヒトデ君

これから「Contact Form 7」の設定方法とお問い合わせフォームの作成方法を詳しく解説していくよ〜!!

「Contact Form 7」のインストール方法と有効化手順

まずはWordPressの管理画面にログインします

「プラグイン」 → 「新規追加」

とクリックします

右上の検索窓に「Contact Form 7」と入力すると、検索結果が表示されます

「Contact Form 7」の「今すぐインストール」をクリックして、プラグインをインストールします

インストールが完了すると、「有効化」ボタンがクリックできるようになります

ボタンをクリックして、「Contact Form 7」を有効化します

ヒトデ君

有効化しただけではまだお問い合わせフォームは設置されないよ！

次の章で設定方法を説明していくねっ

「Contact Form 7」のお問い合わせフォーム設置手順

お問い合わせフォームの設置手順を簡単に説明すると

こんな感じです

ヒトデ君

それぞれ画像付きで詳しく解説していくね〜

手順１：コンタクトフォームを作成する

まずは左メニューの

「お問い合わせ」 → 「新規追加」

とクリックしていき、コンタクトフォームを新しく作成します

タイトルに「お問い合わせ」などわかりやすい名前を入力します

その後、他の設定は変更せずに下にスクロールし、「保存」をクリックします

すると上記のようにショートコードが生成されるので、この部分をコピーしておきます

手順2：固定ページでお問い合わせページを作成する

次に問い合わせフォームを表示場所となる固定ページを新規作成します

左メニューで

「固定ページ」 → 「新規固定ページ追加」

とクリックしていきます

ここで

で設置方法が少々異なるので、それぞれ解説していきます

ブロックエディタによるお問い合わせフォームの設置方法

タイトルに「お問い合わせ」と入力し、「+」をクリックします

そして、「全てを表示」をクリックすると

このように左にメニュー一覧が表示されます

その中でショートコードを見つけ、クリックします

ショートコードの設置画面になるので、この部分に先ほどコピーしたショートコードを貼り付けます

その後「公開」をクリックします

右上に上記のような確認画面が表示される場合があるので、「公開」をクリックして公開を完了させます

クラシックエディタによるお問い合わせフォームの設置方法

クラシックエディタの場合もほぼ一緒です

固定ページのタイトルに「お問い合わせ」と入力します

その後本文の部分に先ほどコピーしたショートコードを貼り付けます

最後に「公開」ボタンをクリックして、投稿します

さて、このままではユーザーがお問い合わせページにたどり着くのが難しい状態です

次の章で、メニューバーにお問い合わせページのリンクを設置する方法を解説していきます

手順3：WordPressメニューを作成し、サイトに表示させる

左メニューから

「外観」 → 「メニュー」

とクリックしていきます

メニューが見当たらないという方へ

WordPressのテーマによっては、「外観」の中に「メニュー」が表示されない場合があります

WordPressnoデフォルトのテーマを使用している方は、無料テーマ「Cocoon」をテーマに設定してから、メニューの設定をしましょう

ヒトデ君

「Cocoon」の設定方法は、下記記事で説明しているよt

あわせて読みたい

Cocoonを使って、ブログを30分で「それっぽい」デザインにする手順を紹介

メニューの設定画面が表示されたら、自分でわかりやすいメニュー名を入力します

その後、表示したい位置にチェックを入れ、「メニューを作成」をクリックします

ヒトデ君

「メニュー名」はサイトには表示されないよっ

自分でわかりやすい名前をつけようっ

固定ページの中から先ほど作成した「お問い合わせ」にチェックを入れ、「メニューに追加」をクリックします

すると上記のように、メニューの中に「お問い合わせ」が追加されます。

最後に「メニューを保存」をクリックします。

するとトップページに上記のような感じでお問い合わせのリンクが表示されます。

このリンクをクリックすると

上記のように、お問い合わせページを開くことができます

これでお問い合わせフォームの設置は完了です

ヒトデ君

次の章からは、より便利に使い方法を解説していくよっ

「Contact Form 7」をより便利に使う方法

よりお問い合わせフォームとしての利便性を向上するために

を解説していきます

自動返信メールを設定してユーザビリティを向上する

デフォルトのコンタクトフォームの状態だと

自分自身へお問い合わせがあったことをお知らせするお知らせメールが届く設定になっています

しかし、お問い合わせしてきた人への自動返信メールは設定されておりません

そこで、この章では

「お問い合わせしてきた人への自動返信メールの設定方法」

について解説していきます

左メニューで

「お問い合わせ」 → 「コンタクトフォーム」

とクリックします

お問い合わせ用に作成した、コンタクトフォームの「編集」をクリックします。

メールをクリックし、下にスクロールし

「メール（２）を使用」にチェックします

すると上記のように自動返信用の入力画面が表示されます

このまま保存しても、お問い合わせをしてくれた方に自動返信メールが届きます

しかし文面が少しわかりづらいので、「題名」と「メッセージ本文」の編集がおすすめです

例えば、題名のオレンジの枠で囲った部分に

と入力し、メッセージ本文の[yout-message]の下に

と入力すると、自動返信メールとして相手にもわかりやすいでしょう

迷惑メール対策!!「reCAPCHA」を設定してお問い合わせフォームのセキュリティをあげる

「Contact Form 7」をこのまま使用すると、迷惑メールが高頻度で届く場合があります

そこで、「reCAPCHA」を設定しておくと、迷惑メールの量を減らすことができます

これからその設定方法を解説していきます

ヒトデ君

reCAPCHAの設定にはGoogleのメールが必要だよ！

ない人はメールアドレスを作成しておこうっ

→Gmailの作成はこちら

まずはreCAPCHAの公式ページにアクセスします

→reCAPCHAの公式ページはこちら

サイト上部の「v3 Admin console」をクリックします

Gmailのメールアドレスを入力し、「次へ」をクリックします。

その後、パスワードを入力し、「次へ」をクリックします

すると、reCAPCHAのサイト登録画面に遷移します

ラベルに自分が識別できるわかりやすい名前を入力し、「スコアベース(v3)」を選択します

ドメイン欄には「Contact Form 7」を設置したサイトのドメインを「〇〇〇.com」と言う形で入力します

ヒトデ君

最初の「https://」の部分やドメイン最後の「/」は必要ないよっ

最後に「reCAPCHA 利用規約に同意する」にチェックを入れ、「送信」をクリックします

すると、「サイトキー」と「シークレットキー」が表示されるので、こちらをコピーしておきます

WordPressの管理画面の左メニューで

「お問い合わせ」 → 「インテグレーション」

とクリックします

「インテグレーションのセットアップ」をクリックすると

「サイトキー」と「シークレットキー」の入力画面になるので、そこに先ほどコピーしたキーをそれぞれ入力します

最後に「変更を保存」をクリックすると「reCAPCHA」の設定が完了です

まとめ：お問い合わせフォームを設定してサイトの利便性を向上しよう!!

お問い合わせフォームを設定しておくと、サイトを訪れた人があなたにコンタクトを取ることができるようになります

設置しておくだけで、企業から、お仕事のお問い合わせが来ることもあります

機会損失にならないように、お問い合わせフォームは必ず設定しておきましょう！

他のワードプレスおすすめプラグインはこちらの記事をどうぞ▼

あわせて読みたい

【ワードプレス】おすすめプラグインを8つ紹介！ブログ運営をもっと便利に！