Что означает mailto перед адресом электронной почты
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 — что это и как в Html создать ссылку для отправки Емейла
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Иногда мне встречаются вопросы о том, что такое MAILTO. Люди пытаются переводить этот термин с английского (например, с помощью гугловского или яндексовского переводчика), но транслейтеры это слово не понимают. Больше толка будет, если вы спросите у них так: «mail to».
Переводчик ругнется, что это дескать «почта на», но понимать сие следует как «написать кому-то» или «отправить почтовое сообщение для кого-то». И именно этой цели служит Html тег MAILTO (точнее не тег, а атрибут, но это не суть важно).
Он позволяет создавать ссылки (читайте что такое), при переходе по которым будет открываться почтовый клиент, выбранный в вашей операционной системе принятым по умолчанию (точнее страница создания нового письма). Там уже могут быть заполнены чуть ли не все поля (адрес, тема, введен текст сообщения) и пользователю останется только нажать на кнопку «отправить».
Очень удобно бывает использовать такую мульку, но вот принципы создания правильного тега MAILTO не очевидны. Поэтому я и решил написать этот небольшой пост, чтобы вы в дальнейшем могли использовать его в качестве мануала при необходимости создать ссылку для полуавтоматической отправки сообщения на нужный вам Емайл адрес. Больно не будет, разве что чуток щекотно.
MAILTO в Html — что и как можно реализовать
Итак, прелесть MAILTO в том, что это мулька позволяет пользователю (например, посетителю вашего сайта) быстро отправить сообщение (письмо — читайте что такое электронная почта). При этом ему не потребуется ни почтовый клиент открывать, ни Емайл адрес с сайта копировать — при клике по такой ссылке все произойдет на автомате. Попробуйте сами кликнуть по этой тестовой ссылке: Отправить письмо админу KtoNaNovenkogo.ru
Можно будет и тему сообщения в эту ссылку зашить, и даже его содержание (текст). Последнее может быть удобно, например, при отправке сообщений об обнаружении какой-то определенной ошибки на сайте или при заказе какого-нибудь бесплатного курса, где текст может быть стандартным, а пользователю только по кнопке «Оправить» останется жмакнуть для отправки вам сообщения.
Например, при клике по приведенной чуть выше ссылке ваш почтовый клиент сам заполнит аж целых три поля:
Код такой ссылки с MAILTO, правда, будет выглядеть несколько монструозно, но во-первых, пользователь его все равно не увидит, а во-вторых, чуть ниже я на пальцах покажу насколько тут все просто устроено (правда, правда):
Конечно же, на сайте для этой же цели может быть уместно установить форму обратной связи, но и MAILTO имеет право на жизнь, а по части автоматической подстановки текста этот вариант может дать фору многим формам. К тому же, такую ссылку можно будет отправить в Html письме или разместить на форуме, где это позволяется. В общем, штука полезная и вполне может пригодиться. Хотя бы будете знать где искать, если добавите этот пост в закладки.
Синтаксис ссылок с MAILTO для отправки Емайл сообщений
Синтаксис до безобразия прост, хотя итоговая конструкция и может показаться через чур перегруженной. Знаете какой будет самый простой вид ссылки использующей MAILTO? Скорее всего догадываетесь — это когда в открывшемся почтовом клиенте введется только лишь Емайл-адрес того, кому это письмо будет отправлено, а все остальные поля (тему и текст сообщения) пользователь должен будет заполнять самостоятельно. Выглядеть это дело будет примерно так: Отправить письмо админу KtoNaNovenkogo.ru
Т.е. всего лишь заменяете в теге ссылки А (она же и гиперссылка А) атрибут HREF на MAILTO, а сразу после него без пробела, но через двоеточие пишите тот Емайл адрес, который вставится в поле «Кому» при создании нового сообщения в открывшемся почтовом клиенте на компьютере пользователя.
Проще некуда. Но вот полная запись MAILTO может выглядеть намного сложнее, и схематично ее можно представить так (квадратные скобки писать не нужно — они приведены только для визуального отделения отдельных частей записи друг от друга, чтобы вам это было проще разложить в мозгу по полочкам:
Т.е. в предыдущем (простейшем) примере мы использовали только:
Но, как видите, можно после этого дела поставить знак вопроса (?) и дописать много чего интересного, а именно такие вот параметры:
Последние два параметра не факт, что вы будете использовать, тем более, что если требуется отправить письмо на несколько адресов, то проще их будет перечислить через запятую прямо непосредственно после MAILTO: Отправить письмо админу KtoNaNovenkogo.ru
Ничего необычного в записи не заметили? Я же ведь сказал через запятую, а сам какую-то лабуду из набора символов использовал. Что это? А это спецсимволы, которые лучше использовать вместо запятых, а также пробелов, амперсандов и других специфических знаков. Так оно надежнее будет, ибо не все почтовые программы их правильно воспримут.
Давайте я просто приведу тут набор спецсимволов (взятых из юникода), чтоб вам было понятнее:
Думаю, что после этого вам становится понятнее тот код ссылки, который я привел в самом начале этого поста.
Внимательность вам в помощь.
Итак, подытожим. После Html атрибута MAILTO через двоеточие указывается Емайл, на который должно быть отправлено сообщение. Далее при необходимости ставится знак вопроса (без пробелов) и указываются какие-то из дополнительных параметров (subject, body, cc, bcc). Они опять вводятся в строке без пробелов, а их значения указываются после знака равно. Параметры друг от друга отделяются амперсандами & (опять же без пробелов). Вот и все. Видите, как просто.
Главное не забыть закрыть двойные кавычки после ввода значения последнего параметра, да и вообще быть внимательнее. Давайте для примера введем что-то простое, не требующее использования спецсимволов (разве что только & вместо & все же придется использовать), которые сильно снижают визуализацию синтаксиса записи MAILTO: Текст Емайл-ссылки
Да, ребят, если в адресе вашего Емайл тоже присутствуют какие-либо заковыристые символы, то их лучше будет заменить на спецсимволы юникода. Например, знак вопроса в Емайла лучше будет заменить на %3F (взять код можно из этой таблицы — просто найдите знак, кликните по нему и скопируйте код, добавив в записи MAILTO перед кодом знак процентов).
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Комментарии и отзывы (7)
Оно все так, но маилту требует офлайнового настроенного почтового клиента!
А большинство пользуют только онлайн.
Eugene: да, конечно же, есть такая проблема. Кто-то, правда, из фанатов, например, Гмайла, устанавливают в браузер расширения, которые предоставляют возможность сделать онлайновый почтовый клиент Гмайл умолчательной программой на компьютере, в которой и будут открываться все ссылки с E-mail адресами mailto 🙂
У меня Оутлок выскакивает.
Почему при переходе по ссылке в форме письма и в теле (в моем случае оутлук),
какие то абракадабра символы вместо приветственного текста.
Появляется проблема: каждый браузер обрабатывает перенаправление на mailto по своему. У одних Ваш пример получается корректно, у других нет. Например, последовательность %0D%0A часто бывает не воспринимается как переход на другую строку а передается в мэйл-программу один в один.
Есть ли возможность, чтобы письмо отправлялось в фоновом режиме?
Спасибо за статью. Мне она очень пригодилась, для создания шаблона нулевого письма при подписке читателя, в нем надо было вставать ссылку на переход в почту пользователя, чтобы со мной связаться напрямую.
Я все не знал, как это сделать. Вот ещё осталось сделать финальный штрих, перевести пользователя на отдельные почтовые ящики в зависимости от того, чем они пользуются.
Например он может выбрать любой почтовый сервис, и при клике на иконку или ссылку переходит на него. Как это реализовать? Спасибо.
Ссылки на почту mailto и номер телефона tel
Современный язык разметки HTML позволяет ставить ссылки не только на страницы сайта, их элементы или файлы для скачивания, но и на номер телефона, электронную почту.
Сегодня мы обсудим такие URI схемы как mailto и tel или, другими словами, как поставить на сайте ссылку на электронную почту и номер телефона.
Ссылка mailto (гиперссылка на электронную почту)
Ссылка на электронную почту действует по следующему принципу:
При клике на ссылку mailto браузер вызывает почтовую программу, которая установлена на компьютере или в браузере пользователя по умолчанию.
Если у вас установлены расширения браузера Gmail или Яндекс.Почта, переход может быть выполнен на один из этих почтовых клиентов. На Windows, при установленном Office пакете это может быть также Microsoft Outlook.
При переходе по ссылке mailto откроется страница написания письма. В строку адреса получателя («Кому» в Gmail) будет автоматически вписан электронный адрес, указанный в href атрибуте mailto ссылки.
Как поставить ссылку на электронную почту
Вот пример ссылки на почтовый ящик:
Ссылка tel на номер телефона
При выдаче вашего адреса электронной почты на сайте люди все еще используют синтаксис mailto:[email protected] для ссылки?
8 ответов
Отправить отзыв: [email protected]
Получить помощь от наша дружественная группа поддержки: [email protected]
Edit:
Бывают ситуации, когда контактная форма может работать или быть предпочтительной, но это не универсальное решение. Существуют ситуации, в которых персональная контактная информация должна быть опубликована, и чтобы люди обращались к вам через веб-форму вместо предпочитаемого почтового клиента, являются субоптимальными. Поэтому вы должны использовать их там, где это необходимо.
Честно говоря, я думал, что мы прошли мимо mailto: ссылки для адресов электронной почты (или используя адреса электронной почты, если на то пошло). Мы живем в золотой век спама, и гораздо более правдоподобно иметь контактную страницу или позволить людям копировать и вставлять контактный адрес электронной почты, поскольку я нахожу mailto: ссылки навязчивые и пограничные гнев, возникающие при попытке и открытии Outlook все время когда я использую Gmail.
Они могут быть стандартными, но нет правила, утверждающего, что вы не можете использовать другие методы для достижения того же.
Я действительно нахожу это довольно разрушительным. 99,9% времени, когда я нажимаю на что-то похожее на ссылку, я ожидаю, что она заберет мне еще одну веб-страницу. Открытие другой программы автоматически не является отличным пользовательским интерфейсом. Эта проблема возникает в файлах PDF.
Для электронной почты лучшим решением для пользовательского интерфейса является предоставление контактной формы. Он не подрывается, и вы можете контролировать часть вывода.
Я все еще поддерживаю почтовые ссылки, потому что анекдотические данные свидетельствуют о том, что многие люди (включая меня) не доверяют формам веб-контактов. Когда вы отправляете электронное письмо, вы можете точно увидеть, к кому он пришел, вы знаете, был ли отказ в доставке, и у вас есть архив и контрольный журнал вашей корреспонденции. С помощью веб-формы вы просто нажимаете кнопку и надеетесь, что она кому-то понравится. Слишком часто вы просто получаете сообщение об ошибке о какой-либо проблеме с веб-сайтом, а затем застряли.
Я бы порекомендовал styling mailto ссылки, чтобы они всегда отображались с маленькой иконкой почты рядом с ними. Это, по крайней мере, дает четкое представление о том, что вы собираетесь отправить электронное письмо.
«Получите помощь от нашей дружественной группы поддержки: [email protected] «
, потому что по-прежнему существует вероятность того, что пользователь может случайно щелкнуть ссылку mailto, выделив адрес. Это серьезно нарушает работу пользователя, что приводит к разочарованию пользователей, покидающих сайт.
Просто подчеркивание адреса электронной почты является лучшим способом указания важного адреса.
«Получите помощь от нашей дружественной группы поддержки: [email protected] «
Я также считаю, что большинство пользователей имеют опыт копирования и вставки разделов текста в Интернете. Поэтому, если вы хотите, чтобы вас всех угождали, просто разрешите пользователям копировать и вставлять адрес электронной почты в почтовый клиент по своему выбору.
Исключив ссылки mailto:, вы можете убедиться, что они не отображаются в неожиданных местах. Принимая дополнительные 10 секунд, которые требуется, чтобы скопировать и вставить адрес электронной почты, это не остановит многих пользователей; тем не менее, размещение ссылки, которая съедает 30 секунд, путем создания нежелательной программы, скорее является нарушителем транзакций.
Это должно дойти до аудитории.
Mailto ссылки великолепны при работе с корпоративной аудиторией, и перспективы являются плодовитыми.
Вне предприятия у них есть плюсы и минусы. Мне лично не нравятся ссылки mailto и не ожидайте (или не хотят) их на каждом сайте. В качестве примера, когда я делаю и не хочу их, я бы ожидал форму на jezebel.com вместо mailto, но mailto на nytimes.com. Это строго зависит от их содержания.
Вы всегда должны использовать форму с подтверждением по следующим причинам:
Мы боремся с этим прямо сейчас на школьном веб-сайте. Формы Mailto вызывают проблемы с почтовыми клиентами в Интернете, но контактные формы предоставляют возможность отправить анонимное письмо в школу. В большинстве случаев это нормально, но есть небольшой процент времени, когда электронная почта является издевательством, оскорбительной, угрожающей и /или неуместной. Хотелось бы, чтобы было простое решение.
Проблема с почтовыми ссылками mailto и что использовать вместо них
Пару месяцев назад я и моя подруга Amy Hupe открыли совместное предприятие под названием Frankly, целью которого является помощь в создании понятных, доступных и ориентированных на пользователя цифровых продуктов.
Мы считаем крайне важным формирование правильных основ. Это означает, что нужно тщательно продумать общую картину, а также обратить пристальное внимание на мельчайшие детали.
Вместе мы написали эту статью об одной из таких деталей, с которой столкнулись на пути реализации нашего проекта.
Проблема с mailto ссылками
Для нас было очень важно, чтобы веб-сайт отражал наши основные ценности, оставаясь при этом простым, доступным и удобным в использовании.
Один из вопросов, с которыми мы столкнулись заключался в том, добавлять стандартные ссылки mailto в адрес электронной почты или нет.
Мы не хотели добавлять их, потому что, несмотря на то, что они широко используются в Интернете, они представляют ряд проблем.
Во-первых, ссылки mailto затрудняют копирование адреса, например, если вы хотите поделиться адресом электронной почты с кем-то еще.
Во-вторых, некоторые пользователи используют более одного почтового приложения, и ссылка использует только то приложение, которое было установлено по умолчанию, не давая возможности использовать другое.
И, наконец, у многих пользователей не настроено приложение электронной почты. Это означает, что ссылка может привести их в тупик или «кроличью нору».
Например, когда вы кликаете по адресу электронной почты в Chrome на своем Macbook, приложение «Почта» загружает запрос на настройку учетной записи электронной почты. Мы используем Gmail, и настроить его в Chrome действительно сложно.
По этим причинам мы решили убрать ссылку mailto и добавить адрес почты в виде обычного текста.
Но у этого решения были свои недостатки.
Плюсы ссылок mailto
Мы сомневались в правильности решения убрать ссылку mailto, потому что:
Но это все равно не гарантирует прекрасный опыт пользователю, который хочет скопировать адрес электронной почты и добавить его в заметку или отправить контакту.
Предлагая выбор
Учитывая наличие явных преимуществ и недостатков ссылок mailto, мы решили, что лучше всего предоставить пользователям выбор, который является одним из принципов инклюзивного дизайна.
Таким образом, на следующий день после запуска сайта и после краткого обсуждения в Twitter, мы добавили ссылку mailto рядом с адресом электронной почты, сохранив сам адрес в виде простого текста.
Люди, которые хотят перейти к отправке письма могут нажать на ссылку mailto, а люди, которые хотят скопировать адрес электронной почты могут скопировать текст.
Добавление кнопки копирования адреса
Возможно, это было неплохое решение, но ссылки mailto настолько распространены, что некоторые пользователи по-прежнему ожидают, что смогут кликнуть по адресу электронной почты для написаться письма.
Чтобы исправить это, мы решили добавить ссылку mailto к адресу электронной почты, и расположить рядом с ней кнопку «copy address», которая позволяет пользователям быстро скопировать адрес в буфер обмена.
Так они могут вставить скопированный адрес в свое почтовое приложение, чтобы написать электронное письмо, добавить его в заметки или поделиться им с контактом.
Это дает пользователям тот же выбор, что описан выше, но дизайн выглядит аккуратнее и привычнее.
Тем не менее, стоит отметить, что это решает только одну из трех проблем ссылок mailto, которые мы упоминали выше: они затрудняют пользователям копирование адреса.
Даже используя наше решение, люди, переходящие по этой ссылке, по-прежнему:
Что нам действительно нравится
Это такая распространенная проблема, и кажется, что браузеры и операционные системы должны это исправить.
Мы считаем, что это будет идеальным решением, если пользователи, нажимающие на ссылку mailto, увидят меню с такими вариантами:
Это отвечает наиболее распространенным потребностям и дает большинству пользователей возможность двигаться вперед.
Вот такая небольшая история о ссылках mailto. Что вы думаете?