ブログ

ContactForm7の使い方|問い合わせページを簡単にカスタマイズ

2020年6月5日

ContactForm7の使い方|問い合わせページを簡単にカスタマイズ

こんな疑問にお答えします

  • 問い合わせページを自分のサイトに設置したい
  • 簡単に問い合わせページのレイアウトを変更したい

 

ブログを運営において、読者からの意見は非常に重要です。

読者は、あなたのブログを見ている時に気付いた時点で連絡を取りたいはず。

 

ということで問い合わせページを作成していきましょう。

 

WordPressでは、たくさんの問い合わせを作成するためのプラグインが用意されています。

この記事では問い合わせページを設置するプラグイン「Contact Form 7」をご紹介します。

 

Contact Form 7の利点

  • 簡単に問い合わせのページを設置できる
  • Webの知識がなくても問い合わせページのカスタマイズが簡単にできる
  • 多くのブロガーが使っていて困ったときでも情報がたくさんある

 

「Contact Form 7」の導入手順から問い合わせページの設置まで分かりやすく解説していきます。

 

 

記事の内容

  • Contact Form 7とは?
  • Contact Form 7の特徴
  • Contact Form 7のインストール手順
  • Contact Form 7による問い合わせページの設置
  • Contact Form 7のまとめ

 



 

Contact Form 7とは?

Contact Form 7とは問い合わせページを作成・管理するためのWordPressのプラグインです。

 

インストールするだけで問い合わせに必要な項目がコードとして自動的に作成されます。

作成されたコードを固定ページに張り付けると問い合わせページを設置することができます。

 

Mamito blogでも、お問い合わせページは「Contact Form 7」で簡単に作成しています。

 

Mamito blogのお問い合わせページ

Mamito blogの問い合わせページ

 

必要最低限の項目しかない問い合わせページですね。

これで十分です。

 

 

Contact Form 7の特徴

始めに解説したとおり、とても簡単に問い合わせページを作成できるのが「Contact Form 7」の最大の特徴です。

 

また、カスタマイズも既に用意されている部品はクリック1つで配置できてしまいます。

問い合わせページだけでなく送信されるメールの内容やメッセージもカスタマイズできます。

 

カスタマイズできる項目

  • 問い合わせフォーム
  • 問い合わせの受信メール内容
  • 送信時のメッセージ設定
  • その他細かい設定

 

 

Contact Form 7のインストール手順

Contact Form 7のインストール手順を4つのステップに分けて解説していきます。

 

 

step
1
新規追加

プラグイン新規追加

 

「プラグイン」の画面で「新規追加」ボタンをクリックします。

 

 

step
2
プラグイン検索

プラグイン検索

 

「プラグインを追加」の画面で「Contact Form 7」を入力します。

入力すると自動的に検索されます。

 

 

step
3
プラグインのインストール

プラグインのインストール

 

目的のプラグインを「今すぐインストール」ボタンをクリックしてインストールします。

 

 

インストール中は、クリックしたボタンのところに「インストール中」と表示されますのでしばらく待ちます。

 

プラグインのインストール中

 

 

step
4
プラグインの有効化

プラグインの有効化

 

プラグインのインストールが完了したら、「有効化」ボタンをクリックしましょう。

 

有効化が完了すると自動的に「プラグインの一覧」の画面が表示されます。

プラグインのインストール完了

 

これでContact Form 7のインストールが完了しました。

 

 

Contact Form 7による問い合わせページの設置

それでは、問い合わせページを設置するまでの手順を解説していきます。

 

問い合わせページを設置するまでの手順

  1. コンタクトフォームを編集
  2. 固定ページを新規作成してショートコードを張り付ける
  3. 固定ページを任意の場所に設置する

 

では、早速やっていきましょう。

 

コンタクトフォームの編集

まずはコンタクトフォームを編集するための画面を表示しましょう。

 

Contact Form 7をインストールすると左のメニューに「お問い合わせ」が表示されます。

 

「お問い合わせ」をクリックしてコンタクトフォーム画面を表示しましょう。

メニュー

 

 

コンタクトフォーム画面では作成したコンタクトフォームを編集することができます。

「コンタクトフォーム1」という最初に用意されているフォームを編集していきます。

 

コンタクトフォーム画面

 

 

コンタクトフォーム編集画面では問い合わせページの内容をカスタマイズできます。

 

コンタクトフォーム編集画面

 

 

用意されている問い合わせページをそのまま使っても、とりあえずは大丈夫です。

ただ、ちょっと手を加えるだけでセキュリティが向上しますので手順を解説していきます。

 

 

