Как сделать ссылку на почту

Как сделать ссылку на адрес электронной почты?

Адрес электронной почты пишется в формате vlad@webref.ru, где vlad — это имя пользователя, а webref.ru — имя домена. Для создания ссылки используется элемент , в атрибуте href сперва пишется ключевое слово mailto: , затем без пробела указывается адрес электронной почты пользователя.

При щелчке по такой ссылке открывается почтовая программа по умолчанию. Если подобные ссылки ещё не открывались, то операционная система выведет окно со списком программ (рис. 1).

Рис. 1. Список программ для открытия адреса электронной почты

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

В тексте ссылки дать адрес.

Написать пояснение в тексте.

Добавить символ почты до или после текста ссылки с помощью свойства content и псевдоэлемента ::before или ::after, как показано в примере 1. Чтобы иконка работала только с нужными ссылками, мы используем селектор a[href^=»mailto»] , он будет применять стиль только к элементам , у которых атрибут href начинается с mailto .

Пример 1. Иконка после адреса

Результат данного примера показан на рис. 1. Иконка взята с сайта utf8icons.com.

Рис. 1. Иконка после адреса почты

См. также

• content
• quotes
• relative и absolute
• text-decoration-skip-ink
• Аккордеон меню
• Анимация ссылок при наведении
• Атрибуты ссылок
• Добавление тени
• Использование :hover
• Наследование в CSS
• Не только текст
• Очистка float
• Подробнее о позиционировании
• Псевдоэлемент ::after
• Псевдоэлементы
• Псевдоэлементы ::after и ::before
• Создание ссылок
• Ссылки
• Ссылки
• Ссылки в HTML
• Якоря

Ссылка на адрес эл. почты

Создание ссылки на адрес электронной почты делается почти также, как и ссылка на веб-страницу. Только вместо URL указывается mailto:адрес электронной почты (пример 1).

Пример 1. Ссылка на адрес электронной почты

      
Задавайте вопросы по электронной почте
  

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

Можно также автоматически добавить тему сообщения, присоединив к адресу электронной почты через символ вопроса — параметр subject=»тема сообщения» (пример 2).

Пример 2. Задание темы сообщения

      
 Задавайте вопросы по электронной почте
  

При запуске почтовой программы поле Тема (Subject) будет заполнено автоматически.

Ссылки mailto: что это такое и как добавить в электронное письмо

Mailto – это префикс в адресе ссылки, благодаря которому можно автоматически открывать почтовый клиент с заполненными данными. Например, можно сделать так, чтобы по клику на кнопку пользователя перенаправляло в окно отправки письма с выбранным получателем, темой и уже введенным сообщением.

Зачем все это нужно в рассылках и как создать mailto-ссылку – рассказываем в сегодняшней статье.

Особенности ссылки mailto

Чтобы понять, как именно работает ссылка mailto, посмотрите на скриншот ниже:

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

Все это работает благодаря ссылке mailto, которая также помогает:

• Упростить процесс ответа на письмо. Когда автоматически заполняются некоторые поля при создании электронного письма, пользователю требуется меньше шагов, чтобы отправить сообщение. Такой подход поможет вам увеличить количество ответов и повысить лояльность аудитории. Последнее связано с тем, что людям нравится, когда за них совершают даже такие простые шаги как заполнение полей.
• Облегчить обработку писем от подписчиков. При использовании ссылки mailto вы всегда будете знать, по какой теме к вам обращается пользователь. Кроме того, можно настроить фильтрацию по теме или телу письма – таким образом в вашем почтовом ящике всегда все будет структурировано и понятно.

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

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Основные составляющие ссылки mailto

По умолчанию mailto состоит из одного адреса электронной почты. Выглядит она следующим образом:

В почте такой формат должен использоваться в виде HTML-кода с добавлением тега «a» и названия:

Если открыть письмо, то такая конструкция преобразуется в рабочую ссылку:

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

• subject – позволяет автоматически заполнить тему сообщения;
• cc и bcc – используются для указания кого-то в копии;
• body – с помощью этого параметра можно добавить текст письма.

Теперь давайте попробуем добавить эти атрибуты в ссылку. Чтобы это сделать, потребуется воспользоваться дополнительными символами. Вопрос «?» нужен, чтобы отделить адрес получателя от других параметров. А знак амперсанда «&» необходим для связки атрибутов.

