Создаем работающую ссылку на e-mail за 1 минуту

Иван Корнев·12.04.2026·⏱4 мин

Чтобы создать кликабельную ссылку на e-mail, используйте атрибут href со значением mailto: в HTML-теге <a>. Базовый код выглядит так: <a href="mailto:[email protected]">Написать нам</a>. При клике на такую ссылку у пользователя автоматически откроется почтовая программа с уже заполненным адресом получателя. Это стандартный способ упростить связь с клиентами на сайте, в подписи или рассылке.

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

Главное правило: Всегда проверяйте работу ссылки на мобильном устройстве. На смартфонах mailto открывает приложение почты по умолчанию (Gmail, Apple Mail, Outlook), а на ПК — установленный клиент или веб-интерфейс.

Синтаксис и базовая структура

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

Минимально необходимый код:

<a href="mailto:[email protected]">Связаться с поддержкой</a>

В этом примере:

  • [email protected] — адрес получателя.
  • Связаться с поддержкой — видимый пользователю текст (якорь).

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

Расширенные возможности: тема и тело письма

Протокол mailto позволяет заранее заполнить поля «Тема» (Subject) и «Текст письма» (Body). Это повышает конверсию, так как пользователю не нужно придумывать заголовок — он сразу видит контекст обращения.

Для добавления параметров используется знак вопроса ? после адреса, а сами параметры разделяются амперсандом &.

Формат записи

mailto:адрес?subject=Тема&body=Текст

Пример готового кода

Допустим, мы хотим, чтобы при клике открывалось письмо на адрес [email protected] с темой «Заказ консультации» и текстом «Здравствуйте, меня интересует...».

<a href="mailto:[email protected]?subject=%D0%97%D0%B0%D0%BA%D0%B0%D0%B7%20%D0%BA%D0%BE%D0%BD%D1%81%D1%83%D0%BB%D1%8C%D1%82%D0%B0%D1%86%D0%B8%D0%B8&body=%D0%97%D0%B4%D1%80%D0%B0%D0%B2%D1%81%D1%82%D0%B2%D1%83%D0%B9%D1%82%D0%B5,%20%D0%BC%D0%B5%D0%BD%D1%8F%20%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B5%D1%81%D1%83%D0%B5%D1%82...">
  Заказать консультацию
</a>

Важность URL-кодирования

Текст в параметрах subject и body обязательно должен быть закодирован в формате URL (URL-encoded). Пробелы заменяются на %20, кириллические символы преобразуются в последовательности вида %D0%....

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

  • Инструменты: Используйте онлайн-конвертеры «URL Encoder» или функции в вашем редакторе кода (например, encodeURIComponent() в JavaScript) для генерации правильной строки.

Работа с несколькими получателями

Иногда требуется отправить письмо сразу нескольким людям. В mailto это реализуется через перечисление адресов.

  • Копия (Cc): Добавляется параметром cc.
  • Скрытая копия (Bcc): Добавляется параметром bcc.

Пример:

<a href="mailto:[email protected][email protected]&[email protected]">
  Написать руководству
</a>

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

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

Доступность (Accessibility) и UX

Ссылка должна быть понятна не только визуально, но и для скринридеров (программ экранного доступа), которыми пользуются люди с нарушениями зрения.

  1. Описательный текст: Избегайте якорей вроде «Нажмите здесь» или просто «Email». Лучше написать: «Написать в отдел продаж» или «Отправить резюме».
  2. ARIA-атрибуты: Если дизайн требует разместить только иконку конверта, обязательно добавьте атрибут aria-label, объясняющий действие.
<!-- Плохо для доступности -->
<a href="mailto:[email protected]"><img src="icon-mail.png" alt=""></a>

<!-- Хорошо для доступности -->
<a href="mailto:[email protected]" aria-label="Написать письмо на адрес [email protected]">
  <img src="icon-mail.png" alt="">
</a>

Защита от спам-ботов

Размещение email в чистом виде (mailto:[email protected]) делает его легкой добычей для парсеров, которые собирают базы для спама. Полностью скрыть адрес в mailto сложно, но можно усложнить задачу ботам.

Методы защиты:

  1. Замена символов через JS: Храните адрес в атрибуте data-mail, а при загрузке страницы скрипт подменяет его на реальный href. Простые роботы не выполняют JavaScript.
  2. Контактные формы: Самый надежный способ — вообще отказаться от прямой ссылки в пользу формы обратной связи. Это скрывает адрес полностью и позволяет структурировать входящие заявки.
  3. Изображение вместо текста: Вывод адреса картинкой (не рекомендуется для основных контактов, так как усложняет копирование пользователем).

Частые ошибки

ОшибкаПоследствиеКак исправить
Отсутствие кодировки пробелов и кириллицыСсылка ведет на несуществующий адрес или выдает ошибкуИспользуйте URL-encoder для полей subject и body
Лишние пробелы в адресеПисьмо не уходитУдалите все пробелы внутри адреса (до и после @)
Использование http:// перед mailtoОткрывается страница ошибки вместо почтыПротокол должен быть строго mailto:
Слишком длинное тело письмаОбрезание текста в некоторых клиентахОставьте в теле короткое приветствие, детали пусть пользователь допишет сам

FAQ

Можно ли заставить ссылку открываться именно в Gmail или Outlook? Нет, выбор программы зависит от настроек операционной системы или браузера пользователя. Вы можете лишь предложить действие, но не диктовать инструмент.

Работает ли mailto на мобильных телефонах? Да, на iOS и Android клик по такой ссылке открывает приложение почты, установленное по умолчанию, или предлагает выбрать из списка доступных.

Почему ссылка не работает в некоторых корпоративных сетях? Администраторы сети могут блокировать запуск внешних приложений из браузера в целях безопасности. В таких случаях единственное решение — дублирование адреса текстом или использование веб-формы.