WEB 作りたい

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

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

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

あわせて読みたい!
【web】リンクの貼り方いろいろ【初心者向け】

続きを見る

通常の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ファイルが簡単に添付できるというメリットのある「メールでの問合せ」。
そんな「メールでの問合せ」の細かい設定方法をご紹介しました。

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

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

あわせて読みたい!
【web】リンクの貼り方いろいろ【初心者向け】

続きを見る

ご覧いただきありがとうございました。

  • WEBやプログラミングの知識をつけたい
  • でも、スクールの学費は高すぎる

という方には、安価で始められる侍テラコヤ」をチェックしてみて!

\今なら1ヶ月無料クーポンコードあり/

Check!
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

続きを見る

1月31日まで

「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

design WEB

2023/1/23

「侍テラコヤ」は安くで始めるプログラミングスクール【リ...

【箇条書き】リストタグ[ ul・ol・li ]の使い方、マーカーの消し方・注意点も

WEB 作りたい

2022/11/9

【箇条書き】リストタグ[ ul・ol・li ]の使い方...

ブログにコメント欄は必要?非表示にする設定方法【WordPress】

WEB 作りたい

2022/10/5

ブログにコメント欄は必要?非表示にする設定方法【Wor...

誰でもホームページの更新ができるようにする方法【googleドキュメント簡単活用術】

WEB 作りたい

2022/9/11

自社で更新できるホームページ作成【Googleドキュメ...

今、再注目のアニメーションGifの素材サイトまとめ【フリー】

design WEB 作りたい

2022/9/3

今、再注目のアニメーションGifの素材サイトまとめ【フ...

-WEB, 作りたい
-,