2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
リンクに「mailto:」を使うことによって、メールソフトを起動させることができます。
スパムの標的になりやすいことから現在はあまり使われておらず、お問い合わせフォームが主流ですが、サイト・案件によっては「フォームではなくメールソフトを立ち上げてほしい」ということもあります。
今回は「mailto:」の使い方について解説していきます。
目次
「mailto:」はaタグのhref属性の中で使用します。
<a href="mailto:info@example.com">メールでお問い合わせ</a>リンクをクリックすると、「info@example.com」が送信先に設定された状態でメールソフトが立ち上がります。
「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=メールアドレス」と入力します。
「件名を設定したい」「お問い合わせ内容の項目 をメール本文に設定しておきたい」などあらかじめメール内容を設定しておきたい時があります。
そのような場合でも、全てhref属性内に入力します。
件名
<a href="mailto:info@example.com?subject=件名">メールでお問い合わせ</a>「subject=件名」と入力します。
本文
<a href="mailto:info@example.com?body=本文のテキスト">メールでお問い合わせ</a>「body=件名」と入力します。
「BCCもCCも件名も本文も設定したい！」という場合は、「&」でつなぎます。
&は「&」の特殊文字です。下記サンプルコードでは「&」に置き換えられていますが、入力する時は「&」と入力しましょう！
<a href="mailto:info@example.com?cc=info02@example.com&bcc=info02@example.com&subject=件名&body=本文のテキスト">メールでお問い合わせ</a>本文を設定する場合は、改行やスペースを入力したい時が来るはずです。
しかしそのまま改行やスペースを入れても反映されないので、特殊文字を入力します。
改行
<a href="mailto:info@example.com??body=テキスト%0D%0Aテキスト">メールでお問い合わせ</a>「%0D%0A」と入力すると改行されます。
スペース
<a href="mailto:info@example.com??body=テキスト%20テキスト">メールでお問い合わせ</a>「%20」と入力します。
日本語を入力すると、環境によっては文字化けしてしまうことがあります。
文字化けを防ぐには、日本語をエンコードすることで対策できます。
以下サイトは日本語を簡単にエンコードしてくれる便利なサイトです！入力内容を作成したら活用してみてください！
https://tech-unlimited.com/urlencode.html
自分も実際に経験したことなのですが、文字数が多すぎるとWindowsのGoogle Chromeでメールソフトが立ち上がらないというバグがあります。
文字数を削ったら無事メールソフトが立ち上がったので、もし同じ不具合が起きた場合は試してみてください。
最初にお伝えした通り、現在はフォームによるメール送受信が一般的です。
文字化けだったり、環境によってはメールソフトが立ち上がらなかったりと、不安定な機能なので、理由がない限りはフォームを導入することをおすすめします。
ですが、頻度は少ないとはいえ実際に使用することがあるので、知っておいて損はないと思います！参考になれば幸いです！
こちらの記事もおすすめ
RECOMMEND
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/