SPGアメックス紹介に関するお問い合わせはこちら

Cocoonでお問い合わせフォームを作る方法!Contact Form7の使い方【WordPress】

Cocooでお問い合わせフォームを作る方法!Contact Form 7の使い方

Cocoonでお問い合わせフォームを作るにはどうしたらいいの?

こんなブログ初心者の疑問にお答えします。

この記事を読めばWordPressのブログでお問い合わせフォームを作れるようになります。

ブログで収益を上げようと思った時、お問い合わせフォームの設置は必須です。

ブログが成長してくるとお問い合わせフォームから仕事の依頼が来たりすることも!
5分もあれば設置できるのでとりあえず作成しておきましょう。

なーたん
なーたん

当サイトの様な陸マイラーブログではお問い合わせフォームの役割は超重要!
お問い合わせフォームを通してSPGアメックスなどのクレカ紹介依頼を受け付けるので設置は必須です。

この記事ではWordPressのテーマ「Cocoon」でお問い合わせフォームを設置する方法を画像付きで丁寧に解説します。

これから紹介する方法はWordPressのテーマ「Cocoon」利用者向けに書いていますが、他のテーマを利用していても同じ方法でお問い合わせフォームを設置することができます。

Cocoonにお問い合わせフォーム機能はない

Cocoon自体にお問い合わせフォームを作る機能はありません。

Cocoonでお問い合わせフォームを作るにはプラグインが必要です。

プラグインとは

さまざまな機能を追加することができるWordPressのしくみです、WordPress自体の機能はシンプルですが、プラグインを入れることで必要な機能を追加することができます。

お問い合わせフォームを作ることができるワードプレスのプラグインはいくつかありますが、一番おすすめは「Contact Form7」です、

Contact Form7は完全無料で利用することができ高機能なので多くのブログで利用されています。

当ブログのお問い合わせフォームも「Contact Form7」で作成しています。

>> お問い合わせフォームはこちら

このようなお問い合わせフォームが作成できます。

Cocoonにお問い合わせフォーム機能はない Contact Form7で作ったお問い合わせフォーム例
お問い合わせフォーム完成例

Cocoonでお問い合わせフォームを作るならContact Form7を使おう

Cocoonでお問い合わせフォームを作る方法をContact Form7のインストールから順番に解説していきます。

作業の流れは以下の通りです。

お問い合わせフォーム設置方法
  1. Contact Form7をインストール
  2. お問い合わせフォームを作成
  3. 固定ページを作成
  4. お問い合わせフォームを貼り付け

順に解説していきます。

Contact Form7のインストール

初めにContact Form7をインストールして有効化します。

WordPressのダッシュボードの左のメニューから「プラグイン」の「新規追加」をクリックします。

Cocoonでお問い合わせフォームを作るならContact Form7を使おう

右上にある検索窓に「Contact Form 7」と入力します。

Cocoonでお問い合わせフォームを作るならContact Form7を使おう

検索結果に表示されたContact Form 7の「今すぐインストール」をクリックします。
インストールが完了したら「有効化」をクリックします。

Cocoonでお問い合わせフォームを作るならContact Form7を使おう

左のメニューに「お問い合わせ」が表示されたらインストール完了です。

Cocoonでお問い合わせフォームを作るならContact Form7を使おう

お問い合わせフォームを作成

続いてお問い合わせフォームを作成します。

メニューの「お問い合わせ」の「新規追加」をクリックします。

Cocoonでお問い合わせフォームを作るならContact Form7を使おう

コンタクトフォームの作成画面が表示されます。

Cocoonでお問い合わせフォームを作るならContact Form7を使おう

Contact Form 7ではいろいろなカスタマイズができるのですが、この記事では最低限必要な設定だけを解説していきます。

初めにお問い合わせフォームのタイトルを入力します。

Cocoonでお問い合わせフォームを作るならContact Form7を使おう

その他に設定箇所がたくさんありますが基本的に変更しなくても問題ありません。
そのまま「保存」ボタンを押して次のステップへ進んでください。

設定内容を確認、カスタマイズしたい場合は下記で説明します。

はじめにフォームタブの設定です。

フォームタブではお問い合わせフォームに表示する内容を設定します。
特にこだわりがなければ変更は必要ありません。

<label>の後の文字(お名前など)を修正するとお問い合わせフォームに表示する文字列を変更できます。

Cocoonでお問い合わせフォームを作るならContact Form7を使おう

続いてメールタブの設定です。
お問い合わせフォームが入力された後に送信するメールの設定を行います。

