ブログカスタマイズ

お問い合わせフォームをWordPressのブログに設置!プラグインContact Form 7が便利

投稿日:2018年2月17日 更新日: 投稿者:

自分のブログに、「お問い合わせフォーム」って…つけた方がいいですよね?

自分のブログから連絡を取りたい!と思ってくれた方にとっても、連絡を受け取る側にとっても、分かりやすくスムーズに管理できるのがお問い合わせフォームの良いところです。

WordPressにはとっても便利なプラグインがたくさんありますが、ブログが重くなるのでかなり厳選して使わせてもらっています。

その中で、これは便利!で使いやすいと思った「Contact Form 7」というプラグインを紹介します。

この「Contact Form 7」があればブログにお問い合わせフォーム(お問い合わせページ)を簡単に作成出来ちゃいますので、さっそく手順を紹介していきます^^

お問い合わせフォームのプラグイン「Contact Form 7」のインストール

まずはプラグイン「Contact Form 7」のインストールをしましょう。

※プラグインをインストールする時は、まれに合わないと不具合を起こすことがあるので、WordPressのバックアップを取っておきましょう!

WordPressのプラグイン→新規追加で、「Contact Form 7」と検索すると出てきます。

お問い合わせフォーム WordPress

この富士山のかっこいい画像ですね。

インストール後に出てくる有効化というボタンを押せば、「Contact Form 7」を使えるようになります。

WordPressの左側に「お問い合わせ」というメニューが追加されていたらOKです!

「Contact Form 7」でのお問い合わせフォーム作成方法

WordPressに追加されたお問い合わせメニューから、新規追加ボタンを押しましょう。

お問い合わせフォーム WordPress

タイトルは、このタイトルがブログ上のページに表示されるわけではないです。「コンタクトフォーム1」とか自分が分かりやすい名前をつけておきましょう。

次に「フォーム」「メール」「メッセージ」「その他の設定」という項目が出てくるので、順番に見ていきましょう!

フォーム

お問い合わせフォーム WordPress

ここに書いたのが、そのまま実際の「お問い合わせ」のページで表示されます。

このブログのお問い合わせのページだと、こんな感じですね。

お問い合わせフォーム WordPress

書いてもらう項目を増やしたければ、「テキスト」「メールアドレス」などのボタンで増やせます。どんなものか簡単に説明すると、

  • テキスト…1行の文章
  • テキストエリア…複数行の文章
  • メールアドレス、URL、電話番号…その項目ごとに使える文字列だけ受け付ける
  • 数値、日付…数値や日付が入力出来て、下限と上限も決められます。
  • 承認確認…同意してもらいたい注意事項などをチェックボックスで設定
  • クイズ…質問を設定して答えてもらう。自分はロボットじゃないよと証明してもらう目的に使っても。
  • ファイル…画像などファイルを送付できる

などですね。テキストやテキストエリアなどは何にでも使えそうですが、メールアドレスなどは用意されてるボタンで設定した方が誤入力の防止につながります!
必要に応じて項目を追加しましょう。

例として、テキストボタンを押すとこんな画面が出てきます。

お問い合わせフォーム WordPress

  • 項目タイプ…必須かどうか
  • 名前…フォームタグの名前。このままでも大丈夫です
  • デフォルト値…最初に入ってる文字列を好きに設定できます。お名前「例:蓮野 蓮子」など、設定しておいても親切ですね。
  • Akismet…WordPressで使えるスパムを判別するプラグイン、「Akismet」を使用していれば、ここのチェックを入れればContact Form 7と連携してお問い合わせメッセージのスパムフィルタリングしてくれます。AkismetはWordPressに標準で入っていたし、たまに変なお問い合わせが届くこともあるから便利かもしれません!
  • ID属性・クラス属性…見た目のデザインをCSSで変えるなら入力を。

メール

お問い合わせフォーム WordPress

  • 送信先…お問い合わせがあったら、このメールアドレスに通知がきます。
  • 送信元…メールが来たときに表示される送信元。
  • 追加ヘッダー…メールから返信すると、このメールアドレスに届きます。直接お問い合わせしてくれた人に返信が出来るんですね。
  • メッセージ本文…お問い合わせの「メッセージ本文」欄はもちろんのこと、カスタマイズすると色んな情報を確認できます。

カスタマイズするには、先ほどの「フォーム」で使ったタグがここで使えます。
例えば、さっきのフォームで電話番号を追加したとして、

お問い合わせフォーム WordPress

保存をすると、

お問い合わせフォーム WordPress

