≫ Amazonの聴く読書~Audible~ 30日無料体験

【初心者可】Cocoonお問い合わせフォーム設置方法|WordPress

Cocoon_お問い合わせフォームを設置する方法WordPress
初心者
初心者

ブログ始めました!「お問い合わせフォーム」を設置したほうがいいみたいだけど、いきなりやり方が解らない…どうやればいいの?
後でもいい?

そんな初心者ブロガーのお悩み解決しましょう。

よしてっく
よしてっく

WordPressに限らずブログを運営するなら「お問い合わせフォーム」は最初に設置することをお勧めします!

お問い合わせフォームを設置することでユーザーからの信頼性が向上し、サイトの評価も上がります。Googleアドセンスの運用も考えているなら、まずお問い合わせフォーム必須のメニューと言えます。

 

パソ太郎
パソ太郎

たまに[お問い合わせフォーム]がなくても「Google AdSense合格したよ」という声も聞くけど、お問い合わせメニューは普通に考えて必要だよ!

ここでは、WordPressCocoon(コクーン)でお問い合わせフォーム」を設置する手順をご紹介します。
 
補足Cocoonは「お問い合わせフォーム」設置機能が無いのでプラグインを使います。

 

↓【お問い合わせ】の設置イメージ
WP_お問い合わせの設置イメージ

 

お問い合わせフォーム」を設置する前の準備段階から順を追って解説しますので作業の項目は多いですが、画像も見ながら進めれば初心者でも設置まで完了できるように解説しています。
よしてっく
よしてっく

少し作業が多いですが、がんばって設定しましょう!

 

スポンサーリンク

WordPress:お問い合わせ用の[固定ページ]を作成する

ノートパソコンで作業する

★まず先に、お問い合わせフォーム用の「固定ページ」を作成する必要があります。

 

(1)WordPressの管理画面(ダッシュボード)の左側メニューの「固定ページ」⇒「新規追加」をクリックして下さい。
固定ページの新規追加

 

(2)「新規固定ページを追加」の画面が表示されますので「タイトルを追加」のところに「お問い合わせ」と入力し「公開する」⇒「公開」をクリックして下さい。
固定ページのお問い合わせタイトル

 

(3)画面の上部あたりに「固定ページを公開しました」と表示されたらOKです。
固定ページの公開

この段階で「お問い合わせフォーム」を設置するための「固定ページ」の準備が完了しました。

しかしこれだけですと、まだサイトには「お問い合わせ」フォームが表示されません。

次は「お問い合わせフォーム」用のプラグインをインストールします。

 

WordPress:お問い合わせフォームのプラグイン[Cntact Form 7]をインストールする

ノートパソコンのアイキャッチ

★冒頭でも説明しましたが、Cocoonには「お問い合わせフォーム」の機能は実装されていませんので「Cntact Form 7」というプラグインをWordPressにインストールする必要があります。

 

(1)WordPressの管理画面(ダッシュボード)の左側メニューの「プラグイン」⇒「新規追加」をクリックして下さい。
プラグインの新規追加

 

(2)「プラグインを追加」の画面が表示されます。左のほうにあるキーワード検索ボックスに「 contact form 7 」と入力すると、検索結果に表示されますので「今すぐインストール」をクリックして下さい。富士山のようなイメージのアイコンです。
コンタクトフォームのインストール

 

 

Check!

Cntact Form 7の最近のアイコンはこんな感じになっています。

コンタクトフォーム7のアイコン

 

 

(3)インストールが完了するとアイコンが切り替わりますので「有効化」をクリックして下さい。
プラグインの有効化

 

(4)WordPress左側メニューの「プラグイン」をクリックして下さい。プラグイン一覧の中に「Cntact Form 7」が追加されたと思います。
さらに、WordPress左側メニュー覧にも「お問い合わせ」という項目が追加されたことを確認しておいて下さい。
コンタクトフォームのインストール完了

 

これでお問い合わせフォーム用のプラグインのインストールは完了です。

次は「お問い合わせ」のコードを作成&設置をします。

 

WordPress:[お問い合わせのコード]の作成と設置

パソコンの設定

 

(1)先ほどの「Cntact Form 7」のインストールで作成された、左側メニューの「お問い合わせ」⇒「新規追加」をクリックして下さい。
お問い合わせの新規追加

 

 

(2)「コンタクトフォームを追加」という画面が表示され「お問い合わせ」の編集画面が出ますが、何もしないでそのまま「保存」をクリックして下さい。
お問い合わせにコンタクトフォーム追加

 

 

(3)画面の上部に「コンタクトフォームが作成されました」というコメントが出て、その下のほうに「ショートコード」が表示されますので、そのコードをコピーして下さい。
コンタクトフォームのコードをコピー

 

(4)WordPress左側メニューの「固定ページ」をクリックして。メニューで先ほど作成した「お問い合わせ」の「編集」をクリックし編集画面を開きます。
お問い合わせの編集

 

お問い合わせの編集画面


(5)「文章を入力」のところに、先ほどコピーしておいた「ショートコード」を貼り付け「更新」をクリックしてください。
ショートコード貼り付け

 

(6)画面の上部に「固定ページを更新しました」というメッセージが表示されたらOKです。
固定ページの更新完了

 

これで、ショートコードの作成と設置の作業完了です。

次は「お問い合わせ」をサイトの一番下(フッター)に表示させる設定を行います。

 

WordPress:[お問い合わせ]をサイトのフッターに表示する

デスクトップパソコン

 

(1)WordPress左側メニューの「外観」⇒「メニュー」をクリックして「メニュー画面」を表示して下さい。
外観のメニュー


(2)メニュー名に「フッターメニュー」と入力して「メニューを作成」をクリックして下さい。
フッターメニューの作成

 

(3)左側「固定ページ」の一覧の「お問い合わせ」が選択可能になりますので、チェックを入れメニューに追加」⇒メニュー設定の「フッターメニュー」や「フッターモバイルボタン」にチェックを入れメニューを保存」をクリックして下さい。
フッターメニューにお問い合わせを追加

 

これで、サイトへの「お問い合わせ」の表示設定が全て完了しました。

 

実際に自分のブログを確認してみましょう。

サイトの一番下に「お問い合わせ」の項目が表示されていると思います。

 

お問い合わせ設置後の確認

 

 

Check!
↓実際の「お問い合わせ」フォームは下のような様式になります。
お問い合わせフォームのサンプル

 

ここで終わらず、ちゃんとメッセージが届くかどうかを確認する為に、まず自分で適当な内容を入力して送信してみてください。

ブログ作成時に連絡先として登録した、あなたのメールアドレスに問い合わせメールが届くことを確認しましょう。

 

ここでちゃんとメールが確実に届くことを確認しておかないと、規約違反の連絡などの重要な問い合わせをスルーしてしまうこともあり、その後のブログ運営に支障が出る可能性もあります。
パソ太郎
パソ太郎

あれ?どのメールアドレスに届くんだっけ?

よしてっく
よしてっく

お問い合わせが届くアドレスはWordPressの通知が届くアドレスです!

お問い合わせが届くアドレスを確認したい場合は下記記事を参考にして下さい。
関連記事 お問い合わせフォーム送信先アドレスの確認と変更|Contact Form7

 

注意

「メッセージの送信に失敗しました。後でまたお試しください。」のメッセージが表示されてメッセージが送信できない不具合が発生する場合があるようです。

原因と対策はいくつか考えられるので下記のサイトを参考にしてみて下さい。

関連記事 Contact Form 7 エラー「メッセージの送信に失敗しました」(WP Mail SMTPで解決)
関連記事 【Contact Form7】メッセージの送信に失敗しました。後でまたお試しください。対処法(ver.5.1.3)
関連記事 Contact Form 7 送信エラー

 

まとめ:Cocoonの[お問い合わせフォーム]はプラグインを使う

今回は、WordPressのテーマ、Cocoon(コクーン)で「お問い合わせフォーム」を設置する方法をご紹介しました。

Cocoon(コクーン)は、無料テーマとは思えないほどの親切機能が標準で搭載されていてとてもありがたいテーマなのですが「お問い合わせフォーム」を設置する機能はありませんでしたので、プラグインを導入するしかありません。

 

お問い合わせフォームはブログを開始して初期に設置するメニューですので、おそらくブログ初心者が最初につまづきやすい項目かと思います。

そのため今回は「お問い合わせフォーム」を設置する作業手順は、初心者ブロガーの目線を意識してご紹介しました。

よしてっく
よしてっく

この記事がブログ構築のお役に立てれば幸いです。

関連記事 お問い合わせフォーム送信先アドレスの確認と変更|Contact Form7
関連記事 ヘッダーメニューバーを設置する|WordPress・ブログ
関連記事 ヘッダーメニューに[お問い合わせ]を設置する|WordPress

 

