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

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

to make an email»> See the Pen
Use a

Делаем ссылку на 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, установленная на сервере.

Добавить Ваш комментарий:

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

ОХРАНА ТРУДА

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) — АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курс по созданию Информационного Бизнеса в Интернете Узнать сейчас >>>

Хотите заработать?
2-х Уровневая
Партнерская программа!
Присоединяйтесь.

Когда нужно пересматривать инструкции по Охране труда

Что должна содержать инструкция по охране труда?

Виды инструкций по Охране труда

Статистический отчет Форма № 7-травматизм «Сведения о травматизме на производстве и профессиональных заболеваниях»

Какие отчеты необходимо сдать Специалисту по охране труда за год

Лучший сервис для массовых рассылок

Удобный инструмент для быстрых первых и повторных продаж

Cov >Поддерживаем бизнес во время карантина. Рассказываем, как оставаться на связи с клиентами и организовать удалённую работу.

7 лучших сервисов для видеозвонков

О чём писать в рассылке во время коронавируса

Антивирусный пакет для бизнеса

Школа email-маркетинга со скидкой 30%

Бесплатная консультация по email-маркетингу

UniSender помогает малому и среднему бизнесу

Почему email-маркетинг

• Email-маркетинг в 4 раза прибыльнее других маркетинговых каналов
• По ссылке в письме перейдёт в 5 раз больше людей, чем в посте на Facebook
• Читатели рассылки проведут на вашем сайте на 80% больше времени, чем те, кто её не получали

Увеличивайте продажи с помощью рассылок:

Соберите базу контактов

Актуальная и активная база позволяет вашим письмам получать в 5 раз больше откликов, чем посты в социальных сетях. Чтобы собрать контакты настраивайте интеграцию с 38 сервисами или устанавливайте удобные и красивые всплывающие формы

Отправьте первое письмо

Настройте первую рассылку, реанимируйте неактивных пользователей, а после – удерживайте их имиджевыми письмами. Дизайн письма можно создать с нуля в вашем фирменном стиле или использовать один из 100 наших бесплатных шаблонов

Улучшайте результаты

Отправляйте персонализированные письма разным сегментам аудитории, выбирайте лучшие варианты с помощью А/Б-тестирования писем и оценивайте результаты отправки из подробных аналитических отчетов

Забудьте про скучную работу

Экономьте время, настраивая автоматическую отправку писем – приветственные цепочки после регистрации, напоминания о брошенных корзинах, специальные предложения в праздники или поздравления с днем рождения

Каждый клиент UniSender получает

Готовую стратегию
email-маркетинга
для вашего бизнеса

Круглосуточную
консультацию от
наших специалистов

Доступ ко всему
функционалу сервиса

700 000 компаний уже выбрали нас

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

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

Мы активно используем сервис «Юнисендер» для проведения массовых рассылок писем с 2016 года. При работе с сервисом не возникало проблем: интерфейс удобный, понятный даже начинающему пользователю. Нам удалось автоматизировать ряд процессов и улучшить качество писем в части дизайна и статистических показателей (открываемость, прочтение). В сервисе доступная аналитика и гибкая система тарифов. Стоит отметить блог Юнисендера и службу поддержки клиентов. Я всегда оперативно находила ответы на любые вопросы с помощью данных ресурсов, а также узнала много полезной информации по трендам email-маркетинга.

Email маркетингом занимаюсь занимаюсь 7 лет и за это время был опыт работы в 5 сервисах рассылок. После положительного опыта работы с Unisender, внедрила этот сервис в 3 компаниях.

Основными причинами моего выбора в пользу Unisender было удобство сервиса, грамотный UX сайта и редактора писем, прозрачная статистика, связь с тех поддержкой 24/7.

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

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

Мы сотрудничаем с сервисом Unisender более трех лет. За это время мы неоднократно убедились в профессионализме команды, ответственном подходе к решению любых задач. Отдельно хотим отметить готовность идти навстречу! Нерешаемых вопросов просто нет. Всем желаем таких партнеров!

Для одного из клиентов нашего агентства мы заработали 15000$ за 1,5 месяца объединив социальные сети и email-рассылки. А по другому получили рекордный ROMI 9700% и сделали продажи на сумму 12000000 рублей. На уровне пользователя нравится простота в использовании и хорошая тех.поддержка. На уровне партнёра мы очень ценим дружеские взаимоотношения, открытость к новым идеям и возможность участия во всевозможных мероприятиях

Пользуемся UniSender 6 лет. На мой взгляд, по соотношению цена-возможности-качество, это лучший сервис для рассылок. Из преимуществ: развитой API, высокая скорость работы, надёжность и широкие возможности автоматизации.

Сначала мы просто рассылали массовые письма, но позже стали использовать автоматизацию для возврата клиентов. Когда и этого стало мало, мы связали нашу CRM с UniSender по API. Теперь почти вся сегментация проходит на нашей стороне, а шаблоны писем хранятся в UniSender. Так мы стали эффективно возвращать клиентов и оповещать подписчиков о новых акциях и предложениях.

Настройка кликабельного email-адреса

КАК СДЕЛАТЬ, ЧТОБЫ ПРИ КЛИКЕ НА EMAIL ОТКРЫВАЛАСЬ ПОЧТОВАЯ ПРОГРАММА

Если email указан в виджете «Текст»:

1. Выделите email и нажмите на кнопку ”Вставить ссылку”.

2. В поле ”URL” введите mailto:ваш_email без пробелов и прочих разделительных знаков, а затем нажмите на кнопку ”Вставить”.

Заметка: После нажатия кнопки ”Вставить” email начнет отображаться синим, желтым или другим цветом с подчеркиванием. Причина — браузеры автоматически распознают наличие email на сайта и изменяют его стилевое оформление согласно своим стандартам.

Если email указан в виджете «Кнопка»:

1. Откройте настройки действий кнопки;

2. Выберите действие «Открыть страницу» или «Открыть страницу в новой вкладке»;

3. В поле «Ссылка» введите mailto:ваш_email без пробелов и прочих разделительных знаков.

КАК УСТАНОВИТЬ СВОЙ ЦВЕТ И УБРАТЬ ПОДЧЕРКИВАНИЕ ДЛЯ EMAIL В ВИДЖЕТЕ «ТЕКСТ»

1. Повторно выделите email и задайте ему цвет. Цвет не изменится, но вы получите код цвета в rgb формате.

2. Теперь откройте исходный код текста.

3. Скопируйте следующие данные style=»color: rgb(255, 255, 255);”

Заметка: rgb(255, 255, 255) — это код заданного цвета, в зависимости от цвета цифры будут отличаться.

4. Поместите скопированные данные в строку, которая выглядит так href=”mailto:mymail@example.com” сразу после mailto:ваш_email поставьте пробел и вставьте ранее скопированные данные.

Должно получиться так: mymail@example.com” style=»color: rgb(255, 255, 255);”

5. Выполненные выше действия сделают email того цвета, который вы выбрали, а чтобы убрать подчеркивание к строке email@example.com” style=»color: rgb(255, 255, 255);” нужно добавить свойство text-decoration: none; чтобы получилось так mymail@example.com” style=»color: rgb(255, 255, 255); text-decoration: none;”