【WEB】mailtoリンクの活用いろいろ【初心者向け】

以前の記事でウェブには欠かせない色々なリンクの設定方法をご紹介しました。

今回はその中で、問い合わせを促すため、新規メールを立ち上げる「mailto」リンクの細かい設定方法をご紹介します。

通常のmailtoリンクを設置する

通常のリンク設定の<a>タグhref要素に「mailto:指定アドレス」を記入することで、クリックするとメーラーを起動させ新規メールを立ち上げるリンクを作成することができます。

<a href="mailto:sample@gmail.com">メーラーを起動するリンク</a>

メーラーを起動するリンク

件名をあらかじめ入力しておく

この立ち上げた新規メールに、あらかじめ件名を仕込んでおくことができます。
問合せのメールを送ってもらう場合は、できるだけユーザーの手間を省くことが大切ですので、あらかじめ記入できる所は、設定しておきましょう。
アドレスの後ろに「?」で区切りを入れ、件名を意味する「subject」+「=任意の件名」を記載することで、起動メールに件名を入れておくことができます。

<a href="mailto:sample@gmail.com?subject=件名を記入しておく">「件名あり」メーラーを起動するリンク</a>

「件名あり」メーラーを起動するリンク

Cc:にアドレスを追加しておく

宛先のアドレスと合わせてCcにもアドレスを入れておくことができます。
こちらも件名と同じく「?」＋「cc=アドレス」を追加します。

<a href="mailto:sample@gmail.com?cc=sample2@gmail.com">「Ccあり」メーラーを起動するリンク</a>

「Ccあり」メーラーを起動するリンク

Bcc:にもアドレスを追加

「Cc」ではなく「Bcc」にアドレスを追加したい場合も同様です。
アドレスの後ろに「?」＋「bcc=アドレス」を追加します。

<a href="mailto:sample@gmail.com?bcc=sample3@gmail.com">「Bccあり」メーラーを起動するリンク</a>

「Bccあり」メーラーを起動するリンク

本文をあらかじめ入力しておく

件名、Cc、Bccとくれば次は「本文」です。
方法は全く同じで、アドレスの後ろに「?」＋「body=任意の本文」を追加します。
本文中で改行をさせたい場合には「%0D%0A」と入力します。

<a href="mailto:sample@gmail.com?body=お問合せありがとうございます。%0D%0Aこちらに問合せ内容をご記入ください。">「本文あり」メーラーを起動するリンク</a>

「本文あり」メーラーを起動するリンク

すべてを組合せた問合せメールサンプル

これらすべてを組み合わせて件名、Cc、Bcc、本文があらかじめ記入されている
問合せメールを作成してみましょう。
複数の項目を使用する場合は間を「&」でつなげて記載していきます。

<a href="mailto:sample@gmail.com?subject=ホームページからの問合せ&cc=sample2@gmail.com&bcc=sample3@gmail.com&body=お問合せありがとうございます。%0D%0Aこちらに問合せ内容をご記入ください。">「件名、Cc、Bcc、本文あり」メーラーを起動するリンク</a>

「件名、Cc、Bcc、本文あり」メーラーを起動するリンク

まとめ

いかがでしたでしょうか。

メール入力フォームが手軽に設置できるようになりましたが、
画像やPDFファイルが簡単に添付できるというメリットのある「メールでの問合せ」。
そんな「メールでの問合せ」の細かい設定方法をご紹介しました。

メールでの問合せボタンを設置する場合は、「件名」や「本文」などをあらかじめ記入しておき、できるだけユーザーの手間を省いてあげることを心がけましょう。

他のリンクボタンについては、こちらの記事をご覧ください。