WordPressにお問い合わせフォームを設置する方法

ContactForm7

こちらのページでは、ワードプレスに「Contact Form 7」というプラグインを使って、お問合せフォームを作る方法について解説しています。

「yStandard」というテーマを使用している前提でお話ししていますが、他のテーマをお使いの方でも参考にしていただけます。

目次

Contact Form 7」をインストールする

まず最初に、「Contact Form 7」というプラグインをインストールしましょう。

WordPress のダッシュボードの プラグイン > ① 新規追加 をクリックします。

WordPressのダッシュボード画面

次に、下の画像の ② プラグインの検索 の欄に、「Contact Form 7」と入力して検索します。

WordPressのダッシュボード画面

プラグインの名前が少しでも間違っていると、検索結果に表示されなかったり、別のプラグインが表示されてしまうことがありますので、こちらの文字 →「Contact Form 7」をコピー&ペーストして検索することをお勧めします。

検索結果に表示された ③ の プラグイン名 を確認の上、正しければ ④ の 今すぐインストール をクリックします。

WordPressのダッシュボード画面

⑤ の 有効化 をクリックしたら、「Contact Form 7」のインストールは完了です。

WordPressのダッシュボード画面

ダッシュボードの左サイドバーに お問い合わせ という項目ができたこと、インストール済みプラグイン に「Contact Form 7」が追加されたことが確認できますね。

WordPressのダッシュボード画面

「Contact Form 7」の設定を行う

プラグインには、インストールしただけで使える設定が不要なプラグインと、インストールしただけでは使えない設定が必要なプラグインがあるのですが、「Contact Form 7」は後者の設定が必要なプラグインに該当します。

ということで、ここからは「Contact Form 7」を使うために必要な設定作業を行いましょう。

まず、インストール済みプラグイン の「Contact Form 7」の下にある ① の 設定 をクリックするか、

WordPressのダッシュボード画面

お問い合わせ > ② 新規追加 をクリックします。

WordPressのダッシュボード画面

開かれたページ(新規のコンタクトフォーム)のタイトル(③)に適当な名前をつけて(ここでは「お問合せ」としました)、④ の 保存 をクリックします。

WordPressのダッシュボード画面

保存をクリックすると同時に、タイトルの下に ⑤ の ショートコード が表示されますので、そちらをコピーして、事前に固定ページに準備しておいた「お問合せ」のページを新しいタブで開き、本文部分に貼り付けます。

WordPressのダッシュボード画面

固定ページの「お問合せ」は、⑥ 固定ページ > ⑦ お問合せ をクリックすると表示されます。

(まだ作っていない方は、ここで作ってしまいましょう。作り方は、固定ページに新規追加で「お問合せ」とタイトルを入力して、本文には何も書かずに保存するだけです。)

WordPressのダッシュボード画面

表示されたページの「お問合せ」というタイトルの下にカーソルを合わせて、先ほどコピーした ⑤ の ショートコード を貼り付けます。

お問い合わせフォーム

貼り付けると、下の画像のようになります。

「お問合せフォーム」には、シェアボタンや投稿日・更新日を表示する必要はありませんので、⑧ の [ys] 投稿設定 の「シェアボタンを非表示にする」と「投稿日・更新日を非表示にする」にチェックを入れて、⑨ の 更新 ボタンをクリックします。

お問い合わせフォーム

ここで一旦「お問合せフォーム」が、どのように表示されるのか確認してみましょう。

問合せページ

上の画像のように表示されれば、ひとまず「完成!」と言いたいところなのですが・・・

次のページでは「placeholder」を使って、下の画像のように予め記入例が薄いグレーの文字で表示されるようにする設定について解説しています。

お問い合わせフォーム

こちらの設定を行うことで、ユーザーの方がお問合せフォームにどんな内容を記入すれば良いのか分かりやすくなりますので、必ずしておきたい設定です。

「placeholder」を使った記入例の設定に進みたい方は、こちらからどうぞ。

よかったらシェアしてね!
目次