【問い合わせフォーム】Contact Form 7とreCAPTCHAを設置した時の話

目次

問い合わせフォームの設置

ブログに必須と言われている管理人への連絡先。
それが問い合わせフォーム(またはメールフォーム)と呼ばれるものです。

昔はメールアドレスをページ上に直書き(@を別の文字に表記)するケースが多かったですが、今はもうそれはしないのが普通なんですよね。
まぁ、安全面を考えれば、そのほうが絶対に良いでしょう。
無暗にメールアドレスを明かさずに済むなら、それに越したことはありません。

最近のブログを幾つか見ると、やはり固定ページの問い合わせフォームが基本のようです。
なので私も、その形で行くことにしました。
フォームの配置方法はいくつかあるみたいですが、WordPressではプラグインを使った設置を紹介しているところが多かったですね。
(プラグインの設置を前提としているところも非常に多く、事実上の基本みたいでした)

というわけでこのブログでも、プラグインによるフォーム導入で行くことに。
今回は、その際に起きた出来事を綴っていきたいと思います。

プラグイン『Contact Form 7』をインストール

WordPressにおけるメールフォームとしては、どうやらこれが基本のようです。

インストール自体は非常に簡単。
新規作成すれば、その時点でフォームは出来上がり。設置もコードを一行分埋め込むだけ。
作ったばかりのフォームはまっさら同然の状態ではありますが、それでも固定ページにちゃんと表示されたのをこの目で見た時は、思わず感激してしまいましたw

しかし流石に、そのままの状態で使うのは、いささか厳しいものがありました。

フォームの送信自体はできるのですが、初期状態のままでは全く実用的ではありません。
要らない項目もあれば、必須項目にしたい部分も。
自動返信メール機能もありますが、デフォルトの文章は完全に微妙……。
カスタマイズが必須なのは言うまでもないレベルでしたw

というわけで今度は、メールフォームのカスタマイズを行っていくことにしました。

問い合わせフォームをカスタマイズ

フォームのカスタマイズは、ダッシュボードで行っていく形です。

私の場合は『名前』と『メールアドレス』と『本文』の三つのみとして、件名は削除。
更に三つの項目全てを入力必須化させました。
あとは各種メッセージの確認と、自動返信メールの文言を調整。
項目名も変更しつつ、各項目に入力例なるものも、しっかりと仕込んでみました。

大体ちょっと検索すれば、すぐにやり方が出てきます。
やはり使っている人が多いだけに、カスタマイズ情報もかなり多いものですねw

折角なので見た目のカスタマイズも行ってみることに。
これもGoogle検索すれば出てくる出てくるw
どこぞの登録サイトのような形式とか、ちょっと可愛い系とか。
多くの方々がコピペOKとして、ソースコードを公開してくださっているのがありがたいですw

私はtableタグがあまり好きではないので、普通のフォーム形式を探しました。
そこで見つけたのが以下の記事です。
フォームの見た目が気に入ったので引用させてもらいました。

メープルの国のアリス | Yuhostyles様、本当にありがとうございます<(_ _)>

コピペさせてもらったHTMLとCSSを土台として、あれこれカスタマイズして仕上げたのが、現在のお問い合わせフォームとなっています。

……正直、メチャクチャ時間を溶かしてしまいましたw

CSSの調整に夢中となってしまい、昼間だったはずなのに気づいたら日が沈んでいましたね。
なかなか納得できなかったと言えばそうなんですが、不思議とイライラもなく、もう少しなんだけどなと思いながら考えてました。
色々と回り道みたいなこともした結果、色々と削げ落として仕上がった感じです。
シンプル・イズ・ベストとはよく言ったものかなと……。

カスタマイズは重要ですし、何だったら楽しいまであります。
しかし何事もやり過ぎは禁物であることを、妙な形で教えてくれた瞬間でしたw

スパム対策『Advanced Google reCAPTCHA』を入れる

紆余曲折あり、なんとかお問い合わせフォームは無事に完成しました。
しかしまだ必要なものがありました。

そう……スパム対策です!

どうやら『reCAPTCHA』なるものが『Contact Form 7』におススメされている模様。
プラグインからインストールすればいいのですが、更にそれをちゃんと有効化させるためには、手順が必要であるとのこと。
とは言っても実際やってみたら、それほど難しいことではありませんでした。
(無論、ネットで調べながらではありますが……)

reCAPTCHAはGoogleが出しているツールなので、Googleアカウントが必要となります。
(私は既にアカウントを持っていたので、手順を一つ省略できましたw)
公式サイトは英語ですが、GoogleChromeの自動翻訳のおかげで事なきを得ました。
そして設定を進め、お目当てのAPIキーを取得!
WordPress管理画面からインテグレーションのセットアップも完了。
無事、画面の右下にreCAPTCHAの保護を示しているマークが出現しましたw

