Mailto — HTML ссылка на электронную почту на сайте
Чтобы как-то разбавить дизайнерскую тематику посмотрим сегодня еще один урок по верстке – после предыдущего поста о CSS hover эффектах прошло уже немало времени. Данная заметка будет посвящена вопросу создания ссылки на почту в html. Все это реализуется с помощью обычного тега A, который не смотря на всю свою простоту, может использоваться не только для оформления гиперссылкок, но и имеет несколько интересных нюансов.
Базовый синтаксис выглядит так:
Здесь в качестве атрибута href пишете фразу mailto и почту, куда нужно отправить сообщение. Внутри тега располагается текст линка, на который пользователь будет нажимать.
Проблема этой конструкции заключается в не самом лучшем UI/UX решении для пользователей, т.к. клик по линку выполняет действия, которые далеко не всем нравятся. Это как с PDF-документом, когда тот сразу открывается в браузере.
Открытие в новом окне
Если на пользовательском компьютере одна из почтовых программ (Apple Mail, MS Outlook и т.п.) установлена как приложение, срабатывающее по умолчанию для текущей задачи, то при клике на mailto-линк откроется соответствующее приложение с новым созданным письмом. Причем не важно указан ли здесь атрибут target=»_blank» (срабатывание в новом окне) или нет – программа всегда реагирует одинаково.
Когда же для почты вы используете веб-клиент, например, указали в Chrome в качестве базового почтового приложений Gmail, то клик по ссылке выполняет такие же действия, как и в любом другом случае — то есть без указания открытия в новом окне вы просто будете перенаправлены сходу на Gmail (текущая открытая страница пропадет).
В принципе, прописывание target=»_blank» для всех линков на сайте такой же спорный вопрос как и отключение правого клика мыши. Но даже если вы против этого атрибута в целом, то как минимум, для ссылки на адрес почты это имеет смысл делать.
Дополнительные параметры в письме
Если вы где-то видели фишку, когда при открытии нового письма там автоматически вводится тема сообщения и даже его содержимое, то знайте – все это легко делается через следующие доп.параметры:
Вы даже можете использовать механизм добавление дополнительных получателей (в том числе и скрытых) — вставляйте специальные переменные CC (копия) и BCC (скрытая копия). Значения в данных опциях разделяются запятыми, а между ними ставится символ «&».
Конструктор ссылок mailto
Новичкам, которые так и не поняли как сделать ссылку на почту рекомендуем глянуть сервис mailtolink.me. Он позволяет с помощью визуально понятного интерфейса заполнить все необходимые параметры сообщения и на выходе получить готовый html mailto код.
Единственный нюанс, что нужно еще тестировать, – ввод русских букв, сервис преобразовывает их в определенные символы. Возможно, проще будет создать сначала англоязычный вариант линка, а потом поменять фразы в нем.
CSS оформление
В статье про подчеркивание ссылок и текста с CSS вы могли видеть много интересных приемов. Учитывая то, что люди не особо любят сюрпризы, есть идея выделять ссылки на электронную почту каким-то другим образом, отличимым от обычных. Это, в принципе, логично, т.к. клики по ним будут давать разные результаты.
Первый прием – подставлять в качестве анкора непосредственно сам почтовый адрес:
Также дополнительно можно задать CSS-стиль:
Этот код применяется во всем A-тегам, поэтому, если вам нужно выделять лишь некоторые, дополнительно используйте классы/id.
Плагин IHateMailto в Chrome/Firefox
Для людей, которых функциональность данного атрибута нереально раздражает, разработчики придумали специальное расширение для браузеров — ihatemailto.com.
Его функциональность состоит из двух частей: во-первых приложение блокирует традиционный механизм срабатывания почтовой ссылки, а во-вторых, сам email-адрес при этом копируется в буфер обмена.
Почтовая форма
Еще один экстравагантный вариант применения ссылки mailto в html предложен авторами оригинальной статьи, которую мы сегодня и переводили. Как вы знаете, тег Form позволяет с помощью директивы GET переадресовывать на внешний URL-адрес, и в качестве этого URL может выступать mailto-ссылка с введенными в форме параметрами.
Ссылки на почту mailto и номер телефона tel
Современный язык разметки HTML позволяет ставить ссылки не только на страницы сайта, их элементы или файлы для скачивания, но и на номер телефона, электронную почту.
Сегодня мы обсудим такие URI схемы как mailto и tel или, другими словами, как поставить на сайте ссылку на электронную почту и номер телефона.
Ссылка mailto (гиперссылка на электронную почту)
Ссылка на электронную почту действует по следующему принципу:
При клике на ссылку mailto браузер вызывает почтовую программу, которая установлена на компьютере или в браузере пользователя по умолчанию.
Если у вас установлены расширения браузера Gmail или Яндекс.Почта, переход может быть выполнен на один из этих почтовых клиентов. На Windows, при установленном Office пакете это может быть также Microsoft Outlook.
При переходе по ссылке mailto откроется страница написания письма. В строку адреса получателя («Кому» в Gmail) будет автоматически вписан электронный адрес, указанный в href атрибуте mailto ссылки.
Как поставить ссылку на электронную почту
Вот пример ссылки на почтовый ящик:
Ссылка tel на номер телефона
Ссылка на E-mail или Mailto в HTML
Если кликнуть по такой ссылке, то откроется почтовая программа, заданная по умолчанию для обработки ссылок-mailto, в которой, в шаблоне письма, поле Кому будет уже заполнено соответствующим адресом.
Адрес электронной почты указывать необязательно; в этом случае поле Кому останется пустым; однако двоеточие пишется всегда.
Параметры
Помимо простого указания адресата, в ссылках-mailto можно использовать параметры, с помощью которых почтовой программе сообщаются тема и содержание письма, а также кому отправить обычную и скрытую копию.
| Параметр | Значение |
|---|---|
| subject | тема письма |
| body | содержание письма |
| cc | кому отправить обычную копию |
| bcc | кому отправить скрытую копию |
Синтаксис
То есть, сначала указывается слово «mailto»; затем — двоеточие (:); затем — адрес электронной почты (необязательно); затем — вопросительный знак (?); затем — пары «параметр=значение», разделённые амперсандом (&).
Адресов почты можно указывать несколько, разделяя их запятой или пробелом.
Пример
В примере амперсанды (&) заменены на соответствующие мнемоники (&), так как иначе документ не пройдёт валидацию.
Mailto в формах
В качестве обработчика формы, путь к которому указывается в атрибуте action элемента
Как сделать активную ссылку в электронном письме или в подписи к письму?
Как сделать активную ссылку на сайт в электронном письме или в подписи к письму?
На Яндексе, на Майле.
Активная ссылка в письме
На данный момент для того, чтобы введённый адрес сайта стал ссылкой, достаточно нажать после него на клавишу Enter.
Он изменит цвет (например, на голубой):
Если вам требуется, чтобы ссылка была «спрятана» под определённым словом (словосочетанием), то нужно воспользоваться инструментом для вставки ссылки.
Ставим курсор в нужное место.
На панели форматирования текста нажимаем на «Ещё», в выпадающем меню выбираем «Ссылка».
Теперь пишем адрес ссылки (то есть адрес сайта) и текст ссылки (подпись).
Нажимаем на «Добавить».
Вот что получится в результате:
2) Почта mail.yandex.ru
В почте Яндекса алгоритм будет похожим.
Нажимаем на значок «Вставить/изменить ссылку» (выделен красным на скриншоте):
Затем добавляем адрес и подпись:
После нажатия на «Добавить» ссылка появится в письме:
Аналогичным образом добавляется активная ссылка и в подписи к письму, это делается с помощью всё тех же инструментов.
Нажимаем кнопку работы со ссылками (она обозначена на рисунке) и попадаем в меню.
Внизу вводите адрес, а еще ниже вводите текст под которым будет «замаскирована» эта ссылка.
Можно ссылку оставить и неизменной, как адрес вводимый в адресную строку, тогда в поле «текст» укажите туже ссылку, что и в поле «адрес»
Сейчас отправить ссылку в письме очень просто. При этом вы можете ссылку отправить в «чистом виде» (именно адресом), либо замаскировать ссылку под каким-либо текстом.
Если вам не принципиально, как будет выглядеть ваша ссылка в письме, тогда просто вставляете ссылку в текст, после того, как вы нажмёте «Enter» адрес ссылки станет активным.
Другой способ, когда ссылка спрятана, замаскирована за текстом. В этом случае необходимо воспользоваться панелью задач.
На панели задач находим кнопку зрительно напоминающую два квадрата, скреплённые вместе.
Заполняете поля, вставляете адрес ссылки и текст под которым она будет спрятана.
Остается лишь отправить письмо.
Ничего специально делать для этого не надо, когда вы вставляете ссылку в свое письмо, то после нажатия кнопки «ввод», она меняет цвет и становится активной. Если вы захотите ссылку замаскировать текстом, то, например, в почте Яндекс надо нажать специальную кнопку (выделена красным квадратиком):
После этого вам предоставят форму, в которую надо будет ввести адрес ссылки и текст, которым вы хотите ее замаскировать.
В почте Мэйл такой же знак находится в пункте верхнего меню «Еще». Все действия такие же, вам также предоставят форму, которую надо будет заполнить, ввести адрес вашей ссылки и «маскировочный» текст.
В данное время отправить ссылку красивую в письме совсем несложно. Нужно открыть окно для отправки и вверху вы увидите значок для ссылки.
Эта ссылка обычно выделена другим цветом и ее видно в тексте, после нажатия на нее человек попадает на нужный сетевой адрес, который вы ему указали.
Значки окна выглядят примерно вот таким образом, как на картинке, и разобраться сможет любой человек.
В Аутлуке можно запрограммировать ссылку заранее, и она будет отправляться со всех ваших адресов, там имеется такая опция, называется Подпись.
Делаем ссылку на 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-х Уровневая
Партнерская программа!
Присоединяйтесь.
