0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

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-ссылка с введенными в форме параметрами.

Делаем ссылку на e-mail

Обновлено 11.12.2015 г.

Наверное Вы не раз обращали внимание, что на многих сайтах есть ссылка вида: Написать автору (когда мы не видим истинного адреса электронной почты) или указывается e-mail адрес например вот так: admin@luksweb.ru. Кликнув на такую ссылку открывается почтовая программа, в которой уже частенько заполнены поля: Кому (e-mail адрес адресата), Тема письма , иногда еще некоторые необязательные параметры.

Из этой статьи Вы узнаете, как создаются такие ссылки на 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

Здравствуйте! А какая может быть причина, что кликнув по ссылке на почтовый ящик, — нечего не происходит. И никакая почтовая программа не открывается. На компе outlook установлен. Спасибо.

Комментарии добавил(а): Серёня
Дата: 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, установленная на сервере.

Добавление обратного адреса электронной почты (mailto:) ссылка в сообщении

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

В теле можно включить ссылки обратного адреса электронной почты в сообщениях электронной почты. При щелчке ссылки откроется пустое сообщение уже адресованные человека, компании или любого назначения что вы выбрали. Ссылки к примеру, такие как mailto: someone@example.com уже адресованные службу технической поддержки вашей компании.

Как видите, можно форматировать текст ссылки (слова, которые просмотреть и выберите команду) служить нужного.

Добавление ссылки обратного адреса электронной почты

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

На вкладке » Вставка » выберите ссылку или гиперссылки.

В разделе Связать с щелкните элемент электронной почтой.

Введите адрес электронной почты в поле адрес электронной почты или выберите адрес электронной почты из списка недавно использовавшиеся адреса электронной почты.

Если нужно изменить текст ссылки, введите его в поле Текст.

Чтобы настроить всплывающую подсказку, которая появляется при наведении указателя на ссылку, нажмите кнопку подсказка и введите текст, который вы хотите. Если не указать подсказку, «mailto», за которым следует адрес электронной почты и тему подсказки используются в Outlook.

Нажмите кнопку ОК.

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

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

Источники:

http://design-mania.ru/web-design/html-css/mailto/
http://www.luksweb.ru/view_post.php?id=33
http://support.office.com/ru-ru/article/%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BE%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D0%B3%D0%BE-%D0%B0%D0%B4%D1%80%D0%B5%D1%81%D0%B0-%D1%8D%D0%BB%D0%B5%D0%BA%D1%82%D1%80%D0%BE%D0%BD%D0%BD%D0%BE%D0%B9-%D0%BF%D0%BE%D1%87%D1%82%D1%8B-mailto-%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B0-%D0%B2-%D1%81%D0%BE%D0%BE%D0%B1%D1%89%D0%B5%D0%BD%D0%B8%D0%B8-86cea017-8f4e-4f20-85aa-0683779ccb0a

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector