Как использовать ссылки mailto: и tel: — Блог HTML Academy

В статье рассмотрим как сделать ссылку на почту на сайте с mailto – примеры HTML кода, дополнительные параметры, CSS оформление, конструктор ссылок и др.

mailto:

Ссылка формируется из нескольких частей. Сначала в адресе ставится префикс mailto:, после которого указывается адрес почты. Это самый простой вариант.

<a href=”mailto:[email protected]”>Напишите нам</a>

Текст письма указывается с помощью параметра body

<a href=”mailto:[email protected]&body=привет”>Напишите нам</a>

За тему письма отвечает параметр subject.

<a href=”mailto:[email protected]&body=привет?subject=вопрос”>Напишите нам</a>

Можно даже указать кого-то в копии, для этого используются параметры cc и bcc.

<a href=”mailto:[email protected]&[email protected]?body=Привет, подпишитесь на рассылку”>Напишите нам</a>

Что произойдёт, если кликнуть на ссылку с mailto

Откроется почтовая программа, в которой уже будут заполнены все нужные поля. Например, так ссылку выше обработает программа «Почта» в OS X:

Скриншот программы Почта с заполненными полями из ссылки.

Если почтовая программа по умолчанию не установлена, появится окно выбора программы.

Обратите внимание, что адреса с нестандартными символами, например, кавычками или дополнительными знаками @, нужно записывать особым образом. Подробнее об этом и других сложных случаях читайте в RFC 6068.

Как стилизовать mailto

Для стилизации ссылки на электронную почту можно воспользоваться CSS-селектором a[href^=”mailto:”].

