Всё про ссылки mailto. Как работают, как создать и где использовать

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

Именно для таких случаев и существуют mailto-ссылки, которые частично автоматизируют создание письма. В статье разберём, что такое ссылки mailto, как они работают, как их создавать и где использовать.

Что такое ссылка mailto и зачем она нужна 

Ссылка mailto — это специальный тип гиперссылки, который при клике автоматически открывает почтовый клиент пользователя с предзаполненными данными письма.

Визуально она выглядит как обычная гиперссылка: текст «Написать нам» или адрес «info@example.com», подчеркнутый синим цветом. Но при клике происходит не переход на другую страницу, а запуск почтового приложения. 

В коде это обычный HTML-тег с особым атрибутом:

<a href="mailto:info@example.com">Написать нам</a> 

Без mailto-ссылки пользователю приходится выделять и копировать email-адрес, открывать почтовый сервис, создавать письмо, вставлять адрес, придумывать тему и писать приветствие — на каждом шаге часть потенциальных клиентов теряется из-за обычной лени или отвлекаясь на что-то другое. 

Ссылка mailto убирает лишние шаги. Всего один клик откроет черновик письма с указанным адресом получателя, а порой и с заполненной темой и вступительным текстом. Для пользователя это просто удобно, а для компании — это автоматизация первого шага к конверсии. 

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

Как работает mailto 

Важно понимать, что mailto-ссылка не отправляет письмо сама по себе. Она лишь запускает почтовый клиент пользователя. При клике по mailto-ссылке браузер не открывает страницу, а передаёт управление почтовому приложению. 

Механизм работы прост:

1. Пользователь кликает на ссылку в браузере. 
2. Система запускает установленный по умолчанию почтовый клиент (Outlook, Apple Mail, Gmail и другие). 
3. Открывается окно нового письма с автоматически заполненными полями. 

Например, клик по ссылке mailto:support@site.ru?subject=Вопрос по заказу откроет письмо с адресом получателя и темой «Вопрос по заказу». 

Точное поведение ссылки может несколько отличаться на разных устройствах. К примеру, на десктопах открывается установленный почтовый клиент, на мобильных устройствах — запускается встроенное приложение почты, выбранные для этого по умолчанию. В браузерах ссылки могут также открываться в онлайн-версиях почтовиков, например, Яндекс Почты или Mail.ru, в зависимости от установленных приоритетов.

Основные преимущества mailto-ссылок

Mailto-ссылки упрощают взаимодействие с почтой. Они делают процесс обращения понятным и быстрым. В частности, mailto-ссылки:

• снижают барьер для контакта — избавляют пользователя от лишних действий, особенно на мобильных устройствах; 
• повышают конверсию — готовая тема и текст письма направляют пользователя, увеличивая количество обращений и заявок; 
• стандартизируют обращения — заранее заданная тема помогает быстро сортировать письма и реагировать на них; 
• обеспечивают кроссплатформенность — ссылки работают на сайтах, в email-рассылках, мобильных приложениях и даже в QR-кодах. 

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

Из чего состоит mailto-ссылка 

Любая mailto-ссылка состоит из стандартного HTML-тега <a>. Вот так выглядит базовая структура: 

<a href="mailto:info@example.com">Написать нам</a> 

где: 

• <a> — открывающий тег гиперссылки; 
• href — атрибут, где указывают адрес; 
• mailto: — протокол, который сообщает браузеру открыть почтовый клиент (без него ссылка не работает); 
• info@example.com — email получателя; 
• Написать нам — анкорный текст, видимый пользователю; 
• </a> — закрывающий тег. 

Такую структуру применяют для создания простых ссылок, которые отображают текст ссылки, видимый пользователю, и задают адрес получателя в открывающемся письме. 

Дополнительные параметры

Чтобы письмо открывалось не пустым, а с заполненными данными, используют специальные параметры.

subject — тема письма. Автоматически заполняет поле «Тема». Помогает получателю сразу понять суть обращения.

<a href="mailto:info@site.ru?subject=Заявка на консультацию">Связаться</a> 

body — текст сообщения. Вставляет готовый текст в тело письма. Можно добавить приветствие или структуру для заполнения.

<a href="mailto:info@site.ru?body=Здравствуйте, хочу узнать о...">Написать</a>

cc — копия письма (Carbon Copy). Добавляет дополнительного получателя. Все участники переписки видят этот адрес.

<a href="mailto:info@site.ru?cc=manager@site.ru">Отправить заявку</a>

bcc — скрытая копия (Blind Carbon Copy). Добавляет получателя, о котором не узнает основной адресат. Удобно для архивации писем.

<a href="mailto:info@site.ru?bcc=archive@site.ru">Написать</a>

Посредством дополнительных параметров можно создать готовый шаблон письма, в котором пользователю останется только дописать цель обращения.

Правила синтаксиса

Чтобы браузер и почтовый клиент правильно интерпретировали ссылку, нужно соблюдать строгие правила.

? (вопросительный знак). Разделяет email-адрес от параметров. Ставится один раз сразу после адреса.

mailto:info@site.ru?subject=Тема