「これらのメールタグを利用できます」のところに、電話番号のタグも追加されていますね!

このタグを、メッセージ本文など好きな所に貼れば、その情報もメールで受け取ることが出来ます。

メッセージ

あとは、お問い合わせフォームからお問い合わせしてくれた人に、正常に送信されたかなど、メッセージを残すことができます。

お問い合わせフォーム WordPress

なにか気のきいたメッセージにしておくと、ブログの高感度アップかもしれません(笑)

Contact Form 7のメールタグが使えますので、上手く使っても良いですね。

お問い合わせフォーム WordPress

これとか結構嬉しいかもしれません、多分!

お問い合わせフォーム WordPress

上とはちょっと文言違いますが、名前タグを遣うとこんな感じにメッセージが表示されます。

お問い合わせフォームの一通りの設定が終わったら、あとはWordPressで新しいお問い合わせ用ページを作るだけですね。

お問い合わせフォーム WordPress

この指示に従って、ここのショートコードをコピーしておきましょう。

WordPressでお問い合わせフォームのページ作成

このブログでは、お問い合わせフォームは固定ページで作ってます。

WordPressの「固定ページ」の項目で、新規追加を押します。

お問い合わせフォーム WordPress

するとこの画面。

お問い合わせフォーム WordPress

ここのタイトルは、ブログのお問い合わせのページに表示されるので変な名前にしないようにしましょう。

パーマリンクも、お問い合わせフォームに関連した単語にしておくといいです。

そして、本文に先ほどコピーしたショートコードを貼りつけて保存すればOK!
ページを作るのは簡単ですね^^

お問い合わせフォームをブログのヘッダーに貼る方法

最後に、せっかく作ったお問い合わせフォームのリンクをヘッダーに載せる方法をお話しましょう。

WordPressの項目から「外観」→「メニュー」に行ってもらって、

お問い合わせフォーム WordPress

固定ページの、さっき作った「お問い合わせ」にチェックしてメニューに追加。

下の方のメニュー設定では、「ヘッダー用メニュー」「フッター用メニュー」「スマートフォンメニュー」をチェック出来ます。

全部チェック入れてるので、当ブログではヘッダーだけでなくフッターにもメニューが表示されますが、ヘッダーはこんなかんじ。

お問い合わせフォーム WordPress

ばっちりお問い合わせフォームに行けますね!

まとめ

お問い合わせフォームの作成、要所要所でちょっと説明したりしてたら思ったよりも長くなりましたが、やってることは結構簡単です。

ただ、色々とカスタマイズできるので、そういう点でContact Form 7は奥が深いとも言えますね。

わたし的にはあんまりカスタマイズしなくてもこれで十分!なプラグインですので、お問い合わせフォームがあったらいいな~と思う人は、ぜひ活用してみてくださいね^^

-ブログカスタマイズ
-


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連記事

楽天アフィリエイト 枠線

楽天アフィリエイトのリンクの「外側の薄い枠線」を消す・センター寄せにする方法

わたしは楽天アフィリエイトの広告を使わせてもらっていますが、ブログにリンクを貼る時に、「余計な枠線があるなぁ…」と気になりました。 楽天アフィリエイトの画像やテキストを囲む黒い枠線。これはいいんですが …

虫眼鏡で何かを調べている男性

HTTPSでサイトを作成したのにHTTPのページがインデックスされる場合の解決方法

先日独自ドメインを取得してHTTPS、つまりSSLに対応したサイトを作成したのですが、なぜかHTTPSだけでなくHTTPのページもインデックスされたり、HTTPSのページが検索結果に表示されないといっ …

ブログ 開設

ブログの開設と作成方法を初心者向けに解説!WordPressでの始め方

初心者の頃ブログを作るっていうと、「無料ブログでいいじゃん!」「WordPressなんて難しいの使わなくても、FC2とか…もっと初心者向けなブログあるでしょ?」と思う人が多いかもしれません。 確かに無 …

頭を抱えて困った様子の女性

コピペだけでOK!STINGER 8でサイドバーが追尾せず変な位置で固定される問題の解決策

現在DigiLocusではWordPressの無料テーマSTINGER 8を使用しています。 STINGERシリーズは国内でトップクラスの人気を誇るテーマで、筆者はSTINGER 3の頃から愛用してい …

固定ページ livedoorブログ

livedoorブログで固定ページ的なものを作ってメニューバーに貼る方法

livedoorブログを作り始めたのですが、色々設定してみて「固定ページはどうやって作るの?」というところで少しとまどいました。 固定ページというのは、WordPressのブログでなら普通に使える機能 …