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

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

Адрес электронной почты пишется в формате 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
• Что это такое?
• Якоря

Гиперссылки в Word для Интернета

Гиперссылки в документе работают точно так же, как при чтении документа в Word или в Word в Интернете. Щелкните ссылку, чтобы перейти на веб-адрес или другое место в том же документе или отправить сообщение электронной почты.

В Word в Интернете вы можете вставлять и редактировать гиперссылки, которые указывают на веб-адреса или адреса электронной почты, но вы не можете создавать гиперссылки, которые находятся в другом месте в том же документе (закладки или перекрестные ссылки). Если это нужно, нажмите кнопку Открыть в Word.

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

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

Совет: Если вы не хотите, чтобы текст отображался более дружественным, чем веб-адрес, просто введите веб-адрес. При нажатии клавиши пробел или ввод Word в Интернете автоматически преобразует адрес в гиперссылку.

Чтобы создать ссылку на адрес электронной почты, введите mailto: и адрес электронной почты пользователя в поле адрес .

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

Совет: Чтобы изменить ссылку, которая уже есть в документе, щелкните в любом месте ссылки, а затем выберите команду вставить > ссылку. Если вы используете мышь, щелкните ссылку правой кнопкой мыши и выберите команду Изменить гиперссылку. (на сенсорном устройстве Коснитесь ссылки и удерживайте ее, чтобы получить контекстные команды.

Примечание: Эта страница переведена автоматически, поэтому ее текст может содержать неточности и грамматические ошибки. Для нас важно, чтобы эта статья была вам полезна. Была ли информация полезной? Для удобства также приводим ссылку на оригинал (на английском языке).

Ссылки 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-ссылку в письмо, а сам процесс создания рассылки займет всего несколько часов.

Как использовать ссылки mailto: и tel:

Ссылки tel: нужны, чтобы сделать кликабельным номер телефона на сайте, а через mailto: можно отправить целое письмо, в котором сразу будут заполнены и адрес, и тема, и даже какой-нибудь текст. Иногда это удобно — пользователю не нужно набирать номер телефона вручную, а письмо в службу поддержки можно начать сразу с конкретной темы.

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

mailto:

Ссылка формируется из нескольких частей. Сначала в адресе ставится префикс mailto: , после которого указывается адрес почты. Это самый простой вариант.

Текст письма указывается с помощью параметра body .

За тему письма отвечает параметр subject .

Можно даже указать кого-то в копии, для этого используются параметры cc и bcc .

Что произойдёт, если кликнуть на ссылку с mailto

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

Если почтовая программа по умолчанию не установлена, появится окно выбора программы.

Обратите внимание, что адреса с нестандартными символами, например, кавычками или дополнительными знаками @, нужно записывать особым образом. Подробнее об этом и других сложных случаях читайте в RFC 6068.

Как стилизовать mailto

Для стилизации ссылки на электронную почту можно воспользоваться CSS-селектором a[href^=»mailto:»] .

a[href^="mailto:"]

tel:

Ссылка на номер телефона размечается с помощью специального префикса перед номером телефона — tel: .

Хорошим тоном считается указание в href кода страны. При этом в тексте ссылки номер может быть указан в любом удобном формате. Например, добавляем городской номер на сайте фирмы из Санкт-Петербурга:

Хорошо

В href указан номер с кодом страны и города, в тексте ссылки есть код города 812, по которому понятно, что речь о Санкт-Петербурге.

Чуть хуже

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

Плохо

Телефоны с питерскими сим-картами дозвонятся по этому городскому номеру, но жители других городов попадут куда-то ещё.

Другое обязательное требование RFC 3966 — номер телефона, указанный в href , должен быть явно виден на странице.

Хорошо

Звоните 8-900-111-11-11 по любому поводу. 

Номер видно в тексте ссылки.

Плохо

Звоните по любому поводу. 

Номер не видно в тексте ссылки, непредсказуемое поведение.

Что произойдёт, если кликнуть на ссылку с tel

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

• Android, iOS — откроется звонилка по умолчанию.
• Chrome, Edge, Firefox на Windows — откроется предложение использовать какую-нибудь программу для звонка.
• Safari — если номера нет в списке контактов, то появится подтверждение вызова, после этого откроется FaceTime.

Например, Chrome на OS X предложить открыть FaceTime для звонка, так как эта программа установлена по умолчанию. Вместо неё легко может быть Skype или любая другая звонилка.

Как стилизовать

С помощью CSS-селектора a[href^=»tel:»] .

a[href^="tel:"]

А так можно добавить иконку телефона из Unicode, которая есть во всех системах:

a[href^="tel:"]:before

Получится такой результат:

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

• RFC 6068 — The ’mailto’ URI Scheme
• RFC 3966 — The tel URI for Telephone Numbers
• The Current State of Telephone Links

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

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

• 22 ноября 2023

Знакомство с HTML

Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

• 1 ноября 2023

Специальные символы в HTML

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

• 23 октября 2023

Простое диалоговое окно на HTML

Вот короткое демо:

• 18 октября 2023

Зачем нужен метатег viewport

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

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

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

• 18 сентября 2023

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

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

• 14 сентября 2023

В чём отличия цитат blockquote, cite и q

В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.

• 12 сентября 2023

Осмысленный alt-текст: 6 правил

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

Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

• 31 июля 2023

Растровая и векторная графика

Давайте попробуем разобраться, в чём отличие растровой графики от векторной.

• 13 июня 2023

Как понять, что перед вами заголовок

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

Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.

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

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

• 8 июня 2023