a[href^=”mailto:”] { font-size: 16px; line-height: 32px; color: #000000;}Стилизованная ссылка mailto.

Поставить ссылку

В блочном и HTML-редакторе UniSender.

1. Открываем письмо в редакторе.

2. Выделяем текст, который хотим сделать ссылкой.

Выделяем текст

3. На панели инструментов находим кнопку «Вставить / Редактировать ссылку» или нажимаем Ctrl+L.

панель инструментов

4. Открывается новое окно. Выбираем тип ссылки — «Email». Ниже вводим адрес, на который будем отправлять письмо. Кроме адреса можно ввести тему и текст сообщения.

Параметры предзаполненного письма

Нажимаем OK. Теперь, если клиенты щёлкнут по ссылке, у них откроется автоматически предзаполненное письмо.

Если верстаете вручную. Вставляем в HTML-код ссылку с такими параметрами:

<a href=“mailto:order@mysite.com?subject=Заказ%20тура&body=Страна:%0AНомер%20для%20связи:»>order@mysite.com</a>

где mailto:order@mysite.com — адрес получателя,
subject — тема письма,
body — текст письма,
%20 — спецсимвол для вставки пробела,
%0A — спецсимвол для переноса строки.

При клике на ссылку из примера у клиента откроется такое письмо:

Пример письма

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

Открытие в новом окне

Если на пользовательском компьютере одна из почтовых программ (Apple Mail, MS Outlook и т.п.) установлена как приложение, срабатывающее по умолчанию для текущей задачи, то при клике на mailto-линк откроется соответствующее приложение с новым созданным письмом. Причем не важно указан ли здесь атрибут target=»_blank» (срабатывание в новом окне) или нет – программа всегда реагирует одинаково.

Когда же для почты вы используете веб-клиент, например, указали в Chrome в качестве базового почтового приложений Gmail, то клик по ссылке выполняет такие же действия, как и в любом другом случае — то есть без указания открытия в новом окне вы просто будете перенаправлены сходу на Gmail (текущая открытая страница пропадет).

В принципе, прописывание target=»_blank» для всех линков на сайте такой же спорный вопрос как и отключение правого клика мыши. Но даже если вы против этого атрибута в целом, то как минимум, для ссылки на адрес почты это имеет смысл делать.

<a href=”mailto:youremail@somesite.com” target=”_blank” rel=”noopener noreferrer”> Напишите нам </a>

<a href=”mailto:youremail@somesite.com” target=”_blank” rel=”noopener noreferrer”> Напишите нам </a>

PHP-МАСТЕР.
От теории до собственной CMS интернет-магазина
 

php.jpg

Подробнее

Современные тенденции веб-разработки


Подробнее

tel:

Ссылка на номер телефона размечается с помощью специального префикса перед номером телефона — tel:.

<a href=”tel:+79001111111″>+7-900-111-11-11</a>

Хорошим тоном считается указание в href кода страны. При этом в тексте ссылки номер может быть указан в любом удобном формате. Например, добавляем городской номер на сайте фирмы из Санкт-Петербурга:

Хорошо

<a href=”tel:+78121111111″>(812) 123-45-67</a>

В href указан номер с кодом страны и города, в тексте ссылки есть код города 812, по которому понятно, что речь о Питере.

Чуть хуже

<a href=”tel:+78121111111″>123-45-67</a>

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

Плохо

<a href=”tel:1234567″>123-45-67</a>

Телефоны с питерскими сим-картами дозвонятся по этому городскому номеру, но жители других городов попадут куда-то ещё.

Другое обязательное требование RFC 3966 — номер телефона, указанный в href, должен быть явно виден на странице.

Хорошо

Звоните <a href=”tel:+79001111111″>8-900-111-11-11</a> по любому поводу.

Номер видно в тексте ссылки.

Плохо

<a href=”tel:+79001111111″>Звоните</a> по любому поводу.

Номер не видно в тексте ссылки, непредсказуемое поведение.

Что произойдёт, если кликнуть на ссылку с tel

На смартфоне откроется приложение-звонилка, в котором будет набран указанный в ссылке номер. Если открыть такую ссылку на компьютере, где есть программа для звонков, произойдёт то же самое. Но вообще то, что произойдет, сильно зависит от устройства и операционной системы, браузера и устройства.

  • Android, iOS — откроется звонилка по умолчанию.
  • Chrome, Edge, Firefox на Windows — откроется предложение использовать какую-нибудь программу для звонка.
  • Safari — если номера нет в списке контактов, то появится подтверждение вызова, после этого откроется FaceTime.

Например, Chrome на OS X предложить открыть FaceTime для звонка, так как эта программа установлена по умолчанию. Вместо неё легко может быть Skype или любая другая звонилка.

Google Chrome предлагает открыть facetime для звонка после клика по ссылке.

Windows на ноутбуке предложит выбрать, с помощью какой программы открывать ссылки tel:

Диалоговое окно выбора программы для звонков по умолчанию в Windows.

Как стилизовать

С помощью CSS-селектора a[href^=”tel:”].

a[href^=”tel:”] { font-size: 16px; line-height: 32px; text-decoration: none; color: #000000;}

А так можно добавить иконку телефона из Unicode, которая есть во всех системах:

a[href^=”tel:”]:before { content: “260e”; margin-right: 0.5em;}

Получится такой результат:

Стилизованная ссылка tel с иконкой телефона.

Советы

  • Тегом привязки <a> можно пользоваться по-разному. Почитайте об этом теге в интернете, чтобы эффективно использовать его.
  • Теги привязки должны находиться внутри раздела body (<body>…</body>) HTML-документа. Если этот тег вставить в другое место документа, это приведет к ошибкам или запуску почтового клиента при загрузке веб-страницы (независимо от того, открыл ли страницу другой пользователь или это сделали вы), что негативно повлияет на загрузку страницы.

Конструктор ссылок mailto

Новичкам, которые так и не поняли как сделать ссылку на почту рекомендуем глянуть сервис mailtolink.me. Он позволяет с помощью визуально понятного интерфейса заполнить все необходимые параметры сообщения и на выходе получить готовый html mailto код.

Конструктор ссылок mailto

Единственный нюанс, что нужно еще тестировать, – ввод русских букв, сервис преобразовывает их в определенные символы. Возможно, проще будет создать сначала англоязычный вариант линка, а потом поменять фразы в нем.

Вместо послесловия

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

Пример

В примере амперсанды (&) заменены на соответствующие мнемоники (&amp;), так как иначе документ не пройдёт валидацию.

Живой пример: отправить ссылку другу.

Не пропускайте новые статьи

Подписывайтесь на соцсети

Делимся новостями и свежими статьями, рассказываем о новинках сервиса.

Статьи почтой

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

Спасибо, ждите письмо.

Проверяйте почту – письмо придет в течение 5 минут (обычно мгновенно).

Рейтинг
( 1 оценка, среднее 5 из 5 )
Загрузка ...