問い合わせページのセキュリティを向上させる

では、セキュリティ向上のためのひと手間を加えていきましょう。

 

まず、「メッセージ本文」と「送信ボタン」の間をクリックします。

その後に「承諾確認」ボタンをクリックします。

 

コンタクトフォーム編集

 

 

 

「承諾確認」ボタンをクリックするとタグ作成画面が表示されます。

同意条件を入力、オプションのチェックを外して、「タグを挿入」ボタンをクリックします。

 

承諾確認設定

 

 

タグを挿入すると「メッセージ本文」と「送信ボタン」の間に「承諾確認」が追加されます。

 

編集内容確認

 

「保存」ボタンをクリックしてコンタクトフォームを保存しましょう。

 

 

保存が完了したらショートコードをコピーしておきましょう。

 

ショートコードのコピー

 

固定ページを新規作成してショートコードを張り付ける

では、問い合わせのページを固定ページで新規作成していきましょう。

 

問い合わせページの作成手順

  1. 固定ページを新規追加
  2. 固定ページにショートコードを貼り付け
  3. 固定ページを公開

 

それでは、左のメニューから「固定ページ」をクリックして固定ページ画面を表示します。

 

 

step
1
固定ページの新規追加

固定ページの新規追加

 

「新規追加」ボタンをクリックして固定ページを新しく作成します。

 

 

step
2
固定ページにショートコードを貼り付け

固定ページの編集

 

 

本文にショートコードを貼り付けます。

タイトルやURL、メタディスクリプションも入力しておきましょう。

 

 

step
3
固定ページを公開

固定ページの公開

 

変更内容した内容はプレビューで確認しておきましょう。

問題なければ公開ボタンから問い合わせページを公開します。

 

 

これで問い合わせページの作成は完了です。

 

 

固定ページを任意の場所に設置する

固定ページは、ヘッダー、フッター、サイドメニューのどこかに設置しましょう。

どこに設置していいか分からない人はフッターに設置しておけば大丈夫です。

 

人気無料テーマのCocoonで解説していきますが、他のテーマでも同じようにできます。

 

 

ヘッダーに設置する場合

「外観」→「メニュー」をクリックするとメニュー画面が表示されます。

 

 

ヘッダー用のメニューがない場合は、メニューを作成しましょう。

 

メニュー作成

 

 

メニューを作成したら固定ページを追加しましょう。

 

メニューに追加

 

 

「お問い合わせ」をメニューに追加したら表示するメニューを選択します。

 

メニュー編集

 

 

これでヘッダーに「お問い合わせ」のメニューが設置されます。

 

ヘッダーメニュー

 

 

フッターに設置する場合

フッターは、ヘッダーと同じようにメニューを作成します。

ヘッダーと違うのは最後のチェックだけです。

 

フッターメニュー作成

 

 

フッターに問い合わせを設置すると右下に表示されます。

 

フッター表示確認

 

 

サイドメニューに設置する場合

サイドメニューは、ウィジェットの設定を編集することで表示されます。

 

「外観」→「ウィジェット」をクリックするとウィジェット画面が表示されます。

 

下の方に「固定ページ」がありますのでクリックします。

今回はサイドバーに設置するので、そのまま「ウィジェットを追加」をクリックします。

 

ウィジェット追加

 

 

すると、一番上にあるサイドバーに固定ページが追加されています。

タイトルを「リンク」、除外ページに「2」を入力して「保存」ボタンをクリックします。

※除外ページの「2」は最初にある「Sample Page」を除外しています。

 

ウィジェット編集

 

 

サイドメニューに「お問い合わせ」が表示されているのを確認します。

 

サイドバー確認

 

これで「お問い合わせ」のページを設置することが出来ました。

 

 

Contact Form 7のまとめ

まとめ

 

お問い合わせのページは、サイトを構築する上で非常に重要なページになります。

 

なぜかというと、Googleアドセンスやアフィリエイトであなたのサイトが審査されることがあり、その時に問い合わせページがないことで落ちることがあるからです。

 

ですので、問い合わせページはきちんと綺麗な状態で作成しておきましょう。

そうすることで、あなたのサイトの評価はいい方向に向かっていきます。

 

 

WordPressには、「Contact Form 7」以外にもたくさんのプラグインがあります。

最初に入れておきたいプラグインを別の記事にまとめていますので、こちらも参考にしてみてください。

 

 

-ブログ
-, ,

Copyright© Mamito blog , 2020 All Rights Reserved Powered by AFFINGER5.