Все о почтовых ссылках: работа с mailto HTML

Основной функционал

<a href=»mailto:someone@yoursite.com»>Email Us</a>

1 <a href=»mailto:someone@yoursite.com»>Email Us</a>

Это работает! Но мы сразу же сталкиваемся с несколькими проблемами UX. Одной из них является то, что события после нажатия на эту ссылку удивляют некоторых людей и им это не нравится. Что-то вроде того, как человек кликает по ссылке на PDF-файл, и открывается файл вместо веб-страницы. Легкий вздох. Мы вернемся к этому немного позже.

«Открыть в новой вкладке» иногда важно

Если у пользователя почтовый клиент по умолчанию (например, Outlook, Apple Mail и т. д.) настроен как отдельное приложение, это не имеет значения. Они нажимают на mailto: ссылку, открывается это приложение, создается новое электронное письмо, и оно ведет себя одинаково независимо от того, пытались ли вы открыть эту ссылку в новой вкладке или нет.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Но если у пользователя настроен почтовый клиент на основе браузера, это имеет значение. Например, вы можете разрешить Gmail обрабатывать электронную почту по умолчанию в Chrome. В этом случае ссылка ведет себя как любая другая ссылка. Если вы не откроете новую вкладку, страница будет перенаправлена к Gmail.

Я не совсем уверен насчет этого. Раньше я рассматривал вопрос об открытии ссылок в новых вкладках, но не об открытии электронных писем. Я бы сказал, что скорее склоняюсь к использованию target=»_blank» для таких ссылок, несмотря на свои чувства по поводу использования открытия в новой вкладке в других сценариях.

<a href=»mailto:someone@yoursite.com» target=»_blank» rel=»noopener noreferrer»>Email Us</a>

1 <a href=»mailto:someone@yoursite.com» target=»_blank» rel=»noopener noreferrer»>Email Us</a>

Добавление темы и тела письма

По какой-то причине это можно увидеть довольно редко, но mailto: ссылки позволяют также определять тему и содержание письма. Это просто параметры запроса!

mailto:chriscoyier@gmail.com?subject=Important!&body=Hi.

1 mailto:chriscoyier@gmail.com?subject=Important!&body=Hi.

Добавление поддержки для копии и скрытой копии письма

Вы можете отправлять электронную почту на несколько адресов и даже копии (CC) и скрытые копии (BCC). Трюк заключается в добавлении дополнительных параметров запроса и разделении запятыми адресов электронной почты.

mailto:someone@yoursite.com?cc=someoneelse@theirsite.com,another@thatsite.com,me@mysite.com&bcc=lastperson@theirsite.com

1 mailto:someone@yoursite.com?cc=someoneelse@theirsite.com,another@thatsite.com,me@mysite.com&bcc=lastperson@theirsite.com

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Полезный сайт

Используйте form, чтобы люди сначала создали электронное письмо

Я не уверен, насколько это полезно, но любопытно, что вы можете создать form, выполняющую запрос GET, который по сути является перенаправлением на URL-адрес — и этот URL может быть в формате mailto: с параметрами запроса, заполненными входными данными! Его можно даже открыть в новой вкладке.

Люди не любят сюрпризы

Поскольку mailto: ссылки являются валидными анкорными ссылками, как и любые другие, они обычно имеют стандартный стиль. Но нажатие на них явно дает совсем другие результаты. Возможно, стоит указать mailto: ссылки особым образом. Если вы используете в качестве ссылки реальный адрес электронной почты, вероятно, лучше сделать так:

<a href=»mailto:chriscoyier@gmail.com»>chriscoyier@gmail.com</a>

1 <a href=»mailto:chriscoyier@gmail.com»>chriscoyier@gmail.com</a>

Или вы можете использовать CSS, чтобы добавить небольшое объяснение с помощью смайлика:

CSS
a[href^=»mailto:»]::after {
content: » (&#x1f4e8;&#x2197;&#xfe0f;)»;
}

123 a[href^=»mailto:»]::after {  content: » (&#x1f4e8;&#x2197;&#xfe0f;)»;}

Если вам не нравятся mailto: ссылки, у вас есть расширение для браузера

https://ihatemailto.com/

Оно блокирует такую ссылку, но копирует адрес электронной почты в буфер обмена и сообщает, что сделало это.

Автор: Chris Coyier

Просмотров:

Добавить комментарий