こちらのページでは、ワードプレスに「Contact Form 7」というプラグインを使って、お問合せフォームを作る方法について解説しています。
「Contact Form 7」をインストールする
まず最初に、「Contact Form 7」というプラグインをインストールしましょう。
WordPress のダッシュボードの プラグイン ＞ ① 新規追加 をクリックします。
次に、下の画像の ② プラグインの検索 の欄に、「Contact Form 7」と入力して検索します。
検索結果に表示された ③ の プラグイン名 を確認の上、正しければ ④ の 今すぐインストール をクリックします。
⑤ の 有効化 をクリックしたら、「Contact Form 7」のインストールは完了です。
ダッシュボードの左サイドバーに お問い合わせ という項目ができたこと、インストール済みプラグイン に「Contact Form 7」が追加されたことが確認できますね。
「Contact Form 7」の設定を行う
プラグインには、インストールしただけで使える設定が不要なプラグインと、インストールしただけでは使えない設定が必要なプラグインがあるのですが、「Contact Form 7」は後者の設定が必要なプラグインに該当します。
ということで、ここからは「Contact Form 7」を使うために必要な設定作業を行いましょう。
まず、インストール済みプラグイン の「Contact Form 7」の下にある ① の 設定 をクリックするか、
お問い合わせ ＞ ② 新規追加 をクリックします。
開かれたページ（新規のコンタクトフォーム）のタイトル（③）に適当な名前をつけて（ここでは「お問合せ」としました）、④ の 保存 をクリックします。
保存をクリックすると同時に、タイトルの下に ⑤ の ショートコード が表示されますので、そちらをコピーして、事前に固定ページに準備しておいた「お問合せ」のページを新しいタブで開き、本文部分に貼り付けます。
固定ページの「お問合せ」は、⑥ 固定ページ ＞ ⑦ お問合せ をクリックすると表示されます。
（まだ作っていない方は、ここで作ってしまいましょう。作り方は、固定ページに新規追加で「お問合せ」とタイトルを入力して、本文には何も書かずに保存するだけです。）
表示されたページの「お問合せ」というタイトルの下にカーソルを合わせて、先ほどコピーした ⑤ の ショートコード を貼り付けます。
貼り付けると、下の画像のようになります。
「お問合せフォーム」には、シェアボタンや投稿日・更新日を表示する必要はありませんので、⑧ の [ys] 投稿設定 の「シェアボタンを非表示にする」と「投稿日・更新日を非表示にする」にチェックを入れて、⑨ の 更新 ボタンをクリックします。
ここで一旦「お問合せフォーム」が、どのように表示されるのか確認してみましょう。
上の画像のように表示されれば、ひとまず「完成！」と言いたいところなのですが・・・
次のページでは「placeholder」を使って、下の画像のように予め記入例が薄いグレーの文字で表示されるようにする設定について解説しています。
こちらの設定を行うことで、ユーザーの方がお問合せフォームにどんな内容を記入すれば良いのか分かりやすくなりますので、必ずしておきたい設定です。
「placeholder」を使った記入例の設定に進みたい方は、こちらからどうぞ。
