スポンサーリンク

【WordPress】お問い合わせフォーム(Contact Form 7)のスパム対策

2018年11月17日WordPress,便利なプラグイン

前回私がおこなったお問い合わせフォーム(Contact Form 7)を利用して届くスパムの対策について書きました。

この対策をおこなってからは毎日きていた海外からのスパムが来なくなりました!

今回は私がおこなったお問い合わせフォームのスパム対策を詳しく説明してみたいと思います。

注意

今回ご紹介するのはWordPressのお問い合わせフォームに『Contact Form 7』でのスパム対策方法です。

スポンサーリンク

確認画面を追加する

確認画面を追加することによりスパムを完全に防ぐことはできませんが、減らす効果はあります。
ですが、ひと手間加わるので問い合わせをしてくれるユーザーにとっても不便になり、問い合わせ件数が減る可能性があります。

ユーザーにとっても不便になりますが、スパムを少しでも減らすため、またメールの誤送の防止にもなるので導入してみるのもいいと思います。

Contact Form 7のフォームに確認画面を追加するためにはプラグイン『Contact Form 7 add confirm』を使います。

『Contact Form 7 add confirm』はContact Form7の開発者とは違う方が作ったプラグインですは、簡単に確認画面を追加できるプラグインです。

Contact Form 7 add confirmをインストールする

Contact Form 7 add confirm
Contact Form 7 add confirm

インストール方法

  1. WordPress管理画面から[プラグイン][新規追加]
  2. Contact Form 7 add confirm』を検索
  3. [今すぐインストール]して[有効化]する

フォームに確認画面を表示へボタンを追加する

インストールしたらフォームに確認画面を表示させるためのボタンを追加します。

管理画面から[お問い合わせ][コンタクトフォーム]へ進んでください。

一覧の中から使っているコンタクトフォームを選択し、フォームの編集画面を表示します。

フォームの中に[submit “送信"](送信ボタン)と書かれている部分があります。この部分の前にボタンを挿入するので、[submit “送信"]のすぐ前をクリックしますます。

編集画面上にあるボタンの中にある「確認ボタン」をクリックしてください。

「ラベル」に『確認画面へ』と入力して右下の[タグを保存]をクリックします。

すると[submit “送信"](送信ボタン)の前に[confirm “確認画面へ"](確認画面へボタン)が追加されます。

戻るボタンを追加する

続いて確認画面から戻って編集できるようにするためのボタンを設置します。

追加する場所は[confirm “確認画面へ"]と[submit “送信"]の間に入れるので、[confirm “確認画面へ"]と[submit “送信"]の間をクリックしてください。

上にある「戻って編集ボタン」をクリックし、「ラベル」欄に『戻る』や『戻って編集』と入力して右下の[タグを保存]ボタンをクリックしてください。

すると[confirm “確認画面へ"]と[submit “送信"]の間にback “戻る"(戻るボタン)が追加されます。

確認画面へボタンと戻るボタンを追加したら[保存]してください。

これでコンタクトフォームに確認画面が追加されます。
フォームに入力して確認画面が表示されるか確認してください。

確認画面のカスタマイズ

デフォルトのままだとサイトに合わないと思うので、確認画面とボタンのカスタマイズをします。

確認画面のカスタマイズ

確認画面のカスタマイズをします。下のCSSコードを[外観][カスタマイズ][追加CSS]または[外観][テーマの編集][style.css]に追加してください。

/*確認画面のカスタマイズ*/
.wpcf7c-conf {
    background-color: skyblue; /*背景色*/
    color: black; /* 文字色 */
    border: 2px solid navy; /*枠線の太さ 線種 線の色*/
    padding:10px; /*枠線から文字の余白*/
}

上では青系の設定がしてあります。ご自分のサイトに合わせて背景色・文字色・枠線の太さや色を変更してください。

ボタンのカスタマイズ
/*確認画面へ、送信ボタンのカスタマイズ*/
input.wpcf7-confirm,
input.wpcf7-submit {
    background: #039BE5;	/*ボタンの背景色*/
    color: #fff;	/*文字色*/
    border: 2px solid navy; /*枠線の太さ 線種 色*/
    padding:5px 0; /*枠線から文字の余白*/
    width: 100%; /*ボタンの横幅*/
}

