バズログ BUZZLOG

MENU

ホームページ制作

WordPressで問い合わせフォームを表示する方法とスパム対策

かまとりーぬ 3

目次

WordPressにお問い合わせフォームを作成したい!

上記の様にお考えではありませんか?

ホームページやブログに設置する事で、仕事に繋がったりユーザーの満足度向上に繋げる事が出来るので問い合わせフォームは作成しておいた方が良いアイテムです。

でも問い合わせフォームってなんだか設置するのが大変そうですよね。

今回使用するのはプラグインのContact Form 7です。

Contact Form7を使用する事で、本当に簡単に問い合わせフォームを作成する事が出来ます。

さっそく作成方法を解説していきましょう。

1:問い合わせフォームの作成方法

Contact form 7

問い合わせフォームを作成する時に便利なのがプラグインのContact Form 7です。

Contact Form7を使用すれば、簡単に問い合わせフォームを作成する事が出来ます。プラグインインストールから、作成方法までの全手順を紹介しましょう。

1-1:プラグインをインストールする

問い合わせフォームを作成する為に必要なプラグイン「Contact Form 7」をインストールして有効化しておきましょう。

Contact form 7

1-2:Contact Form 7の設定をする

プラグインを有効化後、Contact Form 7で設定を行います。

WordPressメニューバーに「お問い合わせ」が追加されているのでクリックして開きましょう。

(1) 「お問い合わせ」を開く

Contact form 7

(2) コンタクトフォーム 編集ページ

お問い合わせフォームの編集ページになります。

一覧が表示されている部分の「コンタクトフォーム1」を開きましょう。

Contact form 7

(3) お問い合わせフォームの項目編集画面

お問い合わせフォームで表示される項目の編集画面になります。

項目を編集したい箇所がなければ、このまま固定ページにお問い合わせフォームを表示させてみましょう。

項目の追加方法は2章で詳しく解説します。

Contact form 7

1-3:表示させたい箇所へショートコードを貼り付ける

お問い合わせフォームを表示させたい箇所で表示させる方法を紹介していきます。お問い合わせフォーム編集ページ上部の「ショートコード」を表示したい部分の「ウィジェット」や「テキスト」に貼り付けましょう。

(1) ショートコードをコピー

Contact form 7

(2) 表示させたい箇所にショートコードを貼り付ける

表示させたい箇所にコピーしたショートコードを貼り付けて下さい。

今回は固定ページ(お問い合わせページ)のビジュアル部分に貼り付けます。

Contact form 7

たったこれだけで、お問い合わせフォームは完成です。

プレビューで見てみると以下画像の様に表示されます。

Contact form 7

2:問い合わせフォームの項目を増やす方法

問い合わせフォームの項目をもっと増やしたい!

Contact Form 7で設置したデフォルトの問い合わせフォームには

  • 名前
  • メールアドレス
  • 題名
  • メッセージ本文

上記4つの項目が入っています。

Contact Form 7のタグを使えば簡単に項目を追加する事が可能です。

項目を追加する方法について紹介していきましょう。

2-1:項目の追加手順

お問い合わせフォームに項目を追加する方法を紹介します。

(1) お問い合わせ➡︎「コンタクトフォーム」を選択

Contact form 7

(2) 項目を追加したいフォームの「編集」をクリックして開く

Contact form 7

(3) 項目を追加したい部分をクリックしてから「タグ」を選ぶ

項目を挿入したい部分をクリックしてから、画面上部のタグ部分から追加する項目を選びましょう。

Contact form 7

(4) 「タグを挿入」をクリック

必須項目にしたい場合は、画面上部の必須項目部分に「✔︎チェック」を入れます。

その後、画面下の「タグを挿入」をクリックしましょう。

Contact form 7

(5) 項目が追加される

項目が追加されています。

「電話番号」と書かれている部分も好きに名前を変更する事が可能です。

項目追加後は、画面下の「保存」をクリックして変更を保存しましょう。

Contact form 7

プレビューで項目の追加が出来ているか確認してみましょう。

Contact form 7

きちんと項目が追加されていれば完了です。

3:迷惑メールとスパム対策

Akismet Anti-Spam

