reCAPTCHA V3をMW WP Formに導入しました

先日地元のWEB制作会社の担当者の方から迷惑メール対策のために既存のフォームをmw formで作り替えて、reCAPTCHA V3を設定して欲しいというご依頼を受けました。

MW WP Formとは

MW WP FormはWordPressのお問い合わせフォームを作成できるプラグインです。

MW WP Formの公式サイト

reCAPCTHAとは

reCAPTCHA V3を設定すると以下のようなマークが右下に表示され、ボットからフォームを守ることができます。

対応内容

大まかに以下の2点を対応しました。

• 既存のPHPで作成されたフォームをMW WP Formで置き換え
• reCAPTCHA V3の導入

既存のPHPで作成されたフォームをMW WP Formで置き換え

テキストやメールアドレスの入力欄を、MW WP Formのタグに置き換えたり、自動返信メールの設定をMW WP Form上で行ったりしました。

また、MW WP Formにフォームを置き換えることで見た目の崩れが発生してしまったので、CSSでそれを修正するということも行いました。

reCAPTCHA V3の導入

reCAPTCHA for MW WP Formというプラグインを使用しました。

reCAPTCHA for MW WP Formの公式サイト

エラー発生

通常、こちらのプラグインにサイトキーとシークレットキーを入力するだけで、reCAPTCHAの導入が完了しますが、今回は上手くいかずフォーム送信時に「Invalid reCAPTCHA Secret key」というエラーが発生してしまいました。

原因は、お問い合わせページの固定ページテンプレートファイルに、MW WP Formのショートコードを記入していたことでした。

<?php echo do_shortcode('[mwform_formkey key="省略"]'); ?>

エラー解決

管理画面にショートコードを入力して、テンプレートでは以下のように管理画面の投稿内容を出力するという記述にしたら直りました。

<?php the_content(); ?>

解決のきっかけになったのはこちらの記事です。

MW WP Form に Google reCAPTCHA V3 を設置 D-Grip システム -制作部

無事、右下にreCAPTCHAのマークが表示され、フォームのテスト送信を行い、納品しました。