Các bạn đã bao giờ sử dụng link gởi mail trong html chưa. Thật là tiện lợi khi sử dụng các link mailto trong các thông tin liên hệ. Với mailto trong link, các bạn sẽ mang lại tải nghiệm tốt cho khách hàng, tăng ux và ui, tăng SEO cho website.
- Căn bản
Mở chương trình thư mặc định, tạo thư mới với trường TO đã được điền sẵn.
<a href="mailto:someone@yoursite.com"> Gửi email cho chúng tôi </a>
- Thêm Subject
Mở chương trình thư mặc định, tạo thư mới với trường To và theme đã được điền. Về cơ bản, chúng tôi đang thêm chủ thể tham số vào giá trị href.
Dấu cách trong chủ đề có thể sẽ hoạt động tốt, nhưng để cực kỳ chắc chắn, bạn có thể thay thế dấu cách bằng “% 20”.
<a href="mailto:someone@yoursite.com?subject=Mail from Our Site"> Gửi email cho chúng tôi </a>
Xem thêm Tự học HTML: text
- Thêm CC và BCC
Mở chương trình thư mặc định, tạo thư mới với trường TO, SUBJECT, CC và BCC đã được điền. Về cơ bản, chúng tôi đang thêm các tham số cc và bcc vào giá trị href.
Cũng lưu ý rằng bạn thêm nhiều giá trị vào CC và BCC bằng cách phân tách chúng bằng dấu phẩy.
<a href="mailto:someone@yoursite.com?cc=someoneelse@websitehcm.com, another@thatsite.com, me@mysite.com&bcc=lastwoman@websitehcm.com&subject=Big%20News"> Gửi email cho chúng tôi </a>
Thêm văn bản nội dung
Chỉ cần thêm tham số body vào danh sách tham số ngày càng tăng mà chúng tôi đang sử dụng.
<a href="mailto:someone@yoursite.com?cc=someoneelse@websitehcm.com, another@thatsite.com, me@mysite.com&bcc=lastwoman@websitehcm.com&subject=Big%20News&body=Body-goes-here"> Gửi email cho chúng tôi </a>
- Demo
Sau đây là bản demo về cách sử dụng liên kết email khác nhau. Các liên kết sẽ không kích hoạt trong bản trình diễn được nhúng, nhưng bạn có thể thấy chúng hoạt động trong chế độ xem toàn trang.
<div class="email-links">
<div class="email-link">
<h2>Basic Usage</h2>
<p>
<a href="mailto:geoff@websitehcm.com">
<svg viewBox="0 0 512 512" width="20" fill="#ffffff" title="envelope">
<path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z" />
</svg>Email Us
</a>
</p>
</div>
<div class="email-link">
<h2>Subject Line</h2>
<p>
<a href="mailto:someone@websitehcm.com?subject=Mail from Our Site">
<svg viewBox="0 0 512 512" width="20" fill="#ffffff" title="envelope">
<path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z" />
</svg>Email Us
</a>
</p>
</div>
<div class="email-link">
<h2>CC and BCC</h2>
<p>
<a href="mailto:someone@websitehcm.com?cc=someoneelse@websitehcm.com, another@websitehcm.com, me@websitehcm.com&bcc=lastperson@theirsite.com&subject=Big%20News">
<svg viewBox="0 0 512 512" width="20" fill="#ffffff" title="envelope">
<path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z" />
</svg>Email Us
</a>
</p>
</div>
<div class="email-link">
<h2>Body Text</h2>
<p>
<a href="mailto:someone@websitehcm.com?cc=someoneelse@websitehcm.com, another@websitehcm.com, me@websitehcm.com&bcc=lastperson@websitehcm.com&subject=Big%20News&body=Body-goes-here">
<svg viewBox="0 0 512 512" width="20" fill="#ffffff" title="envelope">
<path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z" />
</svg>Email Us
</a>
</p>
</div>
</div>body {
background: #333;
display: grid;
height: 100vh;
place-items: center;
width: 100%;
}
.email-links {
background: #fff;
border: 5px solid #222;
border-radius: 18px;
display: grid;
gap: 1rem;
grid-template-columns: repeat(4, 1fr);
padding: 2rem;
position: relative;
width: clamp(600px, 50%, 800px);
}
.email-links:before {
content: "";
background: linear-gradient(130deg, #ff7a18, #af002d 41.07%, #319197 76.05%);
border: 5px solid #222;
border-radius: 18px;
height: 100%;
position: absolute;
left: 1rem;
top: 1rem;
width: 100%;
z-index: -1;
}
.email-link {
padding: 1rem;
}
.email-link:not(:last-child) {
border-right: 1px solid #ccc;
}
.email-link svg {
filter: drop-shadow(1px 0 5px hsla(170, 0%, 0%, 0.5));
margin-right: 10px;
position: relative;
top: 4px;
}
