プラグイン

Contact Form 7の設定や使い方とカスタマイズ方法

Contact Form 7 設定 使い方 カスタマイズ 方法

ワードプレスのプラグインContact Form 7は、お問い合わせフォームを作成するプラグインです。

ブログを始めたばかりやアドセンスブログ、特にトレンドブログを運営しようと思った人の中には….

問い合わせフォームなんていらなくね?(´゚д゚`)

って思っている人もいると思うんですよね~初めてサイトを運営した時に、実際僕はそうだったんで・・・

お問い合わせフォームは、なにも訪問者の方とコミュニケーションを取るためだけのものではありません。

ブログ運営においてリスク回避になるのでとても大切で、他に良い情報をもたらしてくれる可能性があるんです。

それでは、Contact Form 7の設定や使い方、そしてカスタマイズ方法について解説します。

Contact Form 7の設定

Contact Form 7 設定

まずあなたのワードプレスにContact Form 7を導入してください。

ワードプレスの導入方法は以下を参照してくださいね。

ワードプレスのプラグインの使い方(インストールと有効化)ワードプレスはそれだけで、すぐにブログを始めることが出来ますが、SEOやユーザビリティ、作業効率化などから見ると、やはり物足りないんです...

ワードプレスの管理画面の左側のメニューの【お問い合わせ】をクリックします。

Contact Form 7 設定

 

デフォルトの状態だと【コンタクトフォーム1】がありますので、【コンタクトフォーム1】をクリックします。

Contact Form 7 設定

 

以下がデフォルトの設定画面の状態です。

Contact Form 7 設定

名前はデフォルトは「コンタクトフォーム1」となっていますが、将来的にフォームを増やしていった時に分かりづらくなるので、お問い合わせなど、分かりやすい名前に書き換えておきましょう。

そしてメールタブの項目は

  • お名前(必須)
  • メールアドレス(必須)
  • 題名
  • メッセージ本文
  • 送信

が設定されています。

URLや電話番号など、必要に応じて上部の設定ボタンで設定ることが出来ます。

最後に【保存】をクリックして完了です。

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のカスタマイズ方法

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とAkismetを連携させる

お問い合わせフォームにチェックボックスを設置することで、ユーザビリティだけでなくスパムメール対策にもなりますが、さらにAkismetを連携させることで、スパムメールをブロックしてくれます。

Akismetプラグインをまだ導入していない人は、先にAkismetを導入しておきましょう。

Contact Form 7 カスタマイズ 方法

Akismetと連携できるのは「メールアドレス」タグ、「テキスト」タグ、「URL」タグです。

今回は「お名前(必須)」と「メールアドレス(必須)」をAkismetと連携させてみます。

まずお名前の[text* your-name]を消して、上部設定ボタンの「テキスト」をクリックします。


 

Contact Form 7 カスタマイズ 方法

名前はyour-nameに変えます。Akismetにチェックを入れます。

この項目を必須にしたのであれば、一番上の項目タイプにチェックを入れてください。

ショートコードは以下のように変わります。

[text* your-name] ⇛ [text* your-name akismet:author]

「タグを挿入」をクリックします。


 

メールアドレスの方は設定ボタンの「メールアドレス」をクリックします。

Contact Form 7 カスタマイズ 方法

設定は前述した「テキスト」の設定と同じです。

名前をyour-emailに変えます。Akismetにチェックを入れます。

この項目を必須にしたいのであれば、一番上の項目タイプにチェックを入れてください。

ショートコードが以下のように変わります。

[email* your-email] ⇛ [email* your-email akismet:author_email] 

「タグを挿入」をクリックします。

ソースコードが以下のように変わったことを確認して、保存しましょう。

Contact Form 7 カスタマイズ 方法

これで、お名前(必須)欄とメールアドレス欄がAkismetと関連付きました。


 

次に動作確認してみましょう。名前を「viagra-test-123」にして動作確認します。

「viagra-test-123」はAkismetにスパムとして認識されるテスト用の送信名です。

Contact Form 7 カスタマイズ 方法

送信ボタンを押すと、下に上記のようなメッセージが出ました。これで動作が確認できました。

ちなみに下のメッセージも設定できます。

Contact Form 7 カスタマイズ 方法

メッセージタブをクリックするとメッセージの一覧がありますので、好みでメッセージを書き換えてみても良いでしょう。

ABOUT ME
mori
mori
元会社員/現フリーランサー&サウンドクリエイター。 ブログメディアの運営で月収50万達成。人生をより面白い方向へ実践中。 作編曲/ビートメイク/映像音楽・舞台音楽の制作・編集