この記事は、a-blog cms Advent Calendar 2023 の17日目の記事となります。
営業メール多過ぎ問題
最近、お問い合わせフォームから「業務提携したい」「コーディングできます」などと書いた営業メールが多数届きます。
正直なところ架空のサイトだけしか載せていないようなポートフォリオを載せたコピペメールを送りつけられても、仕事を依頼しようという気にはなりませんし、撲滅できないまでも少しは通知を減らしたい。そこでメールフォーム内に書かれてある特定のキーワードが入力された場合、送信できない仕組みを考えてみました。
Javascriptのみを使う方法
とりあえず「提携」「パートナー」「稼働時間」の3つのキーワードを使って試してみましょう。以下のフォームにいずれかのキーワードを入力してください。
id="inquiry" のテキストボックスの内容をリアルタイムでチェックして、NGワードが含まれていれば、送信ボタンを押せなくなる(disabled)にします。
わざわざソースコードをチェックして、NGワードを回避する文章に直す人には効果はありませんが、「営業メールお断り」という文章を読んだ上で、チャレンジを続ける人のメールは読んでもいいかなという気もします。返事しないとは思いますけど。
ソースはこんな感じに。
<textarea id="inquiry" name="inquiry" rows="3"></textarea>
<button type="submit" id="btnConfirm">内容の確認画面へ</button>
<div id="spamMessage"></div>
<script>
var inquiry = document.getElementById("inquiry");
var regex = /提携|パートナー|稼働時間/;
function checkKeywords() {
if (regex.test(inquiry.value)) {
document.getElementById("btnConfirm").disabled = true;
document.getElementById("spamMessage").innerHTML = '<p class="error-text acms-margin-top-medium"><i class="icon-attention"></i>フォームからの営業メールはお断りいたします。</p>';
} else {
document.getElementById("btnConfirm").disabled = false;
document.getElementById("spamMessage").innerHTML = '';
}
}
inquiry.addEventListener("input", checkKeywords);
</script>送信ボタンを押させないという比較的にシンプルで穏当な対策ですし、実装も簡単です。
Javascriptとフォームのバリデーターの併用
次はフォームのバリデーター機能を使ってみましょう。今回はJavascriptではない方のバリデーターを使います。
複数の文字列をバリデートの対象にするには、正規表現を使います。a-blog cmsには、もともと正規表現のバリデート機能もあるので、そのまま利用しようとしたのですが、テキストエリアで改行が入ると上手く動作しません（上手く動作する正規表現があれば教えてください。すぐに記事を直します）。
そこでJavascriptを仕様して、 まずは id="inquiry" のテキストボックスの中身をチェックして改行を取り除いて、inquiry_checkという入れ物を作り、その中身をCMSでチェックすることにしました。
以下、当サイトのフォームで実装済みです。ダミーではないので、むやみに送信しないでお試しください。
<!-- 本来のテキストボックス -->
<textarea id="inquiry" name="inquiry" >{inquiry}</textarea>
<input type="hidden" name="field[]" value="inquiry" />
<!-- チェック用の追加記述 -->
<input type="hidden" id="inquiry_check" name="inquiry_check" value="{inquiry_check}"></input>
<input type="hidden" name="field[]" value="inquiry_check" />
<input type="hidden" name="inquiry_check:v#regex" value="^(?!.*提携|.*パートナー|.*稼働時間|).*$" id="inquiry_check-v-regex" />
<!-- BEGIN inquiry_check:validator#regex -->
<p class="error-text large"><i class="icon-attention"></i>お問い合わせフォームからの営業メールはお断りいたします。送信されても絶対に返信しません。</p>
<!-- END inquiry_check:validator#regex -->
<!-- inquiryの中身をリアルタイムで inquiry_checkに -->
<script>
var inquiry = document.getElementById("inquiry");
function removeNewline(text) {
return text.replace(/\r?\n/g, '');
}
function reflectInput() {
var inquiryWithoutNewline = removeNewline(inquiry.value);
document.getElementById("inquiry_check").value = inquiryWithoutNewline;
}
inquiry.addEventListener("input", reflectInput);
</script>NGワードを含んだまま送信するとこのようにエラーが出ます。
先ほどのJavascriptだけの実装に比べると、やや手間が掛かりますが、送信ボタンを押すまでエラーの文言がわからないというメリットがあります（NGワードは見れてしまう）。
もちろんJavascriptでバリデートすれば、もっとスマートなのですが、あえて使わないのは「単なる嫌がらせ」です。
おまけ：文字数を制限する方法
また以前に住所欄に長々と宣伝文を入力してくる人がいたので、80文字を超える場合に以下のようなエラーを出すようにしています。
<input type="text" id="address" name="address" value="{address}">
<input type="hidden" name="field[]" value="address" />
<input type="hidden" name="address:v#maxLength" value="80" />
<!-- BEGIN address:validator#maxLength -->
<p class="error-text"><i class="icon-attention"></i>住所が長すぎます。住所に宣伝を入れるようなマナーの悪い会社からの営業メールは固くお断りしております。</p>
<!-- END address:validator#maxLength -->フォームオプションを見直そう
NGワードを多く設定しすぎると、本来受けるべき問い合わせをブロックすることになりかねないため、それほど汎用性が高いとは思えませんが、a-blog cmsのフォームオプションは結構豊富なので、いろいろと工夫したフォームを作れますので、一度目を通すことをおすすめします。
フォームオプション | リファレンス | ドキュメント | a-blog cms developer
a-blog cms developer
validator ( v ) フィールドを検証する設定項目です。”validator#required” は “v#required” と省略することができます。 次の例では、”mailaddress” という名前のカスタムフィールドを追加...
多機能なCMSなので、使ったことがない機能も多いわけですが、Advent Calendarの時期にはいろいろ情報集めがはかどるので助かりますね。
それでは皆さま、よいお年を！