Полное руководство по ссылкам Mailto: синтаксис, параметры и реализация

Что такое ссылка Mailto? (И почему ее стоит использовать)

Ссылка mailto — это тип HTML-ссылки, который активирует почтовый клиент пользователя по умолчанию для написания нового электронного письма. Это схема URI (унифицированный идентификатор ресурса) для адресов электронной почты, стандартизированная в RFC 6068.

Вместо того чтобы переводить пользователя на другую веб-страницу, ссылка mailto открывает окно «Новое письмо», в котором уже указан адрес электронной почты получателя.

Преимущества:

• Простота: Это самый простой способ позволить посетителям отправить электронное письмо.
• Отсутствие бэкенда: В отличие от контактных форм, не требует обработки на стороне сервера.
• Привычность: Пользователи взаимодействуют со своим собственным почтовым клиентом, с которым они знакомы.

Недостатки:

• Зависимость от клиента: Требуется, чтобы у пользователя был настроен почтовый клиент на устройстве.
• Спам: Адреса электронной почты в виде простого текста могут быть собраны спам-ботами.

Анатомия ссылки Mailto: от простого к сложному

Основы: mailto:[email protected]

Самая простая форма ссылки mailto включает только адрес электронной почты получателя.

<a href="mailto:[email protected]">Свяжитесь с нами</a>

Добавление одного параметра: вопросительный знак ?

Чтобы добавить такие параметры, как тема или тело письма, начните с вопросительного знака (?) после адреса электронной почты. Первым параметром обычно является subject.

<a href="mailto:[email protected]?subject=Запрос о продукте">Отправить запрос</a>

Добавление нескольких параметров: амперсанд &

Чтобы добавить более одного параметра, разделите их амперсандом (&).

<a href="mailto:[email protected]?subject=Запрос о продукте&body=Здравствуйте, меня интересует...">Отправить подробный запрос</a>

Важно: Только первый параметр использует ?. Все последующие должны использовать &.

Подробный разбор всех параметров Mailto

Это основная часть статьи. Каждый параметр включает примеры кода.

subject: предварительное заполнение темы письма

Предварительно заполняет тему письма. Не забывайте кодировать специальные символы. Например, пробел становится %20.

<a href="mailto:[email protected]?subject=Запрос%20на%20предложение">Запросить предложение</a>

body: предварительное заполнение текста письма и обработка переносов строк (%0A)

Предварительно заполняет тело письма. Это наиболее подверженный ошибкам параметр из-за кодирования. Переносы строк должны быть закодированы как %0A.

Пример с переносом строки:

<a href="mailto:[email protected]?subject=Отчет%20об%20ошибке&body=Моя%20учетная%20запись%0A---%0AДетали%20ошибки:">Сообщить об ошибке</a>

Это создаст тело письма, которое выглядит так:

Моя учетная запись
---
Детали ошибки:

cc и bcc: добавление получателей в копию и скрытую копию

Вы можете добавить получателей в поля cc (копия) и bcc (скрытая копия).

<a href="mailto:[email protected][email protected]&[email protected]">Отправить отчет</a>

Несколько получателей: как добавить более одного адреса электронной почты

Чтобы отправить письмо нескольким получателям в полях to, cc или bcc, просто разделите их запятой (,).

<a href="mailto:[email protected],[email protected]?subject=Совместные%20усилия">Связаться с отделом продаж и маркетинга</a>

Собираем все вместе: пример из реальной жизни

Вот сложный пример, который объединяет все параметры.

<a href="mailto:[email protected][email protected]&[email protected]&subject=Тема%20письма&body=Это%20тело%20письма.%0AС%20переносом%20строки.">Полный пример</a>

• mailto:[email protected]: Основной получатель.
• [email protected]: Первый параметр, для копии, использует ?.
• &[email protected]: Второй параметр, для скрытой копии, использует &.
• &subject=Тема%20письма: Третий параметр, тема, использует &. Обратите внимание на %20 для пробелов.
• &body=...: Четвертый параметр, тело письма, использует &. Обратите внимание на %0A для переноса строки.

Устали кодировать это вручную и беспокоиться об ошибках кодирования? Наш бесплатный генератор ссылок Mailto создает идеальные, безошибочные ссылки за секунды.

Как создать ссылку Mailto в ваших любимых средах

Как создать ссылку mailto в HTML

Стандартный метод с использованием тега <a>.

<a href="mailto:[email protected]">Отправить письмо</a>

Как добавить ссылку mailto в Markdown

Синтаксис Markdown для ссылок отлично работает.

[Отправить письмо](mailto:[email protected])

Как сделать ссылку mailto с помощью JavaScript

Вы можете динамически создавать и управлять ссылками mailto в DOM.

const email = '[email protected]';
const subject = 'Динамическая тема';
const mailtoLink = `mailto:${email}?subject=${encodeURIComponent(subject)}`;

// Для перенаправления пользователя
window.location.href = mailtoLink;

// Или для установки href существующей ссылки
const linkElement = document.getElementById('my-contact-link');
linkElement.href = mailtoLink;

Заключение: теперь вы мастер Mailto

Вы изучили синтаксис, параметры и лучшие практики для создания надежных ссылок mailto. Это мощный и простой инструмент для прямого общения. Чтобы ваши ссылки всегда были идеальными, добавьте наш инструмент-генератор в закладки!