WordPressでお問い合わせフォームを作成する際、多くの方が利用しているプラグインといえば「Contact Form 7」ではないでしょうか。
無料で使える上にカスタマイズ性が高く、とても便利なプラグインですよね。
私自身も日頃からContact Form 7を使用しているのですが、たまに「空メール」が届くことがありました。調べても原因や対処法が分からず、とても困っていました。
この記事では、Contact Form 7で空メールが送信される原因と、私が試して解決した方法を詳しく解説します！
同じような悩みをお持ちの方は、ぜひ参考にしてください。
目次
使用プラグインについて
問題となったフォームで利用したプラグインは下記のとおりです。
- Contact Form 7
〜WordPressに簡単にフォームを設置できるプラグイン - Contact Form 7 Multi-Step Forms
〜Contact Form 7に確認画面、完了画面を表示できるプラグイン - Flamingo
〜Contact Form 7で送信されたメッセージを保存するプラグイン
Contact Form 7 Multi-Step Formsを使用している方は、本記事と同様の方法で解決できるかもしれません！
問題となった状況
WordPressにフォームを設置して数日後、データを確認してみると、問題の空メールが届いていることが発覚しました。
Contact Form 7では、項目タイプや名前を付与したタグを挿入し、ユーザーが入力できる項目が作成されます。 その入力された内容が保存されるはずなのに、項目名が保存されている現象が起きていました。
例）お名前：[your-name] 会社名：[your-company]
ほとんどのデータは問題ないのですが、稀に届いているこの空データは一体なんだろうと思い、調査しました。
原因は容量制限？
調査の結果、原因は、テキストサイズがContact Form 7 Multi-Step Formsの制限を超えていたことだと発覚しました。 Contact Form 7 Multi-Step Forms無料版の最大テキストサイズは 4KBだそうです。
「お名前」や「会社名」などの短い項目だけだったらこの容量をオーバーすることはないと思うのですが、「お問い合わせ内容」などといった文章を入力できるテキストエリアの項目を用意する場合は、注意が必要ですね。
試しにお問い合わせフォームに長いテキストを入力し、確認ページを移動したところ、確認ページは空白のままで送信ボタンが配置され、[your-content] などの項目名のタグが付いた空データが保存されていました。
これで、問題となっていた現象を再現することができました！
解決策
問題の原因が分かったため、解決策をご紹介します。
1.有料版にアップグレードする
まずは、Contact Form 7 Multi-Step Formsをプロ版にアップグレードする方法です。
プロ版は、1画面の最大テキストサイズが５MBまでとなっております。 無料版が4KBなので、かなり容量が大きくなります。相当な文字数を入力しない限り、容量を超えることはないでしょう。
2.あらかじめ文字数制限を設ける
もう一つの解決策は、あらかじめ文字数制限を設ける方法です。 せっかく無料のContact Form 7を使用しているので、大規模なフォームでない限りは、こちらの方法を使う方が現実的でしょう。
- 最大文字数制限を設定 最大文字数を制限する”maxlength”を使用します。
例：[textarea* contact_txt maxlength:340]
※”contact_txt”は任意の名前です。
私は、少し余裕を持って340に設定しました。ブラウザや作成したフォームによって入力できる文字数は異なるので、どこまで正常に動作するか、試してみてください！ - 残文字数カウンターを設定 残文字数カウンターを表示できる”count”を使用します。
例：残り：[count contact_txt down]文字
※”contact_txt”は任意の名前です。”textarea”の名前と揃えてください。
これで、残り何文字まで入力できるか確認できるので、文字数制限を設けていてもユーザーに分かりやすいフォームが作成できると思います。
上記で紹介した、最大文字数制限のmaxlengthと残文字数カウンターのcountは、Contact Form 7で用意されているものになります。ぜひ使ってみてください。
また、「340字内でご記入ください」などと表記されていると、よりよいでしょう。
まとめ
今回は、Contact Form 7に空メールが届いた場合の原因と対処法をご紹介しました。
1.有料版にアップグレードする方法
2.あらかじめ文字数制限を設ける方法
状況に合わせて選択してみてください！ 同様の現象に困っている方のお役に立てれば嬉しいです。