【JavaScript】お問い合わせフォームでキャリアメールを入力させない方法

お問い合わせフォーム キャリアメール web制作

ネットショップをやっていると、お客さんのメールアドレスにメールが届かないケースが多々あります。

原因はいくつかありますが、中でも面倒なのが「キャリアメール」への対応ですね…。

 

最近のキャリアメールはセキュリティが厳しく、初期設定のままだと特定のメールを受け取らない設定が施されています。こっちもキャリアメールを使わないとメールが届かないんですよ。

しかもこれ、自分側では送信したことになっているのに、相手側で届いていないことになっていますよね…。これがまた厄介。

 

そんなわけで今回は対処法の1つとして、お問い合わせフォームに個人情報を入力させる段階でキャリアメールを入力させない方法を紹介します。

JavaScriptを使い、キャリアメールが入力された場合はアラートが上がって送信させない仕組みにしてみました。

HTMLでお問い合わせフォームを作成

まずはHTMLでお問い合わせフォームを作ります。

<form metod="post" name="form1" action="データの送信先を入力">
<table style="border-collapse: collapse; margin:0px auto; border: 0 none;" >
   <tr>
      <td style="padding:10px; border-bottom: 1px solid #e0dfe3; background-color: #f5f5f5;">1、氏名</td>
      <td style="padding:10px; border-bottom: 1px solid #e0dfe3;"><input type="text" name="name" size="20"></td>
   </tr>
   <tr>
      <td style="padding:10px; border-bottom: 1px solid #e0dfe3; background-color: #f5f5f5;">2、e-mail<br>※キャリアメールは使用できません</td>
      <td style="padding:10px; border-bottom: 1px solid #e0dfe3;"><input type="email" id="mail" name="mail" size="20"></td>
   </tr>
   <tr>
      <td style="padding:10px; border-bottom: 1px solid #e0dfe3; background-color: #f5f5f5;">3、電話番号</td>
      <td style="padding:10px; border-bottom: 1px solid #e0dfe3;"><input type="tel" name="tel" size="20"></td>
   </tr>
   <tr>
      <td style="padding:10px; border-bottom: 1px solid #e0dfe3; background-color: #f5f5f5;">4、お問い合わせ内容</td>
      <td style="padding:10px; border-bottom: 1px solid #e0dfe3;"><textarea type="text" name="inquiry" rows="16" cols="60"></textarea></td>
   </tr>
</table>
<input type="submit" value="送信" onclick="return checkForm();">
</form>

 

氏名」「メールアドレス」「電話番号」「お問い合わせ内容」を入力してもらう単純なフォーム。

この後紹介するJavaScriptと連携させるため、要所にname属性を記述していますが、HTMLの内容自体はごくごく普通のものです。cssも最低限のものしか書いてません。

最後に設置してある「送信ボタン」のクリックが起点となりJavaScriptが機能します。

1行目にあるformタグのaction属性には、CGIなどそれぞれが使うデータの送信先を入力してください。

JavaScriptを使ってキャリアメールの入力を拒否

続いて本題のJavaScript。

フォームに入力された値をチェックし、その一部にキャリアメールのドメインが入っていたら「キャリアメールは使用できません」というアラートが出ます。

<script>
function checkForm(){
   if(document.form1.mail.value.search("ドメイン1") !== -1||document.form1.mail.value.search("ドメイン2") !== -1){
      alert("キャリアメールは使用できません");
      return false;
   }else{
      return true;
   }
}
</script>

キャリアメールのドメインが含まれていないかチェック

上記の例でいうと、「ドメイン1」と「ドメイン2」のところにキャリアメールのドメインを入力します。

document.form1.mail.value.search("キャリアメールのドメイン") !== -1

入力されたメールアドレスの中に、ここで入力した文字列が含まれている場合はfalseを返すといった内容。

これにより、キャリアメール以外のメールアドレスを入力しない限り先に進ませないようにしています。

 

ちなみに、入力拒否するドメインを増やしたいときは、「OR演算子(||)」を使って条件式を増やしてください。

これでメール対応の負担を軽減できます

キャリアメールを一切使わせないというかなり荒業な手段ではありますが、これでメール対応の負担はかなり軽減できます。

届かないのに頭を悩ませてメールを送る時間ほど無駄なことはありませんから…。

メール対応に追われ頭を悩ませているショップにとっては有効な手段かもしれません。