1分で作る.件名や本文を自動挿入するメールリンクの作り方

コストなどの問題で、コンタクトフォームを設置できない。

そんな時はメールソフトを起動するリンクを張って、問い合わせを受けることになりますよね。

ただ、送信先のメールアドレスだけが入った新規のメールが立ち上がるだけでは、そこで問い合わせをやめてしまうかも知れません。

件名、本文を考えて送るというのは意外と面倒に感じる作業です。

問い合わせを受ける側としても、最低限書いてほしい情報が書いてないと確認の手間が増えてお互いにいいことがありません。

そんな時に覚えておきたいのが今回のリンクの貼り方です。

問い合わせリンクをクリックすると、送信先のメールアドレス、件名、本文が自動で挿入された新規のメールが立ち上がります。

メールリンクの作り方

まず、リンクをクリックしたらメールソフトが立ち上がるリンクの作り方から見ていきましょう。

HTMLのaタグを使って、hrefの中にmailtoを記述すると完成です。

こんな感じに書いて見てください。

<a href="mailto:sample@nicoiworks.com">メールで問い合わせる</a>

簡単ですね。

これにCSSを使ってボタン風にして、クリック数の増加も狙って見ましょう。

件名を自動で入れる方法

新規のメールが起動するリンクが出来上がったら、そこに件名を自動挿入するコードを追加しましょう。

件名を自動で挿入するにはsubjectを使います。

メールアドレスのすぐ後ろに「?（クエスチョンマーク）」で繋いでsubjectとします。

さらに「=（イコール）」として件名に入れたいテキストを書いていきます。

<a href="mailto:hoge@dummy.com?subject=商品に関する問い合わせ">メールで問い合わせる</a>

これでリンクボタンをクリックすると、ここで指定した件名が自動で挿入された新規のメールが立ち上がります。

本文を自動で入れる方法

こんな感じで、本文も記述していきましょう。

本文はbodyを使います。

<a href="mailto:sample@nicoiworks.com?
body=ここに本文を書く">メールで問い合わせる</a>

件名と同じ様に「?（クエスチョンマーク）」と「=（イコール）」を使って書いていきます。

改行の入れ方

本文は件名とは違って、複数行に渡って記述したいことが多くあると思います。

本文に改行を入れるには%0D%0Aと改行したいところに記述します。

<a href="mailto:sample@nicoiworks.com?
body=お名前：%0D%0Aメールアドレス：%0D%0A">メールで問い合わせる</a>

<br>ではないんですねー。

CCやBCCを自動で入れる方法

件名と本文の他にもCCやBCCを設定することもできます。

ここまでと同じ様に「?（クエスチョンマーク）」と「=（イコール）」を使って書いていきます。

使うコードはそのままccとbccになります。

<a href="mailto:sample@nicoiworks.com?
cc=sample_cc@nicoiworks.com">メールで問い合わせる</a>

<a href="mailto:sample@nicoiworks.com?
bcc=sample_bcc@nicoiworks.com">メールで問い合わせる</a>

こんな感じになります。

複数のメールアドレスを設定する

CCやBCCに複数のメールアドレスを設定する場合には「,（カンマ）」で繋いで書いていきます。

<a href="mailto:sample@nicoiworks.com?
cc=sample_cc@nicoiworks.com,sample_cc2@nicoiworks.com">メールで問い合わせる</a>

これでCCに2つのメールアドレスを挿入することができます。

全部自動で入れる方法

最後に件名、本文、CC、BCCを全部入れる方法です。

全部のみならず、複数設定したい場合には「&（アンド）」で繋いで記述していきます。

<a  href="mailto:sample@nicoiworks.com
?subject=商品に関する問い合わせ
&body=お名前：%0D%0Aメールアドレス：%0D%0A
&cc=sample_cc@nicoiworks.com"
&bcc=sample_bcc@nicoiworks.com"
>メールで問い合わせる</a>

文字化けしたら

件名や本文に書いた日本語がメールソフトを起動した時に文字化けを起こしてしまうことがあります。

これはユーザーのブラウザに依存するため、どこまでをターゲットや対象範囲とするかで対策が必要になります。

対策としては、日本語をエンコードして記述することになります。

ネットで「日本語 エンコード」と検索するといくつもエンコードしてくれるサイトが見つかると思うので、使いやすいものを利用してみてください。

エンコードしたものを入れたらこんな感じになります。

<a  href="mailto:sample@nicoiworks.com
?subject=%E5%95%86%E5%93%81%E3%81%AB%E9%96%A2%E3%81%99%E3%82%8B%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B
&body=%E3%81%8A%E5%90%8D%E5%89%8D%EF%BC%9A%0D%0A%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%EF%BC%9A
&cc=sample_cc@nicoiworks.com"
&bcc=sample_bcc@nicoiworks.com"
>メールで問い合わせる</a>

何が書いてあるかわからないですね😅

まとめ

WordPressなどを使えばプラグインで簡単にコンタクトフォームを導入できたりするわけですが、その予算がなかなか捻出できないというクライアントもまだまだ少なくありません。

今回の技術を身に着けて、お客さんにあった集客やWEBサイト制作を進めて行きましょう。