WordPress プラグイン ブログを始める

【WordPress】お問い合わせフォーム(Contact Form 7)の作り方

悩んでいる人
WordPressでお問い合わせフォームの作り方が知りたい!

そんな疑問にお答えします。

お問い合わせフォームは、サイト訪問者からのご意見やご感想をいただく場所で、サイト運営者とやり取りする手段として欠かせません。

今回は、WordPressでお問い合わせフォームを作る方法をご紹介します。

難しい作業は一切なく、プラグイン「Contact Form 7」をインストールするだけで、お問い合わせフォームを作成することができます。

それでは、見ていきましょう。

\当サイト使用WordPressテーマ/
サンプル
AFFINGER6

お問い合わせフォーム(Contact Form 7)の作り方

それでは、お問い合わせフォームの作成をしていきます。

やることは、たった4つです。

お問い合わせフォーム作成の流れ

  • Contact Form 7 インストール
  • Contact Form 7 初期設定
  • 固定ページに反映する
  • お問い合わせテストをする

手順①:Contact Form 7 インストール

まず、はじめにContact Form 7をインストールしていきます。

WordPressの管理画面へ行き、

プラグイン > 新規追加

を選択します。

プラグイン追加画面に移動するので、右上の検索ボックスに「Contact Form 7」を入力し、検索します。

該当するプラグインが表示されるので、「有効化」をクリックします。

有効化が完了すると、

プラグイン > インストール済みプラグイン

「Contact Form 7」が追加されています。

手順②:Contact Form 7 初期設定

続いて、Contact Form 7の初期設定をしていきます。

お問い合わせ > コンタクトフォーム

にて、お問い合わせフォームを作成することが可能です。

それでは、実際に作成していきましょう。

「新規追加」をクリックします。

こちらがフォームの編集画面になります。

↓ 「氏名」「メッセージ本文」など、フォームの項目を設定ができます(初期設定のままで大丈夫です)。

↓ 自分のアドレスに届くメール文のテンプレートを変更できます(初期設定のままで大丈夫です)。

こんな感じでメッセージが届きます(メール文はテスト送信したものです)。

↓ ユーザがフォームに文章を入力し、送信ボタンを押したときに出るメッセージの設定ができます(初期設定のままで大丈夫です)。

送信すると、このようにメッセージが表示されます。

最後は、その他の設定です(初期設定のままで大丈夫です)。

基本的に初期の設定のままで問題ありません。

設定を終えたら、「保存」を押しましょう。

手順③:固定ページに反映する

これまでの設定では、まだページが出来上がっていないので、これからフォームをページに反映していきます。

それでは、お問い合わせフォームのショートコードをコピーします。

ショートカットキー(コピー)

[Ctrl]+[C] (Windows)
[command] + [C] (Mac)

続いて、

固定ページ > 固定ページ一覧(もしくは新規追加)

に移動します。

トド

固定ページとは、お問い合わせや会社紹介など、そのページ単体で完結するページを作成する際に使います。

こちらに、「①タイトル」「②一言コメント」「③コピーしたショートコード」「パーマリンク」を入力します。

「③コピーしたショートコード」に関しては、ペースト(貼り付け)すればOKです。

ショートカットキー(ペースト)

[Ctrl]+[V] (Windows)
[command] + [V] (Mac)

これで、下書き保存し、プレビューで確認すると、下記のように表示されます。

問題なければ、公開しましょう。

手順④:お問い合わせテストをする

最後に、お問い合わせテストをしていきます。

フォームに入力した内容がしっかり届くのか、見ていきます。

テストなので、入力する文字は何でも大丈夫です(今回は下記の内容を入力しました)。

送信し、問題なければ、下記のようなメッセージが表示されます。

※このメッセージは初期設定で変更ができます。

続いて、送信した内容がメールボックスに届いていれば設定完了です。

ちなみに、お問い合わせが届くアドレスですが、プロフィールから確認ができます。

ユーザ > プロフィール >メール(必須)

に記入したアドレスに届きます。

お問い合わせフォーム(Contact Form 7)の設置方法

先ほど作成したお問い合わせフォームをサイト内に設置していきます。

今回は、「ヘッダーメニュー(フッターメニュー)」と「プロフィール欄」の2ヶ所に設置していく方法をご紹介します。

お問い合わせフォーム設置方法

  1. ヘッダーメニュー
  2. プロフィール欄

それでは、見ていきましょう。

パターン①:ヘッダーメニュー

ヘッダーメニューとは、サイト上部に表示されるメニューです。

こちらの設定ですが、

外観 > メニュー

をクリックします。

今回はヘッダーに設置するので、②「ヘッダー用メニュー(横列)」にチェックをつけ、①ボックスに任意で文字をいれます。

①は、後で見返したときにわかるよう「ヘッダーメニュー」「ヘッダーメニュー(横列)」などの文字を入れておきましょう。

これで、③「メニュー作成」をクリックします。

続いて、固定ページの項目に、先ほど作成した「お問い合わせフォーム」があるので、チェックをつけ追加します。

追加すると、お問い合わせフォームの項目が表示されるので、保存します。

すると、先ほど見ていただいたように、ヘッダーに表示されます。

ちなみに、フッターに設置する場合も同じ手順で設定するだけでOKです。

フッターの場合は、「フッター用メニュー」を選択すると、設置ができます。

トド

ヘッダー・フッターに設置するとき、特に難しい設定は一切ありません。

パターン②:プロフィール欄

続いて、2つ目のパターンである「プロフィール欄」への設定です。

ユーザ > プロフィール

に移動します。

form(URL)に、お問い合わせフォームのURLを入力します。

ちなみに、お問い合わせフォームのURLが分からない方は、作成したページの上部に記載しているので、そのままコピーしましょう。

「プロフィール更新」をクリックし、設定完了です。

これで、プロフィール欄にお問い合わせフォームのボタンが設置されます。

これで、設置完了です。お疲れ様でした。

トド

ヘッダーとプロフィール欄に設置できればバッチリです。

まとめ サイト訪問者からの意見・感想がもらえる機会を作ろう!

今回は、お問い合わせフォーム(Contact Form 7)の作り方をご紹介しました。

お問い合わせフォームは、サイト訪問者からの意見・感想がもらえる絶好の機会です。

プラグインをインストールし、設置するだけの簡単作業ですので、ぜひお問い合わせフォームを設置しましょう。

本日は、以上です。

↓ 他のプラグインはこちら

-WordPress, プラグイン, ブログを始める
-, , ,