По клику на такую ссылку откроется окно со следующими данными:

Обратите внимание, что для использования пробелов или вопросительных и восклицательных знаков нужно будет добавить специальные символы. Например, вопрос заменяется на %3F, а пробел на %20.

Выглядеть это может следующим образом:

Изучить кодировку символов вы можете в подробном руководстве от W3schools.

Как добавить mailto-ссылку в письмо

Итак, мы разобрались как создается ссылка mailto, теперь давайте добавим ее в свое письмо. Для примера воспользуемся сервисом рассылок Cheapsender. Все, что вам нужно, – пройти регистрацию, создать шаблон и добавить в него кнопку с использованием префикса.

Рассмотрим все по порядку:

1. Открываем официальную страницу сервиса и нажимаем «Попробовать бесплатно».
2. Заполняем поля и нажимаем «Зарегистрироваться».
3. Подтверждаем адрес электронной почты и переходим в личный кабинет. Там нажимаем «Создать рассылку».
4. Выбираем готовый шаблон либо в разделе «Новый шаблон» применяем конструктор шаблонов. Для примера воспользуемся вторым вариантом.
5. Осталось добавить элемент и вставить в него ссылку mailto. Для примера воспользуемся кнопкой – перетаскиваем ее из правой части на холст.
6. Кликаем по кнопке и добавляем в нее нужную ссылку через раздел «Действие». Обратите внимание, что HTML-теги использовать не нужно. Достаточно указать формат типа «mailto:example@gmail.com?subject=Вопрос&body=Привет» без кавычек. В таком случае сервис сразу же вас поймет и преобразует окно редактирования.

С помощью Cheapsender вам необязательно использовать сложные формулы с различными атрибутами. Вы можете выбрать функцию «Отправить письмо» и указать все значения самостоятельно. Ссылка mailto сгенерируется автоматически. Если нужно изменить название кнопки, то кликните по ней двойным щелчком мыши и введите желаемое имя. Изменить дизайн также можно – для этого в правой части есть отдельные разделы.

Когда ваше письмо будет полностью оформлено, вы можете его протестировать. Для этого используйте кнопку «Тестовое письмо», которая находится в верхнем правом углу конструктора. Кроме того, вы можете отправить до 100 писем бесплатно, а пакет для рассылки на 5000 писем обойдется всего в 70 рублей.

Сервисы для генерации ссылки mailto

Рассмотрим еще несколько ресурсов, которые помогут вам быстро сгенерировать ссылку mailto. Они будут полезны, если вы планируете создавать рассылку с использованием HTML-кода.

Вам может пригодиться:

• Mailtolinkgenerator. Простой в использовании сервис – достаточно ввести нужные параметры и нажать на кнопку «Generate my mailto link».

• Parcel. Аналог предыдущего сервиса, только кликать на кнопку не нужно – все происходит в автоматическом режиме. Также можно проверить работу ссылки mailto прямо на платформе.

• Mailtolink. Здесь также генерация происходит в автоматическом режиме. Все, что нужно, – заполнить необходимые поля и скопировать полученный код.

Заключение

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

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

Как сделать ссылку на электронную почту в HTML (с примерами)

Ссылки электронной почты в HTML также называются ссылками mailto, которые могут открыть почтовый клиент пользователя и составить сообщение непосредственно вам или вашей команде. Ссылки на электронную почту в HTML могут составлять черновики с заранее написанным сообщением или заранее заполненной строкой письма для получателя. Есть несколько шагов, которые вы можете предпринять, чтобы сделать ссылку электронной почты в HTML и устранить проблемы с ссылками электронной почты.

В этой статье мы обсудим преимущества и недостатки создания ссылки на электронную почту в HTML и как это сделать.

Как сделать ссылку в электронном письме в HTML

Рассмотрим эти шаги при создании ссылки на электронную почту в HTML:

1. Откройте HTML-файл и выберите, куда вставить ссылку электронной почты.
2. Введите тег якоря a href= после < символ для отображения ссылки в HTML-коде.
3. Включите mailto: метка после = отправить ссылку на адрес электронной почты. Разместить а > символ для закрытия текста в вашей ссылке. В вашем HTML-коде это может выглядеть следующим образом:
   получатель@почта.com >;
