HTML5

2021.10.19

HTMLでメールを送る「mailto:」の使い方【注意点も解説】

リンクに「mailto:」を使うことによって、メールソフトを起動させることができます。

スパムの標的になりやすいことから現在はあまり使われておらず、お問い合わせフォームが主流ですが、サイト・案件によっては「フォームではなくメールソフトを立ち上げてほしい」ということもあります。

今回は「mailto:」の使い方について解説していきます。

「mailto:」を使ってみよう

「mailto:」はaタグのhref属性の中で使用します。

<a href="mailto:info@example.com">メールでお問い合わせ</a>

リンクをクリックすると、「info@example.com」が送信先に設定された状態でメールソフトが立ち上がります。

「mailto:」で宛先を細かく設定する

「CC」や「BCC」を設定するすることも出来ます。

CC

<a href="mailto:info@example.com?cc=info02@example.com">メールでお問い合わせ</a>

「cc=メールアドレス」と入力します。

BCC

<a href="mailto:info@example.com?bcc=info02@example.com">メールでお問い合わせ</a>

「bcc=メールアドレス」と入力します。

「mailto:」で予め文章を設定しておく

件名を設定したい」「お問い合わせ内容の項目をメール本文に設定しておきたい」などあらかじめメール内容を設定しておきたい時があります。

そのような場合でも、全てhref属性内に入力します。

件名

<a href="mailto:info@example.com?subject=件名">メールでお問い合わせ</a>

「subject=件名」と入力します。

本文

<a href="mailto:info@example.com?body=本文のテキスト">メールでお問い合わせ</a>

「body=件名」と入力します。

「maito:」で複数項目を設定したい場合

「BCCもCCも件名も本文も設定したい!」という場合は、「&amp;」でつなぎます。

&amp;は「&」の特殊文字です。下記サンプルコードでは「&」に置き換えられていますが、入力する時は「&amp;」と入力しましょう!

<a href="mailto:info@example.com?cc=info02@example.com&bcc=info02@example.com&subject=件名&body=本文のテキスト">メールでお問い合わせ</a>

「mailto:」で改行やスペースを入力する

本文を設定する場合は、改行やスペースを入力したい時が来るはずです。

しかしそのまま改行やスペースを入れても反映されないので、特殊文字を入力します。

改行

<a href="mailto:info@example.com??body=テキスト%0D%0Aテキスト">メールでお問い合わせ</a>

「%0D%0A」と入力すると改行されます。

スペース

<a href="mailto:info@example.com??body=テキスト%20テキスト">メールでお問い合わせ</a>

「%20」と入力します。

「mailto:」の文字化け対策

日本語を入力すると、環境によっては文字化けしてしまうことがあります。

文字化けを防ぐには、日本語をエンコードすることで対策できます。

以下サイトは日本語を簡単にエンコードしてくれる便利なサイトです!入力内容を作成したら活用してみてください!

https://tech-unlimited.com/urlencode.html

Google Chromeでメールソフトが起動しない?

自分も実際に経験したことなのですが、文字数が多すぎるとWindowsのGoogle Chromeでメールソフトが立ち上がらないというバグがあります。

文字数を削ったら無事メールソフトが立ち上がったので、もし同じ不具合が起きた場合は試してみてください。

「mailto:」の使い方や注意点まとめ

最初にお伝えした通り、現在はフォームによるメール送受信が一般的です。

文字化けだったり、環境によってはメールソフトが立ち上がらなかったりと、不安定な機能なので、理由がない限りはフォームを導入することをおすすめします。

ですが、頻度は少ないとはいえ実際に使用することがあるので、知っておいて損はないと思います!参考になれば幸いです!

こちらの記事もおすすめ

この記事をシェアする

関連記事

  • 2023.12.26

    一本の線がユーザーに寄り添う話

    HTML5

    コーディング

  • 2022.11.22

    【簡単】CSS でスクロールを促すラインアニメーションを作る方法

    CSS

    HTML5

    コーディング

    制作

  • 2021.11.30

    【HTML5】base要素の使い方と注意点を解説

    HTML5

おすすめ記事

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

  • 2022.04.22

    【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

    デザイン

    制作

  • 2021.09.29

    【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおすすめポイント

    デザイン

×