/*戻るボタンのカスタマイズ*/
input.wpcf7c-btn-back {
    background-color: #ffffff; /*背景色*/
    border:2px solid navy; /*枠線の太さ 線種 色*/
    padding:5px 0; /*枠線から文字の余白*/
    width: 100%; /*ボタンの横幅*/
}

背景色や枠線の太さや色をご自分のサイトに合わせて変更してください。

戻るボタンの文字色を変更する場合は color:文字色 ; を追加してください。

ボタンの横幅を width: 100% ; (画面いっぱい)の設定にしてあります。横幅を変更する場合はwidth:横幅;を変更するか削除してください。(必要に応じて余白(padding)の変更をしてください。)

確認画面、ボタンのカスタマイズ CSSまとめ

/*確認画面のカスタマイズ*/
.wpcf7c-conf {
    background-color: skyblue; /*背景色*/
    color: black; /* 文字色 */
    border: 2px solid navy; /*枠線の太さ 線種 線の色*/
    padding:10px; /*枠線から文字の余白*/
}

/*確認画面へ、送信ボタンのカスタマイズ*/
input.wpcf7-confirm,
input.wpcf7-submit {
    background: #039BE5;	/*ボタンの背景色*/
    color: #fff;	/*文字色*/
    border: 2px solid navy; /*枠線の太さ 線種 色*/
    padding:5px 0; /*枠線から文字の余白*/
    width: 100%; /*ボタンの横幅*/
}
 
/*戻るボタンのカスタマイズ*/
input.wpcf7c-btn-back {
    background-color: #ffffff; /*背景色*/
    border:2px solid navy; /*枠線の太さ 線種 色*/
    padding:5px 0; /*枠線から文字の余白*/
    width: 100%; /*ボタンの横幅*/
}

こんな感じになります。
画像に書かれているメールアドレスは存在しません。

スポンサーリンク

スパムフィルタプラグイン『Akismet Anti-Spam』を使う

スパムフィルタプラグイン『Akismet Anti-Spam』はスパムと思われるコメントやトラックバックを自動で判定してくれるプラグインです。

Contact Form 7はこのAkismet Anti-Spamに対応しているのでAkismetを利用してスパムを防ぐ設定をします。

Akismet Anti-Spamのインストール

Akismet Anti-SpamはWordPressを導入するとインストールされています。
インストールしていない場合はインストールしてください。

[プラグイン][新規追加]と進むと1番上に『Akismet Anti-Spam』が表示されていると思うので[今すぐインストール]します。

APIキーの取得

『Akismet Anti-Spam』はAPIキー取得しないと使えません。

APIキー取得方法及び設定方法はこちらのサイトで詳しく説明されていますので参考にしてください。

コンタクトフォームにAkismetnAnti-Spamを導入

Contact Form 7のフォームにAkismet Anti-Spamの設定を追加します。

[お問い合わせ][コンタクトフォーム]使っているフォームを選択してフォームの編集画面を表示します。

フォームの名前入力欄のtext* your-name のあとに akismet:author を追加します。
[text* your-name akismet:author]⬅︎ このようにします。

メールアドレス入力欄にemail* your-email のあとに akismet:author_email を追加します。
[email* your-email akismet:author_email]⬅︎ こんな感じ

URL入力欄がある場合は同じように akismet:author_url を追加してください。

追加したらフォームを[保存]してください。

これでコンタクトフォームでAkismet Anti-Spamを使うための設定は完了です。

確認する

ちゃんと防いでくれるか確認してみましょう!

自分のサイトのお問い合わせフォームの名前に「Nude-test-123」と入れて、メールアドレスを適当に入れて「確認画面へ」をクリックしてみてください。

確認画面へボタンの下に『メッセージの送信に失敗しました。後でまたお試しください。』と表示されればOKです。

最後に

設定は非常に簡単にできます。

今回はContact Form 7での確認画面の追加とスパムフィルタプラグインを使う方法を紹介しましたが、確認画面の追加やスパム対策のツールなどを使うのはほかのメールフォームを使う場合でもスパムを防ぐのに有効な方法だと思います。

コメントスパムでお困りの方はぜひ試してみてください。

スポンサーリンク

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。