4. Чтобы письмо было отправлено на несколько адресов электронной почты, поставьте запятую между каждым адресом для их разделения. В вашем HTML-скрипте это может выглядеть следующим образом:
   получатель@электронная почта.com,recipient2@email.com >;
5. Добавьте текст, который вы хотите отобразить для включенной ссылки, и поместите символ a между парой < и >символы, показывающие, что это ваш предполагаемый текст для отображения. В вашем HTML-скрипте это может выглядеть следующим образом:
   получатель@email.com >Нажмите здесь, чтобы написать нам

Советы по созданию указанной ссылки на электронную почту в HTML

Вот несколько дополнительных советов по созданию более конкретной HTML-ссылки на электронную почту:

1. Рассмотрим другие предварительно составленные поля сообщения, которые вы, возможно, захотите автоматически заполнять. Это может быть CC, BCC, строка темы или тело сообщения.
2. При добавлении других полей после mailto: , поставьте знак вопроса, чтобы отделить ваш mailto: текст из каждого добавленного сегмента ссылки. В вашем HTML-скрипте это может выглядеть следующим образом:
   получатель@электронная почта.com? >Нажмите здесь, чтобы отправить нам электронное письмо
3. Чтобы включить CC, введите cc= далее следует адрес электронной почты или адреса, разделенные запятыми, которые вы хотите указать в качестве CC. В вашем сценарии HTML это может выглядеть следующим образом:
   recipient@email.com?cc=carboncopy@email.com >Нажмите здесь, чтобы написать нам
4. Чтобы включить BCC, введите bcc= затем следует адрес или адреса электронной почты, разделенные запятыми, которые вы хотите отправить в CC. В вашем HTML-скрипте это может выглядеть следующим образом:
   получатель@электронная почта.com?bcc=blindcarboncopy@email.com >Нажмите здесь, чтобы написать нам
5. Чтобы включить строку темы, введите subject= и текст вашей темы письма с %20 вместо пробелов. В вашем сценарии HTML это может выглядеть следующим образом:
   получатель@email.com?subject=Subject%20Line%20Text%20 >Нажмите здесь, чтобы написать нам
6. Чтобы включить тело сообщения, введите body= и основной текст с %20 вместо пробелов. В вашем HTML-скрипте это может выглядеть следующим образом:
   получатель@email.com?body=Message%20body%20text%20 >Нажмите здесь, чтобы отправить нам электронное письмо

Преимущества создания ссылки на электронную почту в HTML

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

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

• Несколько получателей mailto: Вы можете отправлять определенные сообщения нескольким получателям. Например, если у вас есть запрос на дефект продукта, может быть полезно, чтобы это письмо было отправлено в отделы разработки, возврата и обслуживания клиентов.
• Получатели углеродной копии (CC): Вы можете отправить электронное письмо одному основному получателю и нескольким получателям CC. Запрос о дефекте продукта может быть отправлен в службу поддержки клиентов в качестве основного адреса электронной почты и в другие вовлеченные команды.
• Слепая копия (BCC) получателей: Получатели BCC не видят других получателей, указанных в электронном сообщении. Это может быть полезно, когда в процесс вовлечена третья сторона, например, производители продукции или поставщики гарантийных услуг.
• Тематические строки: Для каждой созданной вами ссылки на электронную почту можно составить определенные строки темы письма. Это позволяет сортировать электронные письма и распределять их по категориям.
• Тела сообщений: Составление текста тела сообщения позволяет вам создать наброски или шаблоны формата электронной почты для стандартизации сообщений ваших клиентов. Шаблоны могут подсказать клиентам, как включить определенную информацию, которая может понадобиться вам для оказания помощи.

Недостатки создания ссылки на электронное письмо в формате HTML

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

Распространенным инструментом, который вы можете включить, является CAPTCHA, который можно найти на многих веб-сайтах для проверки того, что человек хочет получить доступ к ссылке на электронную почту для отправки запроса или пожелания. Вы можете потребовать от пользователей заполнить CAPTCHA, прежде чем они отправят вам электронное письмо. Вы также можете установить временные ограничения на эти запросы электронной почты, чтобы пользователи могли отправлять только одно письмо в течение определенного времени для предотвращения спама. В вашем почтовом ящике, скорее всего, есть фильтр спама или нежелательной почты, который вы можете настроить для автоматического удаления спама из основных сообщений входящей почты.

Ключевые слова:

• indeed.com