お問い合わせフォームを読者が送信した際に入力された内容が自分にメールで届くようにします。

  • 送信先:メールが送信される宛先のメールアドレスです。
    メールを送りたい自分のメールアドレスを設定します。
    デフォルトではWordPressの設定で入力したメールアドレスが入っています。
  • 送信元:メールを送信する元のアドレスです。
  • 題名:メールの件名です。
    your subjectの部分にユーザーが入力したタイトルが表示されます。
  • 追加ヘッダー:送られてきたメールに返信するときにデフォルトで入力されるメールアドレスです。デフォルトではユーザーが入力したメールアドレスになっています。
  • メッセージ本文:メールの本文に表示される内容です。
Cocoonでお問い合わせフォームを作るならContact Form7を使おう

メッセージタブはユーザーがお問い合わせフォームを送信した後やエラーの際に表示されるメッセージを設定します。
好みの文章に変更してください。

Cocoonでお問い合わせフォームを作るならContact Form7を使おう

その他設定タブはカスタマイズを行う際に使用します。
今回は何も設定しなくて大丈夫です。

設定が終わったら「保存」ボタンをクリックします。

Cocoonでお問い合わせフォームを作るならContact Form7を使おう

保存が成功するとお問い合わせフォームを貼り付けるためのショートコードが表示されます。
このショートコードをコピーしてお問い合わせフォームを表示したい場所に貼り付けます。

Cocoonでお問い合わせフォームを作るならContact Form7を使おう

固定ページを作成して貼り付ける

Contact Form 7で作成したお問い合わせフォームは投稿ページでも固定ページでも表示することができます。

投稿ページと固定ページの違いは以下の通りです。

  • 投稿ページ
    新着やカテゴリーページに表示される。
    ブログ記事に使用
  • 固定ページ
    新着やカテゴリーページには表示されない。
    トップページやお問い合わせフォームなどに使用

お問い合わせフォームは新着記事やカテゴリーページに表示させる必要はないので、固定ページで作成します。

左のメニューから「固定ページ」>「新規追加」をクリックします。

Cocoonでお問い合わせフォームを作るならContact Form7を使おう 子テーページ作成

固定ページの新規作成画面が開くので、ページのタイトルと表示したい内容を入力します。
先ほどのショートコードを貼り付ければお問い合わせフォームが表示できます。

必要に応じて注意書きなどの文章も記入します。

Cocoonでお問い合わせフォームを作るならContact Form7を使おう 子テーページ作成

忘れずにパーマリンクも設定しましょう。
パーマリンクはページのURLのドメイン名の後に続く文字列のことです。

Cocoonでお問い合わせフォームを作るならContact Form7を使おう 子テーページ作成

パーマリンクは検索順位やブログの評価に大きく関係します。

後で変更すると影響が大きくなるので初めに正しい方法で登録しましょう。

パーマリンクの決め方やワードプレスでの初期設定方法を以下の記事で解説しています。

>> 詳細記事簡単1分】パーマリンクの決め方講座!ワードプレスの設定方法も解説!変更できない時はどうするの?

全ての入力が終わったら「プレビュー」で表示内容に問題がないか確認して「公開する」ボタンをクリックします。

お問い合わせページへのリンクを作る

お問い合わせページの作成は以上で完了です。
ただし作っただけではブログのどこからも辿れません。

お問い合わせページにたどり着けるようにリンクを作成します。

フッターメニューにプライバシーポリシーなどと一緒に表示させておけばよいでしょう。

すでにフッターメニューを作成している場合は、先ほど作成したお問い合わせページを追加してください。

これですべての作業は終了です。
完成したお問い合わせフォームに入力してメールが正常に送信されることを確認してください。

Cocoonでお問い合わせフォームを作る方法まとめ

Cocoonでお問い合わせフォームを作るにはContact Form 7を使うのが一番簡単な方法です。

5分もあれば設置できるのでブログを立ち上げたらすぐに設定しておきましょう。

お問い合わせフォームの設置はプライバシーポリシーページと合わせてGoogleアドセンスの合格にも必要です。
下記の記事でCocoonでGoogleアドセンスに関する設定方法をすべてまとめています。

>>関連記事 CocoonでGoogleアドセンスの審査申請から広告設置までの設定方法を初心者向けに解説

WordPressの使い方を基礎から一通り学びたい人にはこちらのほんがおすすめ

ブログランキング参加中!応援お願いします。
ブログランキング・にほんブログ村へにほんブログ村

コメント

タイトルとURLをコピーしました