Contact Form 7 でWordPressに画像認証付きのお問い合わせフォームを設置する

WordPressにお問い合わせフォームを設置するプラグイン。そのままではスパム投稿を許すので、Google reCAPTCHAや、Contact Form 7 Image Captchなどの画像認証も設置します。

Contact Form 7 は複数のコンタクトフォームを管理できてその上フォームとメールの内容を簡単なマークアップで柔軟にカスタマイズしたりもできます。Ajax によるフォーム送信、CAPTCHA、Akismet スパムフィルタリング等々サポートしています。

インストール画面の紹介文

Contact Form 7のインストールと設定

  1. WordPressのプラグインのページで新規プラグインの追加をクリックして、検索フォームに「Contact Form 7」と入力します。「インストール」をクリックして、「有効化」します。
  2. プラグインのページで、Contact Form 7の「設定」をクリックすると、見本のフォームが1つあります。必要に応じて編集して保存します。
  3. お問い合わせ用の「固定ページ」を作り、設置するフォームの「ショートコード」をコピペします。

Contact Form 7の使い勝手を良くするプラグイン

Contact Form 7で検索するとたくさん出てきます。デザインやプログラムの編集を助けるもの、データベースとの連携やスパム対策など様々なプラグインが無料で提供されています。

Contact Form 7に画像認証をプラスするプラグイン

見えないフォームを挿入してロボットをはじくもの、文字を入れるものや絵を選択するものなど色々あります。 以前はグーグルの設置していましたが、今回はプラグインを入れます。(2021年11月11日)

2年前の記事で下の2つは今回はエラーが出るか試していません。検索してみたら、更新されていなかったりしたので、今回も同じものをインストールしました。(2023年1月29日)

2024年2月、休眠していたサイトを作り替えるのに、インストールして管理画面を見ると、今回はreCAPTCHAが推奨されていましたのでグーグルに戻します。インストール済みのサイトはそのままContact Form 7 Image Captchaを使っています。(2024年2月8日)

Really Simple CAPTCHA

文字を入れるタイプで一番人気のようです。有効化してもフォームの設定画面に表示されず、使えませんでした。

Eazy CF Captcha

簡単な計算を要求するものです。 重大なエラーを引き起こしたため、プラグインを有効化できませんでした。 と出て有効化できませんでした。

Contact Form 7 Image Captcha プラグインの設置

画像を選択するものです。設定するまでは英語でしたが、設置してみたら日本語で表示されました♪

  1. プラグインのページで、Contact Form 7 Image Captchaの「詳細を表示」に、ショートコードが指定されていますので、そのショートコードをコピーします。
  2. プラグインのページで、Contact Form 7の「設定」から画像認証を設置したいフォームの編集画面を開き、画像認証を挿入したい場所に、上でコピーしたショートコードを貼り付けます。

グーグルの Google reCAPTCHA の設置

最大 1,000,000 件/月まで無料。簡易版のGoogle reCAPTCHA v3 と v2 、高機能なreCAPTCHA Enterprisが選べます。個人サイトなら百万件にはなかなか届かないと思うので同じ無料なら高機能なreCAPTCHA Enterprisが良さげに見えるのですが…。

reCAPTCHA Enterprisの階段とか、信号とか、区切り方が微妙で間違えたりするのは私だけ?超簡単なContact Form 7 Image Captchaでも、スパムはたまにしか来ないので、まずはreCAPTCHA v3で試してみようと思います。

v3 Admin Console のキーを入手する
reCAPTCHA
reCAPTCHA is a security service that protects your websites from fraud and abuse.

以前v2が最新だった時の情報が残っていました。歯車アイコンの設定をクリックして、ごみ箱アイコンをクリックして削除します。新しいサイトを登録するで、V3で作り直します。

Contact Form 7 にGoogle reCAPTCHAを設置する

ダッシュボード→Contact Form 7→外部 API とのインテグレーション→reCAPTCHA →インテグレーションのセットアップをクリックして、上で入手したサイトキーとシークレットキーをコピペします。

Flamingo

Contact Form 7 と同じ作者が作成。コンタクトフォームを経由するすべてのメッセージをデータベースに保存します。

※ サイト運営費を補うため、アフィリエイトリンクを利用しています。記事に広告主の影響やPR目的の誇張はありません。

ワードプレスのプラグイン
さくらをフォローする
スポンサーリンク
La Sakura Net

コメント

タイトルとURLをコピーしました