メールアドレスを指定できるmailtoリンクの設定方法や便利なスクリプト
多くのWebサイトでお問い合わせにはフォームを設置しているかと思います。入力ミスのチェックなど機能のついたものも多いのですが、初心者の方には設置のハードルが高く感じるかもしれません。そんな時は手軽に導入できるmailtoリンクを使ってみましょう。リンクをクリックするとユーザーがいつも使っているメールアプリが起動するので、送信元のメールアドレスを入力する手間も省けますよ。懸念されやすい迷惑メールの対策をしているスクリプトも紹介します！
↑私が10年以上利用している会計ソフト！
mailtoリンクの使い方
a タグの href 属性に mailto:メールアドレス と記述すればOK。リンクテキストをクリックするとメールアプリが起動し、メール作成画面が表示されます。
細かい設定をしたい場合は必要項目を mailto:メールアドレス?項目 という形式で ? を使って続けて記述していきます。複数の項目を指定する場合は & を使ってつなげましょう。
件名
subject でメールの件名を指定できます。
<a href="mailto:hello@example.com?subject=件名">お問い合わせ</a>
本文
body でメール本文を指定できます。
<a href="mailto:hello@example.com?body=本文のテキスト">お問い合わせ</a>
CC
cc で mailto で書いたメールアドレス以外のメールアドレスを送信先として指定できます。複数のメールアドレスを指定する時は ,（カンマ）でつなぎます。
<a href="mailto:hello@example.com?cc=info@example.com">お問い合わせ</a>
BCC
bcc で mailto で書いたメールアドレス以外のメールアドレスを宛先を伏せて指定できます。複数のメールアドレスを指定する時は ,（カンマ）でつなぎます。
<a href="mailto:hello@example.com?bcc=info@example.com">お問い合わせ</a>
mailtoリンクのコードを生成してくれる「Mailtolink.me」
Mailtolink.meではメール作成画面のようなデザインでmailtoリンクのコードを生成してくれます。宛先や件名はもちろん、CC、BCCの設定もOK。自分で手打ちしなくていいので記述ミスを防げます。画面下に出てくる「Copy Code」をクリックするとクリップボードにコピーできます。
mailto:hello@example.com?cc=mana@example.com&?subject=Hello
これをそのままリンク先に指定すれば、メールアドレス宛てのリンクテキスト完成です！
<a href="mailto:hello@example.com?cc=mana@example.com&?subject=Hello">お問い合わせ</a>
通常日本語だと文字化けするので「日本語のエンコード」という作業が必要になりますが、このサイトでは自動的にエンコードされますよ。
mailto:hello@example.com?subject=%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B&body=Web%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8B%E3%82%89%E3%81%AE%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B%EF%BC%9A
上記画像にある日本語を含めた設定にすると、このような文字列がコピーできます。「表示がおかしくなっちゃった！？」と思うかもしれませんが、これで実際にメールを立ち上げるときちんと日本語で表示されます。
起動するメールの種類を選択できるようにする「MailtoUI」
mailtoリンクはユーザーがデフォルトで設定しているメールアプリを起動しますが、それが逆に不便に感じることもあるでしょう。そんな時使えるのがMailtoUI。mailtoリンクをクリックすると、以下の選択肢から選べるモーダルウィンドウを表示できるようになるJavaScriptです。
- ブラウザーのGmail
- ブラウザーのOutlook
- ブラウザーのYahoo.com
- デフォルトのメールアプリ
- メールアドレスをコピーする
通常のmailtoリンクではどのメールから送信できるか選択できないのが難点でしたが、このような選択肢があると便利ですね。
「MailtoUI」の使い方
</body> の直前にmailtoui-min.jsを読み込ませます。用意されているCDNを使ってもいいですし、ファイルのダウンロードも可能。
<body>
...
...
<script src="https://cdn.jsdelivr.net/npm/mailtoui@1.0.2/dist/mailtoui-min.js"></script>
</body>
あとは a タグに「mailtoui」というクラスをつけてmailtoリンクを貼れば完成です。
<a class="mailtoui" href="mailto:hello@example.com">お問い合わせ</a>
デモ
See the Pen
MailtoUI demo by Mana (@manabox)
on CodePen.
オプションでクラス名を変えたり、デフォルトで「Gmail in browser」などと書かれている表記を変更できます。
迷惑メール対策もできる「mailgo」
MailtoUIと同様、mailtoリンクをクリックするとモーダルウィンドウを表示できるmailgo。機能としてはほぼ同じですが、こちらでは迷惑メール対策用の「スパムレス」オプションもあります。mailtoリンクのデメリットとして挙げられる迷惑メール。気になる方はこちらを使ってみるといいでしょう。
「mailgo」の使い方
</body> の直前にmailgo.min.jsを読み込ませます。用意されているCDNを使ってもいいですし、ファイルのダウンロードも可能。
<body> ... <script src="https://unpkg.com/mailgo@0.12.2/dist/mailgo.min.js"></script> </body>
ファイルを読み込ませるだけで設定完了！特にクラスなどを付与しなくても、すべてのmailtoリンクでモーダルウィンドウが表示されます。
「mailgo（スパムレス）」の使い方
迷惑メール対策用の使い方です。以下のように a タグにそれぞれの属性を記述しましょう：
- href … #mailgo
- data-address … メールアドレスの@より前
- data-domain … メールアドレスの@より後
例えばメールアドレスが hello@example.com だった場合は
<a href="#mailgo" data-address="hello" data-domain="example.com">お問い合わせ</a>
と記述します。
デモ
See the Pen
mailgo demo by Mana (@manabox)
on CodePen.
オプションで「スパムレス」バージョンでもCC、BCC、件名、本文も属性として記述できます。詳しくは公式ドキュメントを参照してください。
昔からあるmailtoリンクですが、便利なツールやスクリプトをうまく使って取り入れるといいですね！「でもやっぱりフォームがいい！」という方は過去記事「初心者でも簡単！日本語で手軽に設置できるフォーム作成サービス3選」を参考に設置してみてください！
