当サイトではアフィリエイト広告を利用しています

WordPressお問い合わせフォーム【Contact Form 7】の作り方

「ワードプレスにお問い合わせファームを設置したい」
というお悩みを解決できるプラグイン「Contact Form 7」の設定と使い方を解説します。
こたろー
こたろー

Contact Form 7の導入方法

まずは基礎的な内容について解説しますが、スパムを防ぐためのカスタマイズについても順番に触れていきます。

WordPress管理画面で、Contact Form 7プラグインをインストール→有効化。

cf71

有効化後、管理画面左側のメニュー欄に「お問い合わせ」が表示されるのでクリック。

cf72

クリックすると、Contact Form 7設定画面が開きます。
そこにあるデフォルトの「コンタクトフォーム1」をクリック。

cf73

クリックして開くと、以下のような画面が表示されます(デフォルトの状態)
基本的にはデフォルトのままだと、以下のような表示になり普通に使う分には問題ない仕様です。

普通はこれで十分だと思いますが、
カスタマイズしたい場合には設定画面で以下のような項目を設定できます。

  1. …何でもOKです(実際のブログには違う名前が設定されるので、自分の管理しやすい名前でOK)
  2. …このままでOK(フォーム以外にもメールなどの各設定ができます)
  3. …このままでOK(これがデフォルトで、上の画面の表示になります。追加、削除したい方は④にて)
  4. …項目を追加したい場合はここから選択して加筆修正してください!

③の[ ]内にある「*」は、入力必須かどうかを選択するものです。
メッセージ本文は任意なので*がなく[textarea ]になっていますね。

以上の設定がお合わったら「保存」を押して完了です。
コードのコピーを忘れずに行いましょう。

次に、お問い合わせフォームを実際に設置する固定ページを作成します。
このプラグインは発行されたコードを固定ページに貼り付けることで、お問い合わせページができる仕組みです。
管理画面より固定ページの新規作成をクリック。

cf75

タイトルは任意です(これ「お問い合わせ」が実際にブログに表示されます)
そこの本文に、先ほど作成したフォームタグを、テキストエディタで入力します。

このままだとURL名がお問い合わせと日本語のままなので、
もし英語にしたい場合はスラッグなどで編集しましょう(例はmailにした場合)

cf76

これで「お問い合わせページ」の作成が完了しました。
以下のような形で反映されています。

見た目もシンプルできれいです。

でもでも、このままだとスパムメッセージが来るので、次項で説明するカスタマイズがおすすめです。

【おすすめ】Contact Form 7で「スパムを防ぐ」カスタマイズ

お問い合わせフォームを設置していると、
頻繁にスパムのコメントが入るようになってきます。

Akismetを設置していればあまり問題ないのですが、
できる事なら、スパムを隔離する以前に、
侵入させたくないですよね。

そこで、スパム対策に就航と言われるカスタマイズが
下記のように「チェックボックス」を設置する方法です。
※チェックしないと送信できなくする仕様です。

設定画面で「承諾の確認」ボタンを押してフォーム内に下記の文章を追加します(<label>タグと文章を加筆しています)

もし上記の例と同じ文章にしたい場合、以下コピペでご使用ください。

<label> ※送信するにはチェックを入れてください
[acceptance acceptance-734]</label>

保存すると、以下のように表示がされます。

以上がスパムを防ぐ効果的なカスタマイズ方法でした。

スパム対策は、問い合わせフォーム以外にもコメント欄への対策があります。コメントには「Akismet」で対策できます。簡単に導入できるプラグインなのでぜひ試してみてください。以下の記事で解説しています。
こたろー
こたろー

ランキング

  • この記事を書いた人

ゆーま

-WordPressツール