メールフォームを簡単設置/WPプラグイン「Contact Form 7」

Contact Form 7のタイトル画像


WordPressプラグイン「Contact Form 7」

簡単にお問い合わせのメールフォームを作成するプラグイン。「シンプル、でも柔軟」というコンセプトにあるように、使いやすさとカスタマイズ性に優れています。

インストール方法

  • (1)管理画面左側「プラグイン」から「新規追加」でこのプラグインを検索
  • (2)「いますぐインストール」をクリック
  • (3)「プラグインを有効化」をクリックして有効に

インストール方法をもっと詳しく

参考までにダウンロードサイト

はじめに

 メールフォーム(※)を用意することは、特に企業サイトには必須です。コンタクトを求める顧客らステイクホルダーに対し、問い合わせ窓口を用意し、それに対応することは重要なのです。例えば、隠れたニーズを発見したり、クリームを対処することで顧客満足を向上させる可能性もあるのです。サイトによっては、資料請求など問い合わせ内容によって複数メールフォームを用意していたりします。

そもそもメールフォームとは何ってことですが、

※メールフォーム
Webサイト上のフォーム欄に入力した内容を、指定したメールアドレスへ送信できるメール機能のこと。フォーム欄は目的用途に応じてカスタマイズをすることができる。アンケートや感想を受け付けたり、問い合わせ用の窓口などを作成したりする場合に使用されている。
出典:IT用語辞典(NTTコミュニケーションズ)より

 言葉だとあれですが、いろいろ便利ということです。

 今のソーシャル時代は、facebookやtwitterなど新たなアクセスポイントができいますのでそれでいいじゃんという声もあるかもしれませんが、公式サイトのデフォルトとして、WEBサイトの問い合わせは確実に設置した方がいいと思います。
 
 そもそもメールフォームのメリットですが、

<メールフォームのメリット>

  • メールアドレスを非公開→スパムの減少によるセキュリティ向上
  • 入力ミスや不足をチェックしやすい→返信の時間的なロスの現象
  • 自動返信機能あり→ユーザビリティの向上
  • 電話よりもコスパ高い→時間的、作業的コストの現象

 などあります。

 ただ、Webサイトに自作でメールフォームを構築すると、CGIやらPHPが使えるサーバーで、form要素でHTMLコードを書いてなどして作るのですが、まー、いろいろと面倒い。詳しくない人はまず挫折しそう。
 じゃ、メールフォームのレンタルサービスって手もあるのですが、デザインなど不満もあります。
 
 「便利だけど、構築はメンドイ」メールフォームですが、WordPressでサイトだと簡単です。プラグインだけで完結するのです。

 今回のプラグイン「Contact Form 7」は、メールフォーム界で人気のプラグインで、どの参考書もデフォルトのごとく紹介してるものです。

 これだけでもWordPress使って良かったと思えます。
 
 また人気プラグインだけにいろいろサードパーティー的に強化するものも出てきて、例えばセキュリティをアップさせるなどのものもあります。

 ぜひ活用したいです。 例えば、こんなプラグイン。

 このプラグインは日本の方が制作されたようです。公式の作者様のサイトがありますので参考までに。
 

有効化後の設定、使い方

 何もカスタマイズしないデフォルトのやり方です。
 
 有効化後に、プラグインの「Contact Form 7」の設定に表記された、下記のショートコードをコピーします。

お問い合わせ用に作成する固定ページに、コピーしたコードを貼り付けます。

無事、お問い合わせフォームが完成しました。

非常に簡単です。

CSSでデザインカスタマイズ

デザインがもの足りないと思っている方も、CSSを加えるなどして変更できます。

例えばこんな感じに入力欄を大きくするなど変えてみました。

contact10

.wpcf7-form{
width:90%;  
magin:0 auto;
}
.wpcf7-form {
    padding: 20px; 
    border-radius: 20px
}
.wpcf7-form span.hissu  {
    color: #aa0000; 
    font-size: smaller
} 
div.wpcf7 input{
  padding: 10px;
  border: 1px solid #ccc;
  width: 60%;
  background-color: rgba(204, 204, 204, 0.2)
  }
div.wpcf7 input.wpcf7-submit{
  padding: 10px;
  width:60%;
text-align: center 
  }
div.wpcf7 textarea{
  padding: 10px;
  border: 1px solid #ccc;
  width: 60%;
  height: 10em;
  background-color: rgba(204, 204, 204, 0.2)
  }

WPで作ったデモ

項目の追加

 標準でなく、項目を追加したい場合は、右のタグの追加で行います。

 例えば、問い合わせの際に「性別」の項目を追加するとします。

「タグの作成」をクリックし、現れた項目の中からラジオボタンを選択します。

 Contact

 選択項目に今回ラジオボタンの選択項目を追加します。下に現れたコードを左のゾーンにコピーします。

 Contact Form 7の設定31 

また、追加した項目をコピーし、受信メール設定の項目に貼付ける。
Contact Form 7の設定33

公開を確認します。

Contact Form 7の設定32
 
これは一例ですが、必須の有無など必要な設定はここで行います。

受信メールの設定は、フォームの下の、メールゾーンで行います。先ほどの男女の時のように項目を貼付けて、利用します。

スパム対策(Akisme)

Akismet によるスパムフィルタリングです。

WordPressプラグイン「Akismet」が前提として必要です。もし利用していない方はこちらをご覧ください。

 有効化後、タグ作成をクリックすると、各項目に「Akismet」を使うチェックボックスが現れますので、これをクリックすれば「Akismet」を追加したコードが下に現れますのでこれをコピーします。
Contact Form 7の設定33

この名前やメールアドレスなど最低1個がセットされていた場合、Contact Form 7 がAkismetに送信しスパムを判定するようです。

作者様の説明はこちら。

これらのオプションの最低1個がセットされている場合に(ただし正確な判定のためにはこれらすべてのオプションをセットすることを推奨します)、Contact Form 7 は送信者のすべての入力内容、および送信行動に関係したすべての情報を Akismet に送ります。そして、Akismet はその送信がスパムらしいかどうかを判定します。
Akismet がスパムと判定すると、Contact Form 7 はメールの送信をキャンセルし、メッセージ送信に失敗した旨のメッセージを表示します。スパムと判定されたことによる場合は応答メッセージにオレンジのボーダーラインが付くのでそれがわかります。
出典元:Contact Form 7「Akismet によるスパムフィルタリング」より

スパム対策(CAPTCHA)

 スパム対策のため、「Contact Form 7」を拡張するプラグインがあります。これはCAPTCHA(キャプチャ)を設置することでスパム対策します。

まとめ

メールフォームを設置したい方にとってはありがたいプラグインです。設定方法を覚える必要はありますが、管理画面上で作れてしまうのはラクです。

参考

お問い合わせフォームプラグイン「Contact Form 7」カスタマイズまとめ

LINEで送る
Pocket

タグ:

WordPressこれで学びました

  • WordPressの参考書は、制作ものが多いけど、この本はSEOに特化した割り切りが良い。初めてWordPress導入し、SEO対策をどうしようと悩んでいた時に購入しました。
     WordPressは基本的にはSEOに優れたCMSでありますが、能力を最大化するには、パーマリンク等のSEOに適した設定やSE対策のプラグインなどでパワーアップさせる必要があります。読んだ時は、目から鱗が落ちる内容で、当初はそのまま実践してました。
     また、WordPressだけでなく、基本的なSEO対策の本として、キーワードやタイトル設定なども勉強になりました。

コメントを残す