コメント

  1. […] Cocoon(コクーン)「お問い合わせフォーム」を設置する方法【WordPressテーマ】どうも、よしてっくです。(@yoshi_tech_01)WordPressに限らず、ブログを運営していくなら「お問い合わせフォーム」 […]

  2. […] 【初心者可】Cocoonお問い合わせフォーム設置方法【WordPress】WordPressのCocoon(コクーン)でお問い合わせフォームを設置する手順をご紹介します。Cocoonはお問い合わせフォームの設置機能が […]

  3. […] 【初心者可】Cocoonお問い合わせフォーム設置方法【WordPress】WordPressのCocoon(コクーン)でお問い合わせフォームを設置する手順をご紹介します。Cocoonはお問い合わせフォームの設置機能が […]

  4. […] こちら^^丁寧で分かり易かった↓https://yoshitechblog.com/cocoon-contact-form […]

  5. […] 【初心者可】Cocoonお問い合わせフォーム設置方法|WordPressWordPressのCocoon(コクーン)でお問い合わせフォームを設置する手順をご紹介します。Cocoonはお問い合わせフォームの設置機能が無 […]

  6. とても分かりやすい手順でスムーズに設定ができて、本当に助かりました!

    最後に
    問い合わせがきちんとできているか、確認して「送信」したところ

    「メッセージの送信に失敗しました。後でまたお試しください。」

    のエラーメッセージがでてしまい、困っています。
    解決策などわかりましたら、教えていただけると嬉しいです。

    どうぞよろしくお願いいたします。

  7. よしてっくよしてっく より:

    あおいさん初めまして、訪問&コメントありがとうございます。

    お問い合わせフォームの設置は完了したようですが、実際にテスト送信すると失敗しましたのメッセージが出てしまうということですね。
    私の環境ではその現象が無いので何とも言えないのですが、

    「メッセージの送信に失敗しました。後でまたお試しください。Contact Form7」

    のキーワードでGoogle検索すると、解決案を紹介しているサイトが出ますので、参考にしていただければと思います。

    お役に立てずすいません。不具合が解決できると良いですね。

  8. アドセンス4記事目で初心者が一発で合格できた!申請時気をつけた事 | マサきっとブログ より:

    […] 【初心者可】Cocoonお問い合わせフォーム設置方法|WordPressWordPressのCocoon(コクーン)でお問い合わせフォームを設置する手順をご紹介します。Cocoonはお問い合わせフォームの設置機能が無 […]

  9. アドセンス4記事目で初心者が一発で合格できた!申請時気をつけた事 | マサきっとブログ より:

    […] 【初心者可】Cocoonお問い合わせフォーム設置方法|WordPressWordPressのCocoon(コクーン)でお問い合わせフォームを設置する手順をご紹介します。Cocoonはお問い合わせフォームの設置機能が無 […]

  10. さとう より:

    はじめまして。
    こちらの記事を参考にお問い合わせページを作成させていただきました。
    設定が完了し、テスト送信まで実施したところ
    「ありがとうございます。メッセージは送信されました。」
    のメッセージ表示までは確認できたのですが、
    登録してあるメールアドレスにメールが届きません。
    原因は何が考えられますでしょうか・・

  11. よしてっくよしてっく より:

    さとうさん、初めまして。
    コメントありがとうございます。
    Contact Form7の設置が完了し、テスト送信してみたのですね。
    「ありがとうございます。メッセージは送信されました。」まで表示されたのに、登録したメールに届かないということですが、
    初歩的なことから確認ですが、
    ①迷惑メールフォルダや他のフォルダにないか。
    ②複数のメールアドレスを使っていて他のアドレスに届いていないか。
    まずこの確認を行ってみてもらえますか。
    上記の2点を確認した上で改善しないようでしたらまたメッセージ下さい。
    よろしくお願いします。
    m(_ _)m

  12. […] 【初心者可】Cocoonお問い合わせフォーム設置方法|WordPressWordPressのCocoon(コクーン)でお問い合わせフォームを設置する手順をご紹介します。Cocoonはお問い合わせフォームの設置機能が無 […]

  13. […] 【初心者可】Cocoonお問い合わせフォーム設置方法|WordPressWordPressのCocoon(コクーン)でお問い合わせフォームを設置する手順をご紹介します。Cocoonはお問い合わせフォームの設置機能が無 […]

  14. さつき より:

    初心者です。
    手探りで、なんとかやってますが、Cocoonがとても評判がよくて、
    導入しました。
    細かい設定方法などわかりやすくとても参考になりました!
    ありがとうございます。
    これからアドセンスの審査を申し込もうと思っていますが
    ずっとあれこれ悩んでいましたが、
    一つずつ解決して行って頑張ります!

    • よしてっくよしてっく より:

      さつきさん、初めまして。
      コメントありがとうございます。
      お役に立てて良かったです!
      私で解ることはお答え致しますので、お気軽にお問い合わせ下さい。
      アドセンス合格に向けて頑張ってくださいね。
      (^^)

  15. えみまる より:

    固定ページを作った後の操作がわからなかったのですが、こちらのサイトのおかげで解決しました!ありがとうございました!

    • よしてっくよしてっく より:

      えみまるさん、コメントありがとうございます!
      解決のお役に立てて良かったです!
      ( *°∀°)b