『しろくまフリーランス』は、現役フリーランス運営の「個人を豊かにする情報発信メディア」です。

WordPressブログにお問い合わせフォームを作るやり方【Contact Form 7】

この記事が解決するお悩み

ブログを始めてから数ヶ月。だんだんとPVは伸びてきたから、そろそろお客様からのお問い合わせを受けつけたい。

この記事では、WordPress(ワードプレス)で構築したブログにお問い合わせフォームをつくる方法として、プラグイン『Contact Form 7』を使ったお問い合わせフォームの作り方を図解でご紹介する。

STEP.1
Contact Form 7をインストール
WordPress(ワードプレス)に『Contact Form 7』をインストールしよう。
STEP.2
お問い合わせフォームをつくる
『Contact Form 7』の設定で、お問い合わせフォームを作成しよう。
STEP.3
作成したフォームをページに反映
作成したお問い合わせフォームを固定ページに反映して、実際に公開しよう。

STEP1. Contact Form 7をインストール

まずはWordPress(ワードプレス)に『Contact Form 7』をインストールする。

プラグインの新規追加

ワードプレス管理画面から、[プラグイン][新規追加]をクリックしよう。

Wordpressでプラグインを新規追加する手順

インストール後、有効化する

プラグインの新規追加ページ右上にある検索スペースに「contact form」と入力すれば、『Contact Form 7』が表示される。

[今すぐインストール][有効化]の順にクリックしよう。

プラグインを有効化しました。

というメッセージが表示されれば、インストール完了だ。

STEP2. お問い合わせフォームをつくる

インストールしたら、お問い合わせフォームを作成しよう。

設定画面をひらく

ワードプレス管理画面から、[お問い合わせ][新規追加]とクリックする。

Contact Form 7でお問い合わせフォームを作成する

コンタクトフォームを作成する

設定画面で”コンタクトフォーム”を作成する。
まずはタイトル欄に「お問い合わせフォーム」など分かりやすい名前を入力しよう。

MEMO
ここで入力するタイトルは実際のページに表示されないので、お問い合わせフォームを管理するために分かりやすい名前をつけることをオススメする。

Contact Form 7でお問い合わせフォームを作成する

保存する

左下の[保存]をクリックして、次のメッセージが表示されたら完了だ。

コンタクトフォームが作成されました。

Contact Form 7でお問い合わせフォームを作成する

STEP3. 作成したフォームをページに反映

最後に、作成した”コンタクトフォーム”を実際のページに反映すれば完了となる。

作成したフォームのショートコードをコピー

ワードプレス管理画面から、[お問い合わせ][コンタクトフォーム]とクリックしていく。

Contact Form 7の設定

先ほど「お問い合わせフォーム」という名前をつけたコンタクトフォームのショートコードをコピーする。

Contact Form 7の設定

お問い合わせページを作成

続いて、お問い合わせページを作成する。
お問い合わせページは”投稿”ではなく”固定ページ”で作成しよう。

MEMO
投稿ページと固定ページは用途が大きく異なる。投稿はブログのメインコンテンツ、固定ページは補助的なページとして以下のような用途で利用する。

  • お問い合わせページ
  • 運営者情報
  • プライバシーポリシー
  • 利用規約

など

ワードプレス管理画面から、[固定ページ][新規追加]とクリックする。

Contact Form 7で作成したフォームを固定ページに反映する

固定ページのタイトル欄は実際に表示したい文章を入力する。
特にこだわりがなければ、「お問い合わせページ」がもっとも分かりやすいだろう。

Contact Form 7で作成したフォームを固定ページに反映する

文章欄に、先ほどコピーしたショートコードを貼り付けよう。

Contact Form 7で作成したフォームを固定ページに反映する

最後に、[公開]をクリックして固定ページを表示させれば完了だ。

Contact Form 7で作成したフォームを固定ページに反映する

お問い合わせページを確認してみよう

実際に公開されたお問い合わせページにアクセスしていただき、どんな画面になっているか確認しよう。

Contact Form 7で作成したフォームを固定ページに反映する

以上で完了だ。

トップメニューにお問い合わせページを追加する

せっかくお問い合わせページを作成したので、ブログのトップページでメニューに表示してみよう。

具体的なやり方は以下記事で図解しているので、参考にしてほしい。

ワードプレスブログのトップページにメニューを表示する方法【初心者向け】ワードプレスブログのトップページにメニューを表示する方法【初心者向け】

実際に表示すると次のようになる。

ワードプレスでトップページにメニューを設定する方法

error: