![](https://www.kamecompass.com/wp-content/uploads/2024/01/0-2.png)
「お問い合わせフォームはどうやって作るの?」
「お問い合わせフォームの設置場所は?」
「お問い合わせフォームが表示されない、どうして?」
この記事では、そんな方に向けて、Cocoonでお問い合わせフォームの作り方と表示されない場合の対処法を解説します。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
こんにちは、かめコンパスです!
お問い合わせフォームは、
- プラグイン「Contact Form 7」
を使えば、“誰でもかんたんに”作成できます。
ブログ始めたての頃の私でも、スムーズに作成できました。
どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください!
また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。
![](https://www.kamecompass.com/wp-content/uploads/2024/04/a98b1120712ae2558c294773114e59b3-2.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2024/04/a98b1120712ae2558c294773114e59b3-2.jpg)
さっそく本題に入りましょう。
当ブログ愛用のWordPressテーマ
\もっと早く乗り換えればよかった…/
使い心地バツグン、高機能でオシャレ!
Cocoonお問い合わせフォームはプラグインで作成する
![](https://www.kamecompass.com/wp-content/uploads/2024/01/1-5.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/01/1-5.png)
まず、Cocoonでお問い合わせフォームを作成するために
- Contact Form 7というプラグインをインストールし、
- 設定していきます。
それぞれの手順を詳しく解説します。
Contact Form 7をインストールする
プラグイン「Contact Form 7」をインストールする方法は、下記の通りです。
WordPress管理画面で、プラグイン⇒新規プラグインを追加の順にクリックする
![「プラグイン」、「新規プラグインを追加」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/1-1-1-1.png)
![「プラグイン」、「新規プラグインを追加」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/1-1-1-1.png)
検索窓に「Contact Form 7」と入力する
![検索窓に「Contact Form 7」と入力している様子](https://www.kamecompass.com/wp-content/uploads/2024/01/1-1-3.png)
![検索窓に「Contact Form 7」と入力している様子](https://www.kamecompass.com/wp-content/uploads/2024/01/1-1-3.png)
今すぐインストールをクリックする
![「今すぐインストール」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/1-1-2.png)
![「今すぐインストール」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/1-1-2.png)
Contact Form 7のインストール完了!
Contact Form 7の設定をする
次にContact Form 7の設定をしていきます。
有効化をクリックする
![「有効化」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/1-2-1.png)
![「有効化」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/1-2-1.png)
お問い合わせ⇒新規追加の順にクリックする
![「お問い合わせ」、「新規追加」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/1-2-2.png)
![「お問い合わせ」、「新規追加」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/1-2-2.png)
タイトルを入力し、保存をクリックする
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
タイトルは「お問い合わせ」でOK
![タイトルを入力している様子と、「保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/1-2-3.png)
![タイトルを入力している様子と、「保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/1-2-3.png)
Contact Form 7の設定完了!
Cocoonお問い合わせフォームは固定ページで作成する
![](https://www.kamecompass.com/wp-content/uploads/2024/01/2-5.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/01/2-5.png)
先ほどインストールしたプラグイン「Contact Form 7」でお問い合わせフォームを設定し終えたら、
Cocoonのお問い合わせフォームを固定ページで公開する作業に移ります。
先ほどのContact Form 7の設定画面にあるショートコードをコピーする
![Contact Form 7の設定画面にあるショートコードをコピーしている様子](https://www.kamecompass.com/wp-content/uploads/2024/01/2-1-1.png)
![Contact Form 7の設定画面にあるショートコードをコピーしている様子](https://www.kamecompass.com/wp-content/uploads/2024/01/2-1-1.png)
固定ページ⇒新規固定ページを追加の順にクリックする
![「固定ページ」、「新規固定ページを追加」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-2.png)
![「固定ページ」、「新規固定ページを追加」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-2.png)
- タイトルを入力する
- 先ほどコピーしたショートコードを貼り付ける
- 公開をクリックする
![タイトルとショートコード入力している様子と、「公開」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-3.png)
![タイトルとショートコード入力している様子と、「公開」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-3.png)
公開をクリックする
![「公開」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-4.png)
![「公開」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-4.png)
お問い合わせフォームを固定ページで作成完了!
Cocoonお問い合わせフォームを設置する場所
![](https://www.kamecompass.com/wp-content/uploads/2024/01/3-3.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/01/3-3.png)
最後に、Cocoonでお問い合わせフォームを設置していきます。
お問い合わせフォームを設置する場所は、主に
- ヘッダー
- フッター
の2ヵ所です。
![ヘッダーの場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-1-3.png)
![ヘッダーの場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-1-3.png)
![フッターの場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-1-4.png)
![フッターの場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-1-4.png)
WordPress管理画面のサイドパネルにある外観⇒メニューの順にクリックし、
![「外観」、「メニュー」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-1-1-1.png)
![「外観」、「メニュー」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-1-1-1.png)
表示されたメニュー画面で、お問い合わせフォームを設置する場所を決めます。
![お問い合わせフォームを設置する場所を決める場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-1-2.png)
![お問い合わせフォームを設置する場所を決める場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-1-2.png)
ヘッダー・フッターに設置する方法を詳しく解説します。
ヘッダーに設置する
お問い合わせフォームをヘッダーに設置する方法は、下記の通りです。
- メニュー名を入力する
- 「ヘッダーメニュー」と「ヘッダーモバイルボタン」に✔を入れる
- メニューを作成をクリックする
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
メニュー名は「ヘッダー」でOK
![メニュー名を入力、「ヘッダーメニュー」と「ヘッダーモバイルボタン」に☑を入れている様子と、「メニューを作成」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-2-1.png)
![メニュー名を入力、「ヘッダーメニュー」と「ヘッダーモバイルボタン」に☑を入れている様子と、「メニューを作成」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-2-1.png)
- 固定ページ欄にある「お問い合わせ」に✔を入れる
- メニューに追加をクリックする
- メニューを保存をクリックする
![「お問い合わせ」に☑を入れている様子と、「メニューに追加」、「メニューを保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-2-2.png)
![「お問い合わせ」に☑を入れている様子と、「メニューに追加」、「メニューを保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-2-2.png)
お問い合わせフォームをヘッダーに設置完了!
フッターに設置する
お問い合わせフォームをフッターに設置する方法は、下記の通りです。
- メニュー名を入力する
- 「フッターメニュー」と「フッターモバイルボタン」に✔を入れる
- メニューを作成をクリックする
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
メニュー名は「フッター」でOK
![メニュー名を入力、「フッターメニュー」と「フッターモバイルボタン」に☑を入れている様子と、「メニューを作成」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-3-1.png)
![メニュー名を入力、「フッターメニュー」と「フッターモバイルボタン」に☑を入れている様子と、「メニューを作成」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-3-1.png)
- 固定ページ欄にある「お問い合わせ」に✔を入れる
- メニューに追加をクリックする
- メニューを保存をクリックする
![「お問い合わせ」に☑を入れている様子と、「メニューに追加」、「メニューを保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-3-2.png)
![「お問い合わせ」に☑を入れている様子と、「メニューに追加」、「メニューを保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-3-2.png)
お問い合わせフォームをフッターに設置完了!
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
自分のブログにお問い合わせフォームが設置されているか確認しよう!
Cocoonでお問い合わせフォームが表示されない原因と対処法
お問い合わせフォームが表示されない原因は、下記4つが考えられます。
それぞれの対処法を詳しく解説します。
固定ページを公開していない
投稿ページと同じように、固定ページに挿入したお問い合わせフォームを下書きで保存したままだと、表示されないです。
固定ページが公開されているか確認しましょう。
固定ページの右上が
- 更新になっている場合:公開済み
- 公開になっている場合:未公開
になります。
![更新ボタンが表示されている様子](https://www.kamecompass.com/wp-content/uploads/2024/01/4-1-1.png)
![更新ボタンが表示されている様子](https://www.kamecompass.com/wp-content/uploads/2024/01/4-1-1.png)
![公開ボタンが表示されている様子](https://www.kamecompass.com/wp-content/uploads/2024/01/4-1-2.png)
![公開ボタンが表示されている様子](https://www.kamecompass.com/wp-content/uploads/2024/01/4-1-2.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
未公開だった場合は、公開を押してね!
フッターやヘッダーに設置していない
投稿ページは、公開ボタンを押すと自分のブログに表示されますが、
固定ページは、公開ボタンを押した後、フッターやヘッダーなどに設置しないと表示されないです。
固定ページを公開しただけの場合は、お問い合わせフォームをヘッダーやフッターに設置する設定をしましょう。
プラグインを有効化していない
プラグイン「Contact Form 7」をインストールしただけになっていないでしょうか?
Contact Form 7を有効化させないと、お問い合わせフォームが表示されないです。
Contact Form 7が有効になっているか、下記の手順で確認しましょう。
WordPress管理画面のサイドパネルにあるプラグイン⇒インストール済みプラグインの順にクリックし、
![「プラグイン」、「インストール済みプラグイン」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/4-2-1.png)
![「プラグイン」、「インストール済みプラグイン」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/4-2-1.png)
Contact Form 7の文字の下が
- 設定|無効化の場合⇒有効化済み
- 有効化|削除の場合⇒有効化されていない
になります。
![設定|無効化が表示されている様子](https://www.kamecompass.com/wp-content/uploads/2024/01/4-2-2.png)
![設定|無効化が表示されている様子](https://www.kamecompass.com/wp-content/uploads/2024/01/4-2-2.png)
![有効化|削除が表示されている様子](https://www.kamecompass.com/wp-content/uploads/2024/01/4-2-3.png)
![有効化|削除が表示されている様子](https://www.kamecompass.com/wp-content/uploads/2024/01/4-2-3.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
有効化されていなければ、有効化を押してね!
最新のバージョンになっていない
Contact Form 7が最新のバージョンに更新されているか確認していきます。
WordPress管理画面のサイドパネルにある更新をクリックし、
プラグインの欄に「プラグインはすべて最新版です。」と表示があれば、最新のバージョンになっています。
![「更新」がある場所と、「プラグインはすべて最新版です。」が表示されている様子](https://www.kamecompass.com/wp-content/uploads/2024/01/4-3-1.png)
![「更新」がある場所と、「プラグインはすべて最新版です。」が表示されている様子](https://www.kamecompass.com/wp-content/uploads/2024/01/4-3-1.png)
ブログをしばらく放置していれば、Contact Form 7が最新のバージョンではなく、お問い合わせフォームが表示されなくなっている可能性もあります。
最新のバージョンでなければ、更新しましょう。
お問い合わせフォームが機能するか確認する
お問い合わせフォームに入力したメッセージが届くかどうか、確認します。
![お問い合わせフォームに項目を入力し、送信を押すまでの手順](https://www.kamecompass.com/wp-content/uploads/2024/01/5-1.png)
![お問い合わせフォームに項目を入力し、送信を押すまでの手順](https://www.kamecompass.com/wp-content/uploads/2024/01/5-1.png)
- お問い合わせフォームを開く
- 氏名・メールアドレス・題名・メッセージ本文を入力する
- 送信をクリックする
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
メッセージが届いているか確認してね!
まとめ:お問い合わせフォームでユーザーとの接点を持とう
今回は、Cocoonでお問い合わせフォームの作り方と表示されない場合の対処法を紹介しました。
当ブログでは、Cocoonに関する記事をいくつか書いてます。
下のカテゴリーページにまとめていますので、のぞいてみてください。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
ためになったという人は“コメント”してくれると嬉しいです!
コメント