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

2018年11月17日2020年1月10日WordPress,便利なプラグイン

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

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

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

確認画面を追加する

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

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

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

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

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

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

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

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

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

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

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