Ссылки на почту mailto и номер телефона tel
Современный язык разметки HTML позволяет ставить ссылки не только на страницы сайта, их элементы или файлы для скачивания, но и на номер телефона, электронную почту.
Сегодня мы обсудим такие URI схемы как mailto и tel или, другими словами, как поставить на сайте ссылку на электронную почту и номер телефона.
Ссылка mailto (гиперссылка на электронную почту)
Ссылка на электронную почту действует по следующему принципу:
При клике на ссылку mailto браузер вызывает почтовую программу, которая установлена на компьютере или в браузере пользователя по умолчанию.
Если у вас установлены расширения браузера Gmail или Яндекс.Почта, переход может быть выполнен на один из этих почтовых клиентов. На Windows, при установленном Office пакете это может быть также Microsoft Outlook.
При переходе по ссылке mailto откроется страница написания письма. В строку адреса получателя («Кому» в Gmail) будет автоматически вписан электронный адрес, указанный в href атрибуте mailto ссылки.
Как поставить ссылку на электронную почту
Вот пример ссылки на почтовый ящик:
Ссылка tel на номер телефона
Делаем ссылку на e-mail
Обновлено 11.12.2015 г.
Из этой статьи Вы узнаете, как создаются такие ссылки на e-mail (на адреса электронной почты).
На самом деле все очень просто. Ссылка на e-mail (на адрес электронной почты) создается как и обычная ссылка, только вместо URL нужно прописать следующее:
mailto:адрес электронной почты
Чтобы понять как это сделать практически, смотрите код Листинга 1:
Листинг 1
В якоре ссылки пишем фразу: Написать автору или что-нибудь в этом духе, если не хотите чтобы адрес вашей электронной почты был виден (но это не значит что Ваш e-mail адрес будет защищен от сканирования спам-роботами) или указываете реальный адрес электронной почты. В этом случае откроется почтовый клиент (почтовая программа), которая установлена на вашем компьютере, с уже заполненным полем: Кому.
Почтовая гиперссылка имеет несколько не обязательных параметров (которые можно не указывать):
Вот полный листинг почтовой ссылки, с указанием всех параметров:
Листинг 2
Кликнув на такую ссылку, на компьютере посетителя вашего сайта откроется окно почтовой программы с уже заполнеными полями. Останется только дописать текст и отправить письмо.
Попробуйте кликнуть: Написать автору сайта. Очень удобно. Это кстати мой реальный адрес и если Вы сейчас отправите что-то отсюда, то я получу ваше письмо.
Удачи.
Читайте так же:
Поделитесь этой информацией со своими друзьями!
Комментарии к этой статье (уроку):
Комментарии добавил(а): Дмитрий
Дата: 2010-12-16
спасибо, очень полезная статья
Комментарии добавил(а): Лина
Дата: 2010-12-24
Спасибо! как все оказывается просто 🙂
Комментарии добавил(а): АндрейК
Дата: 2010-12-24
Комментарии добавил(а): brea
Дата: 2011-01-05
Комментарии добавил(а): Ирина
Дата: 2011-08-25
Спасибо, очень полезно. Я думаю для таких уроков-подсказок пора сделать кнопку «спасибо» как на торрентах.
Комментарии добавил(а): Сергей
Дата: 2014-04-06
Комментарии добавил(а): Серёня
Дата: 2014-07-23
Это текст сообщения, а если надо веб-страницу?
Комментарии добавил(а): Ольга
Дата: 2015-07-03
Спасибо за статью, но у меня так и не получилось создать самой емайл рассылку.
Комментарии добавил(а): Елена
Дата: 2015-11-13
Спасибо, все получилось))
Комментарии добавил(а): Лилия
Дата: 2015-12-05
Комментарии добавил(а): Николай
Дата: 2016-04-13
Здравствуйте, у меня ссылка переходит не на почтовой портал в браузере, а на Microsoft Outlook 2010. Скажите что мне делать. Зарание спаисбо.
Комментарии добавил(а): Андрей
Дата: 2016-04-14
Все верно Николай, скрипт запускает почтовый клиен, установленный на вашем компьютере
Комментарии добавил(а): Светлана
Дата: 2016-07-08
У меня при нажтии на такую ссылку, ничего не происходи. Подскажите, что это может быть?
Комментарии добавил(а): АндрейК
Дата: 2016-07-10
Светлана, я не волшебник и увы, не умею дистанционно выявлять проблемы. Однозначно могу сказать одно: Вы где то допустили ошибку. Пришлите свои исходники, посмотрю и тогда смогу ответить на ваш вопрос.
Комментарии добавил(а): Анастасия
Дата: 2016-07-11
Комментарии добавил(а): Виталий
Дата: 2016-10-27
Комментарии добавил(а): Дмитрий
Дата: 2016-12-26
Добрый день. Подскажите, пожалуйста. После запуска скрипта, открывается аутлук заполняется всё что нужно, но почему-то не прицепляется внизу автоматически подпись. А если простой код писать, то подпись прицепляется. Что-то можно сделать, чтобы она прицеплялась?
Комментарии добавил(а): Виктор
Дата: 2017-02-02
Спасибо за ценную статью!
Комментарии добавил(а): Сергей
Дата: 2018-06-12
Все оказывается так просто)))
Комментарии добавил(а): Надежда Выхор
Дата: 2017-07-17
Здравствуйте, Андрей! Спасибо за информацию! Хотелось бы с Вами пообщаться.
Комментарии добавил(а): Дарья
Дата: 2018-02-15
А сталкивались ли вы с тем, что при клике на ссылку mailto из письма в некоторых Аутлуках бьется кодировка? Как-то можно на это повлиять?
Комментарии добавил(а): Андрей
Дата: 2017-12-15
Спасибо Вам большое!
Комментарии добавил(а): Светлана
Дата: 2018-04-05
БлагоДарю, воспользовалась информацией, помогло)))
Комментарии добавил(а): irmaseo.ru
Дата: 2018-05-25
все очень интересно
Комментарии добавил(а): Василий
Дата: 2019-04-05
Скажите, пожалуйста, есть ли команда, или параметры этой команды, которая бы запускала почтовый клиент без создания нового письма? Для того, чтобы посмотреть входящие письма. Хочу применить ссылку на странице с инструкцией подтверждения регистрации через письмо. Спасибо.
Комментарии добавил(а): АндрейК
Дата: 2019-04-06
Василий, почтовый клиент всегда запускается без создания нового письма. А сформированное письмо, отравляет уже либо почтовый клиент, либо скрипт. Например в PHP это делает функция MAIL, установленная на сервере.
Комментарии добавил(а): Макс
Дата: 2020-12-19
Комментарии добавил(а): Максим
Дата: 2021-02-04
Подскажите, а можно ли сделать, чтобы тема письма была не редактируемой, чтобы ее не могли изменить, просто была пред заполненной
Добавить Ваш комментарий:
 Как заработать деньги в Интернете? Создай свой ИнфоБизнес |