お問い合わせフォームを作成した時に心配なのが迷惑メールスパムの被害ですよね。

大量のメールが届くだけでも迷惑ですが、それ以上にウイルスに感染してしまう可能性もあるので出来るだけ対策を取っておきましょう。

Contact Form 7を使ってお問い合わせフォームを作成した際に、一緒に使う事が出来る便利なプラグインがあります。

  • Akismet Anti-Spam

上記プラグインはスパムをブロックする事ができて、1度取得すれば複数で使用する事も可能です。

迷惑メールやスパムが届く前に事前に対策をとっておきましょう。

取得方法から設定完了まで詳しく紹介します。

3-1:プラグインをインストール

スパム対策に使用するプラグインをインストールしましょう。

Akismet Aniti-Spamとプラグイン新規追加画面で検索し”インストール後”に有効化して下さい。

Akismet

3-2:Akismet Anti-Spamの「APIキー」を取得

Akismetのプラグインを有効化すると画面上部にバーが表示されます。

APIキーを取得して使用できる様にしていきましょう。

(1) 「Akismet アカウントを設定」クリック

Akismet

(2) 「APIキーを取得」を選択

Akismet

(3) 画面が切り替わります。下へスクロールして下さい。

Akismet

(4) 一番左の「Get started with Personal」をクリック

Akismet

(5) 必要事項を入力し「アカウントを作成」をクリック

  • メールアドレス
  • ユーザー名
  • パスワード

上記3項目を埋めて「アカウントを作成」をクリックします。

Akismet

(6) 料金を¥0に変更する

画面右側の赤枠で囲った部分が¥4,500と表示されていて、左側にクレジットカード情報の入力欄が出ています。この状態だとお金がかかってしまうので、赤枠で囲った料金部分を一番左へスライドして下さい。

Akismet

(7) ¥0にして「URLと氏名」を入力する

料金部分を¥0にするとクレジットカード情報の入力欄が消えます。

  • ① サイトURL
  • ② 氏名

上記2つの部分を入力し一番下の「CONTINUE WITH PERSONAL SUBSCRIPTION」をクリックしましょう。

Akismet

(8) 「Activate this site」をクリック

Akismet

(9) APIキーの取得完了

APIキーが表示され、取得は完了です。

画面下の「変更を保存」をクリックしておきます。

Akismet

APIキーを取得しただけでは完成ではありません。

Contact Form 7で文言を加えましょう。

3-3:Contact Form 7で文言を加える

スパムをブロックする為に、Contact Form 7でも文言を追加する必要があります。

(1) お問い合わせ➡︎「コンタクトフォーム」を選択

Contact form 7

(2) スパムをブロックさせたいフォームの「編集」をクリック

Contact form 7

(3) 「akismet:author」と加える

text*部分にakismet:authorと書き加えます。

  • 名前:変更前 [text* your-name] ➡︎ 変更後 [text* your-name akismet:author]
  • メールアドレス:変更前 [email* your-email]➡︎ 変更後[email* your-email akismet:author_email]
  • URL:変更前 [text your-url] ➡︎変更後[text your-url akismet:author_url]

上記の様にtext部分に書き加えましょう。

「akismet:author」の書き加えは1つでも効果はありますが、より多く書き加えた方が効果が増します。

Contact form 7

3-4:スパムメールがブロックされ完了

お問い合わせフォームに文言を書き加えたら、本当にスパムがブロックされるか試してみましょう。

(1) スパムを送信

スパムメール

(2) スパムはきちんとブロックされる

正常なお問い合わせではないと判断されて、画面下にエラー文が表示されています。

きちんと設定が完了した事を確認したら設定は完了です。

スパムメール

まとめ

WordPressで作成したブログやサイトに「お問い合わせフォーム」を作成する方法について詳しく紹介してきました。お問い合わせフォームは便利なプラグインContact Form 7を使用すれば簡単に設置する事が可能です。

また迷惑メールやスパム対策も、AkismetプラグインであればContact Form 7と一緒に使用する事が可能です。ぜひ参考にしてみて下さい。

  • このエントリーをはてなブックマークに追加

  • 3

    • このエントリーをはてなブックマークに追加
    目次

    関連記事