Webサイトでユーザーからのお問い合わせを受け付ける方法として一般的なのがお問い合わせフォームです。
そして、もうひとつの方法として端末で利用しているメーラーが起動して、メーラー経由でメールを送信する方法です。
予算の関係でお問い合わせフォームまで作ることが出来ない場合や、手軽に問い合わせをしてもらいたい場合などに便利な方法です。
この記事ではメーラーの起動方法からメーラーにあらかじめ件名や内容を記載しておく方法をご紹介したいと思います。

メーラーを起動する

Webサイトでメーラーを起動するには<a>タグのhref属性にmailto:を指定します。

実際に指定すると以下のようになります。

<a href="mailto:xxxxx@xxx.xxx">メーラーを起動する</a>

mailto:に指定したメールアドレスが自動的にメーラーの送信先に設定されます。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

あとは必要事項を入力してもらうだけで送信することが出来ます。

送信先メールアドレスを複数設定する

メーラーを起動する際、自動で送信先メールアドレスを複数設定する方法はこちら。

<a href="mailto:xxxxx@xxx.xxx,yyyyy@xxx.xxx?subject=お問い合わせ">送信先メールアドレスを複数設定してメーラーを起動する</a>

mailto:にメールアドレスを指定する際、,（カンマ）区切りでメールアドレスを複数設定することで全てが送信先メールアドレスに設定されます。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

CCやBCCを設定する

まずはメーラーを起動する際、自動でCCを設定する方法はこちら。

<a href="mailto:xxxxx@xxx.xxx?cc=cc@xxx.xxx">CCを設定してメーラーを起動する</a>

?cc=のパラメータにメールアドレスを設定することで、そのメールアドレスはメーラーのCCの項目に設定されます。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

続いてメーラーを起動する際、自動でBCCを設定する方法はこちら。

<a href="mailto:xxxxx@xxx.xxx?bcc=bcc@xxx.xxx">BCCを設定してメーラーを起動する</a>

?bcc=のパラメータにメールアドレスを設定することで、そのメールアドレスはメーラーのBCCの項目に設定されます。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

さらに、CCとBCCのどちらも設定したい場合はこちら。

<a href="mailto:xxxxx@xxx.xxx?cc=cc@xxx.xxx&bcc=bcc@xxx.xxx">CCとBCCを設定してメーラーを起動する</a>

CC、BCCを&で繋げることでCCとBCCのどちらも設定することが出来ます。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

件名を設定する

メーラーを起動する際、自動で件名を設定する方法はこちら。

<a href="mailto:xxxxx@xxx.xxx?subject=お問い合わせ">件名を設定してメーラーを起動する</a>

?subject=のパラメータに件名にしたい文章を設定することで自動で件名を設定することが出来ます。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

本文を設定する

メーラーを起動する際、自動で本文を設定する方法はこちら。

<a href="mailto:xxxxx@xxx.xxx?body=【お名前】%0D%0A【お問い合わせ内容】">本文を設定してメーラーを起動する</a>

?body=のパラメータに本部としてあらかじめ記載しておきたい文章を設定することで自動で本文を設定することが出来ます。

本文を改行する場合は、改行したい個所に%0D%0Aを記述します。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

複数項目設定する

最後に、これまでにご紹介した設定項目を複数設定する方法はこちら。

<a href="mailto:xxxxx@xxx.xxx,yyyyy@xxx.xxx?cc=cc@xxx.xx&bcc=bcc@xxx.xx&subject=お問い合わせ&body=【お名前】%0D%0A【お問い合わせ内容】">複数項目を設定してメーラーを起動する</a>

パラメータとパラメータの間を&で繋げることで複数の項目を設定してメーラーを起動することが出来ます。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか？
ここまで詳しく項目を設定した状態でメーラーを起動する方法をご紹介しました。
しかし、理想はお問い合わせフォームを作り、そこからメールを送信してもらうことです。
メーラーの場合、予期せぬ文字化けが発生する恐れもあります。
今回ご紹介した方法はお問い合わせフォームが導入できない場合の代替手段程度とお考えください。