& (амперсанд). Разделяет параметры между собой. Используют при добавлении двух и более параметров.

mailto:info@site.ru?subject=Тема&body=Текст

= (знак равенства). Связывает название параметра с его значением.

subject=Заказ

Перечисленные символы позволяют управлять браузером в процессе трактовки им правильного содержания ссылки.

Спецсимволы

Важно учесть, что в URL нельзя использовать обычные пробелы и переносы строк. Вместо них применяются специальные коды

%20 — пробел. Заменяет каждый пробел в тексте.

subject=Заявка%20на%20консультацию (превратится в «Заявка на консультацию»)

%0A — перенос строки. Добавляет переход на новую строку в теле письма.

body=Добрый%20день!%0AЯ%20хочу%20заказать (создаст две строки текста)

%21 и %3F — восклицательный и вопросительный знаки. Кодирование ! и ? для корректной обработки.

subject=Срочно%21 (отобразится как «Срочно!»)

Игнорирование спецсимволов приведет к неверной работе mailto-ссылки. При наличии пробелов ссылка оборвётся и браузер не распознает адреса. Без указания переносов строк весь текст слипнется в одну нечитаемую строку. Если не закодировать восклицательный и вопросительный знаки, то браузер воспримет их как служебные элементы, и часть темы или сообщения может «потеряться».

Как самостоятельно создать mailto-ссылку 

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

Шаг 1. Базовая ссылка. В атрибуте href после протокола mailto: указываем адрес получателя. Между открывающим и закрывающим тегом пишем анкор (текст ссылки). В этом случае при клике откроется пустое письмо для заданного адреса (в примере — sales@site.ru).

<a href="mailto:sales@site.ru">Купить курс</a>

Шаг 2. Добавляем тему. Чтобы задать тему, сразу после email ставим разделитель ?, пишем параметр subject= и указываем заголовок письма, заменяя пробелы на %20. В результате откроется письмо для заданного адреса с предзаполненной темой (в примере — «Заявка на курс»).

<a href="mailto:sales@site.ru?subject=Заявка%20на%20курс">Купить курс</a>

Шаг 3. Добавляем копию менеджеру. Чтобы добавить еще одного получателя, ставим символ & после предыдущего параметра и дописываем cc= с адресом второго почтового ящика. В итоге отправленное письмо уйдёт сразу на два адреса.

<a href="mailto:sales@site.ru?subject=Заявка%20на%20курс&cc=manager@site.ru">Купить курс</a>

Шаг 4. Заполняем текст письма. Снова используем символ & для связки и добавляем параметр body=. Чтобы текст не слипся в одну строку, используем код %0A для переноса строки. По клику пользователя откроется письмо с заполненными адресами получателя и копии, темой и текстом. Пользователю остается только дополнить текст (если нужно) и нажать «Отправить». 

<a href="mailto:sales@site.rusubject=Заявка%20на%20курс&cc=manager@site.ru&body=Добрый%20день!%0AЯ%20хочу%20записаться%20на%20курс.">Купить курс</a>

Чтобы убедиться, что ссылка работает правильно и не содержит ошибок, её нужно протестировать на разных устройствах и почтовых клиентах. Проверьте работу ссылки на Windows, macOS, iOS и Android. Убедитесь, что почтовый клиент открывается корректно. Проверка помогает сразу выявить проблемы с синтаксисом, кодировкой пробелов и спецсимволов. 

Где можно использовать mailto-ссылки 

Применять mailto-ссылки можно практически на любых веб-ресурсах, где предполагается обратная связь по email. Приведу несколько примеров. 

Страница сайта с контактами 

В разделах «Контакты» или «О нас» корпоративных сайтов вместо простого указания email лучше разместить кликабельную ссылку. Это позволяет сегментировать обращения: например, кнопка «Написать в поддержку» может сразу открывать письмо с темой «Запрос в техподдержку», а «Отдел продаж» — с темой «Заказ». Так письма будут приходить уже отсортированными и по правильным адресам.  

Email-рассылки 

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

Так же можно получать заявки, запросы прайса и любые другие ответы получателей рассылки.

Формы обратной связи 

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

Футеры и подписи 

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

QR-коды и визитки 

Это самый быстрый способ обмена контактами в офлайне. Человек сканирует код на стенде или листовке, и у него в смартфоне сразу готов черновик письма с темой «Вопрос с мероприятия», без ручного ввода адреса. 

Необходимо помнить, что в mailto-ссылках не стоит использовать конфиденциальные данные. Все параметры mailto-ссылки видны в URL. Для передачи персональных данных или платежной информации используйте более защищенные способы. 

Важно! Не забывайте про альтернативные способы связи. Если у пользователя не настроен почтовый клиент, mailto-ссылка может отобразить ошибку. Дублируйте контактный email текстом рядом с формой на сайте или CTA. 

Mailto-ссылки — это простой, но мощный инструмент для повышения конверсии и улучшения пользовательского опыта. Они упрощают взаимодействие, экономят время пользователя и помогают получать более структурированные обращения. Достаточно один раз разобраться в правилах создания ссылок mailto, чтобы делать удобные шаблоны обратных писем для любых задач.