海外からの迷惑メールが多く届いて驚いたことはありませんか?導入後にやっておきたい設定をまとめました。サイトを作成する際、WordPressを利用することが主流になってきました。便利なプラグインも多種開発されています。使うプラグインは気軽に導入しますが、攻撃対象になることもあります。便利に使いたいと思うこともあります。7」もWordPress用のプラグインです。ja.wordpress.org/plugins/contact-form-7/手軽に複数のお問い合わせフォームを設置できるので、使っている方も多いのではないでしょうか。自分の備忘録も兼ねて、導入後に設定したいポイントをまとめます。7」はメジャーなプラグインなので迷惑メールの対象として狙われやすく、海外からの迷惑メールが大量に届くこともあります。迷惑メールは手動ではなくBotと呼ばれるプログラムで送信されています。Bot対策として「reCAPTCHA」を設定します。フリー百科事典『ウィキペディア(Wikipedia)』ja.wikipedia.org/wiki/ReCAPTCHAフォームからメールを送信するときに、ゆがんだ英文の画像が表示されることありますよね。「表示されている文字を入力してください」とパスワードのように入力します。Botでは判読できない文字を利用して、人間かBotかを区別する仕組みです。v3」と呼ばれるシステムで、複雑な文字を入力しなくても人間かBotかを自動で判別しています。reCAPTCHA機能の設定reCAPTCHA機能は、Googoleのサイトから「サイトキー」と「シークレットキー」を取得し、自身のWordpressに設定します。キーを取得したら、コピー&貼り付けで簡単に設定できます。7contactform7.com/ja/recaptcha/reCAPTCHバッジをフォーム画面のみに表示reCAPTCHAの設定を完了すると、デフォルトの設定ではサイトの全ページにreCAPTCHAのバッジが表示されます。7を使用しているページだけに適用させます。下記サイトを参考に、テーマのfunctions.phpへコードを追加します。※ご注意functions.phpの編集はWordpressの動作に影響が出ます。バックアップを保存してから作業してください。下記スクリプトは公式ではありませんが、私の運用している複数のサイトで利用しています。今のところ問題なく稼働しています。)によると、「本人による同意する旨の確認欄へのチェック」することにより「本人の同意」を得ていると判断されます。承諾確認チェックボックスを設置することで、海外からのスパムメールをある程度防ぐ効果もあります。7では簡単にチェックボックスを設置できます。7contactform7.com/ja/acceptance-checkbox/便利に使いたいデフォルトの設定でも使えますが、こうだったらいいな...と思うこともあります。見た目と使いやすさについて参考サイトを紹介します。CSSで見た目をわかりやすくスタイルシート(CSS)で見た目を整えると、必須項目や入力箇所が分かりやすくなります。コピーして使えるCSS、HTMLを公開しているサイトも多数あります。メールフォームのデザインは、テーブル(table)、定義リスト(tl)、ブロックレベル(div)などを利用してカスタマイズされています。最近のCSSではレスポンシブにも対応しているので、サイトの用途やテーマに合ったCSSを選んでください。CSS、HTMLの知識があれば、カラーの変更なども簡単にできます。Form7をCSSでおしゃれにカスタマイズ【コピペ用】|misaMAGshimamisa.com/contact-form7-css/郵便番号から住所を自動入力WordPressのプラグインです。郵便番号を入力すると、自動で住所が入力されます。Form7を利用していると設定がより簡単にできます。命名ルールから次の入力項目を判断する方法と、入力項目に既定のname属性を設定する方法があります。入力項目の数やレイアウトで設定は違うので、それぞれのサイトに適した方法を利用してください。Form7は確認ページがないんですよね。プラグインで表示させることもできるようですが、更新がされていないものや、レイアウトに手間がかかるものや、いまいちコレ!というおすすめがありません。おススメあれば教えてください^^;トラッキングのためにトラッキングとは、サイトにおけるユーザーの行動や情報を収集する機能です。ユーザーがフォームを書き込んで、送信したか離脱したか、解析することもあります。Googleアナリティクス対応のためにサンキューページへリダイレクトさせたい方もいるでしょう。Form7のサイトではリダイレクト方法も掲載されていますが、「トラッキングする簡単な方法」を推奨しています。7contactform7.com/ja/tracking-form-submissions-with-google-analytics/今後、GA4に変わった場合は対応どうなるのかしら...。なんだか面倒そう...。思ったあなたには、WordPress公式プラグイン「QAアナリティクス」をおススメします。タグやコードの設定は不要、導入するだけでアクセス解析できますよ。Form7で作成したメールフォームから送信テストをしても、アイコンがくるくる回るだけで動作しないことがありました。新しくページを作って設置すると送信できるのに、お問い合わせページからはくるくる...プラグインの干渉?バージョン?何か設定がおかしい?しばらく悩んでから、アドレスバーの違いに気づきました。お問い合わせページへのリンクをうっかり「http://~」に設定していたため、「保護されていない通信」になっています。「https://~」でテストしたら、すんなりと送信できました。サイト構築中でサーバーやBasic認証の影響かもしれません。調べても原因がわからず悩んだので、おまけで書いておきます。フジダイデザイン系の業務あれこれ担当。息抜きでおもしろく読んでいただける内容をお届けいたします。