Хотите заработать?
2-х Уровневая
Партнерская программа!
Присоединяйтесь.
Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки.
Как использовать ссылки mailto: и tel:
Ссылки tel: нужны, чтобы сделать кликабельным номер телефона на сайте, а через mailto: можно отправить целое письмо, в котором сразу будут заполнены и адрес, и тема, и даже какой-нибудь текст. Иногда это удобно — пользователю не нужно набирать номер телефона вручную, а письмо в службу поддержки можно начать сразу с конкретной темы.
Такие форматы ссылок поддерживаются всеми браузерами, так что вы можете по необходимости использовать их в своих проектах не переживая, что где-то они не сработают.
mailto:
Ссылка формируется из нескольких частей. Сначала в адресе ставится префикс mailto:, после которого указывается адрес почты. Это самый простой вариант.
Текст письма указывается с помощью параметра body
Что произойдёт, если кликнуть на ссылку с mailto
Откроется почтовая программа, в которой уже будут заполнены все нужные поля. Например, так ссылку выше обработает программа «Почта» в OS X:
Если почтовая программа по умолчанию не установлена, появится окно выбора программы.
Обратите внимание, что адреса с нестандартными символами, например, кавычками или дополнительными знаками @, нужно записывать особым образом. Подробнее об этом и других сложных случаях читайте в RFC 6068.
Как стилизовать mailto
Для стилизации ссылки на электронную почту можно воспользоваться CSS-селектором a[href^=»mailto:»].
Хорошим тоном считается указание в href кода страны. При этом в тексте ссылки номер может быть указан в любом удобном формате. Например, добавляем городской номер на сайте фирмы из Санкт-Петербурга:
В href указан номер с кодом страны и города, в тексте ссылки есть код города 812, по которому понятно, что речь о Питере.
В этом случае жители всех городов смогут дозвониться до компании, а короткий номер будет понятен и местным. Случай перейдёт в категорию «плохо», если по сайту непонятно, из какого города компания.
Телефоны с питерскими сим-картами дозвонятся по этому городскому номеру, но жители других городов попадут куда-то ещё.
Номер видно в тексте ссылки.
Номер не видно в тексте ссылки, непредсказуемое поведение.
Что произойдёт, если кликнуть на ссылку с tel
На смартфоне откроется приложение-звонилка, в котором будет набран указанный в ссылке номер. Если открыть такую ссылку на компьютере, где есть программа для звонков, произойдёт то же самое. Но вообще то, что произойдет, сильно зависит от устройства и операционной системы, браузера и устройства.
Например, Chrome на OS X предложить открыть FaceTime для звонка, так как эта программа установлена по умолчанию. Вместо неё легко может быть Skype или любая другая звонилка.
Windows на ноутбуке предложит выбрать, с помощью какой программы открывать ссылки tel:
Как стилизовать
А так можно добавить иконку телефона из Unicode, которая есть во всех системах:
Ссылка на E-mail или Mailto в HTML
Если кликнуть по такой ссылке, то откроется почтовая программа, заданная по умолчанию для обработки ссылок-mailto, в которой, в шаблоне письма, поле Кому будет уже заполнено соответствующим адресом.
Адрес электронной почты указывать необязательно; в этом случае поле Кому останется пустым; однако двоеточие пишется всегда.
Параметры
Помимо простого указания адресата, в ссылках-mailto можно использовать параметры, с помощью которых почтовой программе сообщаются тема и содержание письма, а также кому отправить обычную и скрытую копию.
| Параметр | Значение |
|---|---|
| subject | тема письма |
| body | содержание письма |
| cc | кому отправить обычную копию |
| bcc | кому отправить скрытую копию |
Синтаксис
То есть, сначала указывается слово «mailto»; затем — двоеточие (:); затем — адрес электронной почты (необязательно); затем — вопросительный знак (?); затем — пары «параметр=значение», разделённые амперсандом (&).
Адресов почты можно указывать несколько, разделяя их запятой или пробелом.
Пример
В примере амперсанды (&) заменены на соответствующие мнемоники (&), так как иначе документ не пройдёт валидацию.
Mailto в формах
В качестве обработчика формы, путь к которому указывается в атрибуте action элемента
Как в письме дать ссылку для отправки email на мой адрес (mailto:)?
Блочный редактор писем, готовые шаблоны email, формы подписки и автоматизация. Запускайте email-рассылки, чтобы быть на связи со своими клиентами.
Как развиваться в диджитал. Какие каналы сейчас в тренде. Как зарабатывать больше и поднимать чек за свои услуги.
Рассказываем про инструменты для email-рассылок. Обсуждаем лучшие примеры и механики. Говорим о деньгах. Публикуем вакансии.
что такое mailto:
Когда клиент кликает на ссылку с mailto:, открывается уже заполненное письмо. В нём можно заранее настроить тему, адрес получателя и текст.
Дать ссылку можно двумя способами: ссылкой и кнопкой. Расскажу о каждом.
Поставить ссылку
В блочном и HTML-редакторе UniSender.
1. Открываем письмо в редакторе.
2. Выделяем текст, который хотим сделать ссылкой.
3. На панели инструментов находим кнопку «Вставить / Редактировать ссылку» или нажимаем Ctrl+L.
4. Открывается новое окно. Выбираем тип ссылки — «Email». Ниже вводим адрес, на который будем отправлять письмо. Кроме адреса можно ввести тему и текст сообщения.
Нажимаем OK. Теперь, если клиенты щёлкнут по ссылке, у них откроется автоматически предзаполненное письмо.
Если верстаете вручную. Вставляем в HTML-код ссылку с такими параметрами:
ссылка для mailto
где mailto:order@mysite.com — адрес получателя,
subject — тема письма,
body — текст письма,
%20 — спецсимвол для вставки пробела,
%0A — спецсимвол для переноса строки.
При клике на ссылку из примера у клиента откроется такое письмо:
Поставить кнопку
В блочном редакторе UniSender.
1. Добавляем блок «Кнопка».
2. Заходим в настройки блока.
3. На вкладке «Стиль» настраиваем цвет кнопки, цвет фона и шрифт.
4. Переходим на вкладку «Параметры». Здесь выбираем тип ссылки «Email», а в поле рядом вставляем ссылку:
ссылка для mailto
где order@mysite.com — почта получателя,
subject — тема письма,
body — текст письма,
%20 спецсимвол для вставки пробела,
%0A спецсимвол для переноса строки.
В поле «Текст» пишем текст кнопки.
Готово. Если клиент щелкнет по кнопке, у него откроется заботливо предзаполненное письмо.