【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 Form 7

 

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

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

Contact Form 7

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

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

Contact Form 7

 

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

Contact Form 7

 

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

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

Contact Form 7

 

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

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

Contact Form 7

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

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

 

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

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

Contact Form 7

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

 

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

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

 

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

 

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

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

 

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

Contact Form 7

 

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

Contact Form 7

①【ビジュアルモード】になっていることを確認します。

「タイトル」を入力する部分がありますので「お問い合わせフォーム」などのタイトルを入力します。

お問い合わせフォームを作成した時にコピーしておいた「ショートコード」を貼り付けます。

メッセージを入力しておくこともできますよ♪

 

3.入力できたら、プレビューを見てみましょう。

画面の右上の【公開】「プレビュー」をクリックします。

Contact Form 7

   

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

Contact Form 7

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

【固定ページの編集】画面の「公開」をクリックすれば、この内容で公開されます。

Contact Form 7

 

まとめ

 

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

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

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

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

 

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

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