メールアドレスを指定できるmailtoリンクの設定方法や便利なスクリプト

多くのWebサイトでお問い合わせにはフォームを設置しているかと思います。入力ミスのチェックなど機能のついたものも多いのですが、初心者の方には設置のハードルが高く感じるかもしれません。そんな時は手軽に導入できるmailtoリンクを使ってみましょう。リンクをクリックするとユーザーがいつも使っているメールアプリが起動するので、送信元のメールアドレスを入力する手間も省けますよ。懸念されやすい迷惑メールの対策をしているスクリプトも紹介します!

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

ccmailto で書いたメールアドレス以外のメールアドレスを送信先として指定できます。複数のメールアドレスを指定する時は ,(カンマ)でつなぎます。

<a href="mailto:hello@example.com?cc=info@example.com">お問い合わせ</a>

BCC

bccmailto で書いたメールアドレス以外のメールアドレスを宛先を伏せて指定できます。複数のメールアドレスを指定する時は ,(カンマ)でつなぎます。

<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。機能としてはほぼ同じですが、こちらでは迷惑メール対策用の「spam-less」オプションもあります。mailtoリンクのデメリットとして挙げられる迷惑メール。気になる方はこちらを使ってみるといいでしょう。

「mailgo」の使い方

</body> の直前にmailgo.min.jsを読み込ませます。用意されているCDNを使ってもいいですし、ファイルのダウンロードも可能

<body>
    ...
    ...
    <script src="https://unpkg.com/mailgo@0.6.7/dist/mailgo.min.js"></script>
</body>

CDNは以下の2種類があります。どちらでもOK。

  • https://unpkg.com/mailgo@0.6.7/dist/mailgo.min.js
  • https://cdn.jsdelivr.net/npm/mailgo@0.6.7/dist/mailgo.min.js

ファイルを読み込ませるだけで設定完了!「spam-less」をしない場合は特にクラスなどを付与しなくても、すべてのmailtoリンクでモーダルウィンドウが表示されます。

「mailgo(spam-less)」の使い方

迷惑メール対策用の使い方です。以下のように 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.

オプションで「spam-less」バージョンでもCC、BCC、件名、本文も属性として記述できます。詳しくは公式ドキュメントを参照してください。


昔からあるmailtoリンクですが、便利なツールやスクリプトをうまく使って取り入れるといいですね!「でもやっぱりフォームがいい!」という方は過去記事「初心者でも簡単!日本語で手軽に設置できるフォーム作成サービス3選」を参考に設置してみてください!

シェアする

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)