更にreCAPTCHAの効果を、メールフォームのページのみに適用する設定を見つけました。
それが以下の記事でございます!

当ブログでスパム対策が必要なのはメールフォームのページだけなので、まさに渡りに船!
コピペOKとのことなので、早速上記ブログ様よりソースをコピーさせてもらい、それをPHPファイルにペーストして保存。
無事にメールフォーム以外の画面から、reCAPTCHAのロゴが消えました!
ありがたく設定のソースを使わせていただきました。

RETVAL | SHIROMA様、本当にありがとうございます<(_ _)>

カスタマイズの時もそうですが、コピペOKのソースには本当に助けられました。
他にもこういう感じの記事がたくさんあるんですよね。
それだけWordPressを使っている人が多いという、なによりの証拠でしょう。
改めて凄いと思わされた瞬間でしたw

送信テストは上手くいっていたのだが……?

メールフォームを作ったら、しなければならないのが送信テスト。

エラーメッセージ(必須項目が入力されていないなど)や、送信した際に送られてくる自動返信メールの内容など、問題ないかどうか自分でしっかりと確認しなければなりません。
とは言ってもやることは至極単純。
自分で項目に入力して送信ボタンを押し、その反応を見るだけです。

最初はちゃんと上手くいってました。返信メールが届いたのを見た時は感激しましたねw
……しかし何故か途中から、スパム扱いされて送れなくなってしまいました
(エラーメッセージの設定を変え、スパム扱いかどうかを分かりやすくしていた)

え? さっきまでちゃんと送信できていたのに、なんで?

これも試しに調べてみたら……また出てきましたよ、あっさりと検索結果に。
どうやら嫌な意味で、この現象も『あるある』だったみたいですw

結論から言えば、reCAPTCHAが邪魔をしていた、という感じだった模様。

とりあえず登録しているキーを削除して、新しくキーを取得し直せばいけるらしい。
そんな情報を見た私は、早速reCAPTCHAのキーを再取得。
それをインテグレーションに再入力した結果、無事に送信テスト成功。
いやー、良かった良かった……と思っていた時は平和でした。

そう……このすぐ後に、例の大きな事件が起こってしまったというわけですw
(下記の記事参照)

上記の事件を経て、無暗やたらにキーを再取得するのもよろしくないと勉強しました。
ていうかそれが普通なんですよね。少し考えれば分かる話でしたw

送信テストをする時だけ、reCAPTCHAを無効化する……とりあえず今後はそうしていきます。

テストと言ってもほんの数分だけですからね。
なんだったらテスト中だけ、フォームのページを工事中扱いにしてもいいわけですし。
別の固定ページを作り、そこでテストをする形も十分にアリでしょう。
いずれにせよ、色々と手はあるはず。
今後も模索しながら、ブログ運営を続けていこうと思います。

まとめ

問い合わせフォームの設置も、かなり時間を費やしてしまいました。

設置するだけならとても簡単なんですけどね。
そこから満足のいく形に仕上げるのは、一筋縄ではいかないと思い知りました。
(まぁそれは、他のページでも言えることなんですが……w)

また、問い合わせフォームの設置も、本来なら時間をかけなくていい工程ではあるんですよね。
言ってしまえば『連絡先コーナーを設置する』に過ぎないんですから。
それに時間をかけるくらいなら、記事の作成に時間をかけたほうが合理的というもの。
ブログを運営する上での基本とすら言えるかもしれません。

ただそれでも私は、思わずメールフォームの設置に時間をかけてしまいました。
何故なら純粋にカスタマイズが楽しかったからですw

サイトの外観を整えるのと同じく、一度手を付け出したら止まらなくなってしまったわけです。
ある意味、悪い癖と言えなくもなさそうですね。
大変でしたけど楽しかったです。正直に言えば全く後悔もしていません。
まぁ、何事も程々にしておいたほうが良いのも確かですけどねw

ちなみに問い合わせフォームはプラグインの他に、インストール型などもあります。
EasyMailがおススメとされていますね。
ただし新たにサーバーへ設置する必要があり、それが少々手間のようです。
どちらがいいかは、それこそ運営する人次第となりそうですね。

その後~ちょっとした追記

あれだけ苦労した『Contact Form 7』ですが、それに代わるものを見つけてしまいましたw

その名も『Contact Form by WPForms』というプラグインです。
正直に言えば、こちらのほうが圧倒的に簡単であり、完全に乗り換えてしまっています。
その様子を以下の記事に書きましたので、よろしければこちらもどうぞw

この記事が気に入ったら
フォローしてね!

良かったらシェアしてね!
目次