mailtoをちょっとだけユーザーフレンドリーにするJavaScript「jQuery Confirm mailto」

お問い合わせのフォームを作るまでもないなーという場合、mailtoで済ませてしまうことも多いかと思います。
でも、ユーザーにとっては、メーラーがいきなり立ち上がるのも不安になりますよね。
そんな時はjQuery Confirm Mailtoを利用して、いったんダイアログを挟んでみましょう。

sponsors

使用方法

jQuery Confirm Mailtoからファイル一式をダウンロード。

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="/test/js/confirm.js"></script>
  <script>
    $(document).ready(function(){     
      $('.class名').confirmMailto();
    });
  </script>
  
基本はこれだけ。
あとはmailtoにしたリンクにclassを振れば完成です。
<a href="mailto:***@aa.a" class="class名"></a> これだけだと英語のダイアログになってしまうので、jsを直で変更するか下記のオプションを利用します。

    $(document).ready(function(){     
      $('.class名').confirmMailto({
        message:  '$to にメーラーで送ってもいいですか? ', //$toには下記で設定したアドレスあるいはテキストが入ります。
        to:     'href', //hrefであればメール、htmlであればテキストが入ります 
        success:  function(){
                $('.class名').css('color','#3C3'); //成功時の色の変更
              },
        fail:     function(){
                $('.class名').css('color','#F66'); //非送信時の色の変更
              },
        callback:   function(result){
                if(result){
                  alert('メール送信ありがとうございます!'); //成功時のメッセージ
                }else{
                  alert('え、送らないの・・・?'); //非送信時のメッセージ
                }
              }
      });
    });

サンプル

メール

Javascriptサンプルページ一覧
skuare.net

sponsors