mailto: 點擊連結 開啟寄送 email

/

本篇要解決的問題

有時切版時,會遇到一個問題,就是像「與我聯絡」或是顯示 email 的地方,企劃希望點了以後可以直接開啟信箱,然後寄信到公司。這又衍生了另外的問題,就是開啟的寫信視窗,像是 Outlook、Gmail……等,企劃又希望基本的訊息已經寫在裡面了,如收件人、主旨、引言等。

因為遇到這種需求不止一次,這中間也查了一些資料,本篇就整理出來,以後需要用到時就直接 copy 貼上就行。


基本使用:mailto:收件人信箱

超連結上面的 href,填入「mailto:收件人信箱」就行,如下:

<a href="mailto:abc@gmail.com">
  寄信給abc@gmail.com
</a>

一次寄給多人:用半形逗號 ,

想寄信給多人,用半形逗號「, 」分開就行了,如下:

<a href="mailto:abc@gmail.com,def@gmail.com">
  寄信給abc@gmail.com、def@gmail.com
</a>

寄送副本:cc=、bcc=

想增加副本、密件副本的收件人,就帶上參數就行。

副本是「cc」,密件副本是「bcc」,有多人的話一樣用「, 」分開。

<a href="mailto:abc@gmail.com?cc=def@gmail.com,ghi@gmail.com&bcc=jkl@gmail.com">
  寄信給 abc@gmail.com
  副本給 def@gmail.com、ghi@gmai.com
  密件副本給 jkl@gmail.com
</a>

帶入信件主旨:subject=

自動帶入主旨的參數是「subject」,如下:

<a href="mailto:abc@gmail.com?subject=這是一個設定好的主旨">
  寄信給abc@gmail.com並帶上主旨
</a>

不過對於密件副本這件事覺得奇怪。

使用者點了連結後,預設要寄給誰,我們設定方一定會知道。而使用者要寄信前會開啟寫信的視窗,所以也看得到寄給哪些人,包含密件副本。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

所以……為什麼要加上密件副本的收件人?對這件事覺得神奇。


帶入信件內文:body=

信件要帶入內文,參數是 body,如下:

<a href="mailto:abc@gmail.com?body=這是一個寫好內文的範例">
  寄信給abc@gmail.com並帶上內文
</a>

內文中要折行/斷行/換行:%0D%0A

例如內文中想要的是這樣:

xxx 您好:

我想問的事情是

回信請回到

那連結上就可以這樣寫:

<a href="mailto:abc@gmail.com?body=xxx 您好:%0D%0A我想問的事情是%0D%0A回信請回到">
  寄信給abc@gmail.com並帶上內文
</a>

原本一開始只用 %0D,後來發現有些手機開啟時會沒換行,改用 %0D%0A 的實測結果是有正常換行。


以上就是 mailto: 中可以用的參數整理。

想試一下的話可以點以下連結,就會出現上面參數的範例:

點擊出現範例

上面的連結 HTML 如下:

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

<a href="mailto:abc@gmail.com?cc=def@gmail.com,ghi@gmail.com&bcc=jkl@gmail.com&subject=這是一個主旨&body=xxx 您好:%0D%0A我想問的事情是%0D%0A回信請回到">點擊出現範例</a>

Summary
mailto: 點擊連結 開啟寄送 email
Article Name
mailto: 點擊連結 開啟寄送 email
Description
mailto: 點擊連結 開啟寄送email。本篇大綱:本篇要解決的問題、基本使用 mailto:收件人信箱、一次寄給多人 用半形逗號、寄送副本 cc、bcc、帶入信件主旨 subject、帶入信件內文 body、內文中要折行/斷行/換行 %0D%0A。
Augustus
Let's Write
Let's write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

PWA

PWA 學習筆記 – 5:用 Firebase 做 Web Push

Front-End

用純 CSS 寫的網頁預覽效果

Google Others

Google Optimize A/B Testing 使用筆記

Bot Telegram

Telegram Bot 學習筆記 – 4:命令列 Commands

PWA

PWA 學習筆記 – 4:manifest.json

API

接氣象局 API、跨網域 AJAX 資料

WordPress

用 Auth0 在 WordPress 上做會員註冊、登入功能

PWA

PWA學習筆記-6:實際使用整體流程範例

Vue

Vue.js 3 Composition API 基本學習筆記-2:fetch data、export / import

Front-End

GitLab Pages:3 + 2 個步驟讓 GitLab 專案產生靜態頁

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言