【WordPress】『Contact Form 7』でお問い合わせフォームを作ろう!

問い合わせ

こんにちは、nozomiです。

ブログを見ているとよく見かけるお問い合わせフォーム。どうやったら作れるんだろう?って思いますよね。

実は、ブログのお問い合わせフォームは、Wordpress初心者の方でもプラグインで簡単に作ることができます。 

お問い合わせフォームは、あなたのブログに訪問してくれる読者さんたちとあなたをつないでくれます。ブログを開設したら、ぜひお早めに設置してくださいね。

この記事では、『Contact Form 7』のプラグインを使ってお問合せページを作成する方法をわかりやすく解説していきます。

『Contact Form 7』のプラグインでお問合せページを作成する方法

『Contact Form 7』のプラグインでお問合せページを作成する手順は以下の通りです。

  1. 『Contact Form 7』をインストールする
  2. 『Contact Form 7』でお問い合わせフォームを作成する
  3. お問い合わせフォームを固定ページに設置する

それでは、順番に解説していきますね。

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

①WordPressのダッシュボードにログインしておきます。

左側のメニューの「プラグイン」をクリックします。

プラグイン

 

②【プラグイン】の画面が表示されますので、「新規追加」をクリックします。

プラグイン

 

③【プラグインを追加】という画面に切り替わったら、右上の「プラグインの検索」の欄に「Contact Form 7」と入力します。

プラグイン

 

④検索結果が表示されますので、【Contact Form 7】の「今すぐインストール」をクリックします。

Contact Form 7

 

⑤【今すぐインストール】のボタンが「有効化」に変わったら、「有効化」をクリックします。

Contact Form 7

以上でインストールは完了です♪

 

『Contact Form 7』でお問い合わせフォームを作成してみよう!

『Contact Form 7』のインストールができたら、次はお問い合わせフォームを作成してみましょう。

では、作成の手順をご説明しますね。

 

①ダッシュボードの左側のメニューの①「お問い合わせ」にマウスを合わせ、出てきたメニューの②「コンタクトフォームを追加」をクリックします。
Contact Form7

 

②【コンタクトフォームを追加】の画面が表示されますので、「ここにタイトルを入力」と書かれている部分にお問い合わせフォームのタイトルを入力します。

タイトルは「お問い合わせフォーム」などのわかりやすいものにするとよいと思います。

Contact Form 7

③画面を下にスクロールし、「保存」をクリックします。

④画面が切り替わって「コンタクトフォームが作成されました」と表示されますので、青く反転表示されている「ショートコード」をコピーします。Contact Form 7

 

コピーはマウスをコピーしたい部分に合わせ、右クリックをすると、メニューが表示されるので「コピー」をクリックします。もしくは【Ctrl+C】でもOKです!

Contact Form 7

 

⑤下の部分の内容も一応確認しておきましょう。

【フォーム】では、お問い合わせフォームに表示する項目を設定することができますが、デフォルトのままでよいと思います。

Contact Form 7

 

【メール】のタブをクリックして切り替えます。

ここでは、お問い合わせフォームから送信されるメールの設定をすることができます。

Contact Form 7

「送信先」は、WordPressに登録されているメールアドレスが設定されています。

このアドレスでよければ、そのままにしておいてOKです。

 

【メッセージ】のタブをクリックして切り替えます。

この画面では、状況に応じたメッセージの内容を編集することができます。

Contact Form 7

とりあえずはこのままにしておいて、後で変更したい部分があれば、変更してもよいでしょう。

このような感じで、設定を変更することができるということだけ覚えておきましょう。

内容を変更した箇所がある場合は、最後に「保存」をクリックするのを忘れないでくださいね。

お問い合わせフォームを固定ページで設定しよう!

続いて、お問い合わせフォームを固定ページに設置します。

固定ページに設置したお問い合わせフォームのリンクを、サイドバーやグローバルメニューに貼って使うことができますよ。

①ダッシュボードの左側のメニューの①「固定ページ」にマウスを合わせるとメニューが出てくるので、②「固定ページを追加」をクリックします。
固定ページを追加

【固定ページの編集】の画面が表示されます。

固定ページ

②お問い合わせフォームの入力をしていきましょう。
Contact Form 7
①「タイトル」
「お問い合わせフォーム」などのタイトルを入力します。

②「本文」
お問い合わせフォームについての説明などがあれば入力します。

③「+マーク(ブロックを追加)」をクリックして、お問い合わせフォームのショートコードを貼り付けていきます。

③ブロックの一覧が表示されるので「ショートコード」をクリックします。

Contact Form 7

④ショートコードのブロックが表示されるので、コピーしておいたお問い合わせフォームのショートコードをペーストします。
Contact Form 7

 

⑤入力できたら、プレビューを見てみましょう。
画面の右上の【公開】「プレビュー」をクリックします。
Contact Form 7

   

このようにプレビューが表示されました!

Contact Form 7

きちんとメッセージや項目が表示されていれば、設定は完了です♪

 

⑥固定ページのパーマリンクが日本語になっているので英語に変更します。
スラッグをクリックします。
Contact Form 7

 

⑦スラッグの設定画面が表示されたら、【パーマリンクの最後の部分をカスタマイズする】の下に表示されている日本語(お問い合わせフォーム)の部分をクリックして、
Contact Form 7

①お問い合わせフォームの意味の英語を小文字で入力します。今回は「contact」と入力しました。②「×」をクリックします。

⑨スラッグの部分が英語に変わっていればOKです。「公開」をクリックすれば記事を公開できます。

Contact Form 7

 

 

まとめ

 

お問い合わせフォームは、

  1. 『Contact Form 7』をインストールする
  2. 『Contact Form 7』でお問い合わせフォームを作成する
  3. お問い合わせフォームを固定ページに設置する

の手順で『Contact Form 7』のプラグインを使って簡単に作ることができます。

ぜひ設置しておいてくださいね。

 

次は、画像を圧縮してくれるプラグインの設定をします。

⇒『EWWW Image Optimizer』で画像を圧縮しよう!