Как создать ссылку mailto в HTML
Хочешь знать больше про веб?
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Подписаться
×
Photo by Kate Macate on UnsplashСсылка mailto позволяет отправлять электронные письма прямо с сайта, используя почтовый клиент пользователя по умолчанию. В этой статье мы на примере рассмотрим, как создать ссылку mailto в HTML.
Базовый синтаксис ссылки mailto
Вот основной синтаксис ссылки mailto:
<a href="mailto:[email protected]">Example mailto link</a>
В браузере пользователь может щелкнуть по ссылке, и откроется почтовый клиент, установленный по умолчанию.
В этом примере при нажатии на ссылку открывается мое почтовое приложение, а в поле «Кому» адрес уже указан.
Используя этот метод, можно быстро отправить электронное письмо и вернуться на сайт.
Как добавить несколько email-адресов в ссылку mailto
Вы можете добавить несколько адресов в ссылку, используя следующий синтаксис:
<a href="mailto:[email protected], [email protected]"> Multiple email addresses </a>
Важно разделять несколько адресов электронной почты запятыми.
При переходе по ссылке откроется приложение «Почта» с уже введёнными адресами в поле «Кому».
Как добавить тему
Данный пример кода показывает, как указать тему в ссылке mailto.
<a href="mailto:johndoe@fakeemail.com, [email protected]?subject=this is how to use the mailto link"> Using the subject parameter </a>
После адресов электронной почты вам нужно добавить ?, чтобы разделить параметры письма и темы. Если вы не укажете знак вопроса, ссылка на тему не будет работать.
Как добавить CC и BCC
Это пример, который показывает вам, как добавить вторичных получателей – CC (копия, carbon copy) и скрытых получателей – BCC (скрытая копия, blind carbon copy) к ссылке mailto.
<a
href="mailto:[email protected], [email protected][email protected] &[email protected] &subject=this is how to use the mailto link">
Using the CC and BCC parameters
</a>После адресов электронной почты нужно добавить ?
CC.
Также необходим знак & перед параметрами BCC и subject.Как добавить тело письма
В этом примере показано, как использовать body со ссылкой mailto. Это позволит добавить текст в тело нашего электронного письма.
<a href="mailto:[email protected], [email protected][email protected] &[email protected] &subject=this is how to use the mailto link &body=this is an article on how to use the mailto link"> Using the body parameter </a>
Нужно добавить & перед параметром body.
Есть ли недостатки в использовании ссылок mailto?
Одним из недостатков использования ссылки mailto является то, что пользователи часто воспринимают ее как спам.
К сожалению, многие спамеры будут использовать эту опцию для рассылки электронных писем пользователям. Так что просто имейте это в виду, когда будете ее применять.
Преимущества использования ссылок mailto
Хорошая причина сделать ссылку mailto — если вы отправляете письма группе людей, адреса которых вы знаете. Если вся эта группа использует почтовый клиент по умолчанию, то ссылка mailto будет предпочтительнее контактной формы.
Перевод статьи Mailto Link – How to Make an HTML Email Link [Example Code].
mailto ссылки
Блог разработчика Разработка mailto ссылки
Вы можете создать ссылку a, открывающую новый email. Давайте рассмотрим некоторые возможности этого метода.
Базовый функционал
<a href="mailto:[email protected]">Email Us</a>
Но мы сталкиваемся с проблемой UX. Результат нажатия может быть неожиданный для некоторых пользователей. Подобно тому, как при нажатии на ссылку открывается PDF файл вместо перехода на другую страницу.
Открытие в новой вкладке имеет значение
Если пользователь имеет почтовый клиент установленный по умолчанию (например, Outlook, Apple Mail и т.п.) это не имеет значения. Пользователь кликает на mailto сслыку и откывается приложение с новым письмом. Это поведение одинаково независимо от того открыта ссылка в новой вкладке или нет.
Но если пользователь пользуется почтой в браузере, то это имеет значение. Например, вы можете настроить почту на Gmail как почтовый клиент по умолчанию для Chrome. В этом случае поведение ссылки mailto, как и любой другой, приведет к перенаправлению на Gmail в этой же вкладке.
Я склоняюсь к использованию target="_blank" в mailto ссылках.
<a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer">Email Us</a>
Добавляем тему и текст в тело письма
По какой-то причине это довольно редко используют, но mailto может добавлять тему и контент письма через GET-параметры в ссылке:
mailto:chriscoyier@gmail.com?subject=Important!&body=Hi.
Добавить копию и скрытую копию к письму
Также можно отправить письмо нескольким адресатам. Добавляем carbon copy (CC) и blind carbon copy (BCC) также через GET-параметры ссылки и разделяем email`ы через запятую.
mailto:[email protected][email protected],[email protected],[email protected]&[email protected]
Генератор mailto ссылок
Довольно полезный сайт
mailtolink.me помогает сгенерировать mailto ссылку
Использование <form> для создания письма
Не уверен на сколько это востребовано, но вы можете сделать форму, которая будет генерировать GET-параметры. При создании письма будет выполнено перенаправление на ссылку с заполненной ссылкой с введенными параметрами из полей формы. Ссылка должна открываться в новой вкладке!
See the Pen
Use a <form> to make an email by Alexandr (@spacewebstudio)
on CodePen.
=»mailto:»]::after {
content: » (📨↗️)»;
}
Если вы принципиально не любите mailto ссылки, это браузерное расширение для вас
https://ihatemailto.com/
Как я понимаю, оно не просто из блокирует, а копирует адресс в буфер и сообщает об этом.
Тестирование ссылок Mailto: руководство с примером
Вы когда-нибудь хотели, чтобы больше пользователей вашего сайта писали вам по электронной почте? Или, может быть, они пишут вам по электронной почте, но было бы лучше, если бы они следовали определенному формату? Ссылки Mailto — это простой способ помочь вашим пользователям отправлять сообщения электронной почты.
В этом посте вы узнаете, что такое почтовые ссылки и когда вы захотите их использовать. Затем мы поделимся некоторыми способами тестирования ссылок mailto с помощью стандартных инструментов тестирования браузера. Даже если вы уже знакомы с этими ссылками, этот пост может дать вам некоторые идеи по их более эффективному использованию.
Прежде всего, давайте определим основной термин.
Что такое Mailto Links?
Ссылки Mailto — это универсальный идентификатор ресурса (URI), используемый в тегах ссылок HTML. Ссылки Mailto открывают новое электронное письмо в почтовом клиенте, когда пользователь нажимает на них. Вы можете указать сообщение и тему в URI — они автоматически будут в черновике электронной почты. Ссылки Mailto отлично подходят, если вам нужно, чтобы люди, отправляющие вам электронные письма, следовали определенному формату, например, в отчетах об ошибках.
Расширьте охват тестирования
Быстрая и гибкая разработка сквозных тестов на основе ИИ — создано для масштабирования.
Начать бесплатное тестирование
Зачем использовать ссылки Mailto?
Небольшие предприятия, такие как риелторы, часто используют mailto на общедоступных веб-сайтах для координации входящих клиентов по электронной почте. Встраивание ссылки mailto, которая автоматически открывает пустое электронное письмо, может стать отличным способом ускорить продвижение потенциальных клиентов по воронке продаж.
Вы также можете автоматически заполнить поля BCC и CC в электронном письме. И это полезно, если вы хотите, чтобы электронное письмо отправлялось другим людям или, возможно, в список рассылки.
Как еще можно использовать эти ссылки? Что ж, ссылки mailto также полезны для архивов электронной почты. Например, вы можете использовать ссылку mailto для предварительной настройки ответа на ветку электронной почты. Кроме того, используя поле In-Reply-To, вы можете заполнить предыдущее сообщение в цепочке.
Некоторые программы списков рассылки подписываются или отказываются от подписки на адрес электронной почты в ответ на электронное письмо, содержащее слово «подписаться». Более того, вы можете предоставить ссылку mailto, чтобы предоставить пользователям простой способ подписаться или отказаться от подписки на веб-странице.
Полезно, но просто предложение
Ссылки Mailto на самом деле не отправляют электронных писем. Вместо этого все, что они делают, — это открывают черновик письма с предварительно заполненными полями.
После этого пользователь может отредактировать и отправить любое сообщение по своему желанию. Ссылки Mailto — это просто предложение для пользователей.
Теперь, когда вы знаете основы, давайте углубимся в изучение.
Когда вы захотите протестировать ссылку Mailto?
Случай 1: Часто ссылки mailto представляют собой просто статические сообщения «Свяжитесь с нами», которые не меняются. Однако, если остальная часть вашего веб-сайта развивается, вам понадобится тест, чтобы убедиться, что ваша ссылка mailto не исчезнет непреднамеренно. В противном случае вы можете не заметить, пока не перестанете получать электронные письма от клиентов!
Вариант 2: Вы можете динамически генерировать ссылки mailto в зависимости от пользовательских данных. В этом случае важно протестировать различные типы пользователей, чтобы убедиться, что каждый из них правильно генерирует ссылку.
Какие инструменты использовать для тестирования ссылок Mailto
Ссылки Mailto немного необычны в мире веб-тестирования, поскольку вместо открытия новой веб-страницы они открывают отдельное приложение.
Это затрудняет проверку содержимого электронной почты с помощью наших стандартных инструментов автоматизации веб-тестирования. Например, мы можем сфотографировать текущее состояние браузера с помощью Selenium. Но он не будет захватывать черновик электронной почты, который вызывает ссылка mailto. Это потому, что почтовый клиент отличается от браузера.
Одним из решений является использование настольных инструментов тестирования. Они сосредоточены на тестировании настольных приложений и не ограничиваются простым экземпляром браузера. Например, Microsoft предоставляет библиотеку WinAppDriver, которая позволяет использовать интерфейс в стиле Selenium для взаимодействия с приложениями Windows.
Но поскольку ссылки mailto представляют собой обычный HTML, мы можем проверить содержимое нашей ссылки mailto, используя стандартное тестирование на основе браузера, и при этом быть уверенными в нашем коде. Это позволяет нам использовать стандартные безголовые браузерные инструменты тестирования, такие как Selenium или Testim, для проверки нашей веб-страницы.
Как тестировать ссылки Mailto
В нашем примере у нас есть страница документации со ссылкой mailto, побуждающая клиентов отправлять отчеты об ошибках. Мы автоматически включаем идентификатор клиента и адрес электронной почты пользователя root для вошедших в систему клиентов, чтобы они не забыли включить их в свой отчет об ошибке. Поскольку мы генерируем эти почтовые ссылки динамически на основе клиента, мы рискуем, что что-то изменится в нашей модели данных или внешнем коде, что может нарушить связь.
Теперь давайте кратко рассмотрим структуру ссылок mailto.
Свяжитесь с нами
Глядя на ссылку mailto выше, мы видим, что это просто ссылка HTML или тег с полем HREF, установленным на URI mailto. Ключевым компонентом HREF является первая часть, mailto:[email protected] . Пока у нас есть заголовок mailto и первый адрес электронной почты, наша ссылка должна успешно открывать почтовый клиент клиента.
Как упоминалось ранее, mailto также позволяет вам установить поля CC и BCC, если вы хотите скопировать электронное письмо другим получателям. И у вас есть возможность указать несколько получателей, как вы можете видеть в примере ниже.
Свяжитесь с нами
Тестирование ссылок Mailto со статическим содержимым
Для этого руководства я создал пример Ruby on Rails. Вы можете сослаться на него по адресу https://github.com/Sevii/MailToTesting. Внутри этого репозитория я настроил системный тест Rails с помощью Selenium.
Чтобы проверить базовую статическую ссылку mailto, тест сначала посещает нашу домашнюю страницу, находит тег ссылки с текстом «Свяжитесь с нами» и, наконец, проверяет HREF этого тега ссылки. Здесь мы используем оболочку Ruby Selenium.
Ознакомьтесь с этим пошаговым руководством для начинающих, если вам нужен учебник по началу работы с Selenium и JavaScript.
требуется "application_system_test_case"
требуется "selenium-webdriver"
класс DocsTest < ApplicationSystemTestCase
тест "посещение страницы документов" сделать
посещать '/'
element = page.find_link(:text => "Свяжитесь с нами")
href = элемент['href']
утверждать href.include?("mailto:[электронная почта защищена]")
конец
конец
Этого теста достаточно для статической ссылки mailto, чтобы убедиться, что она работает правильно. Мы проверяем, что ссылка существует и содержит ключевые компоненты, необходимые для заполнения электронного письма.
А как насчет динамического содержимого? Давайте займемся этим дальше.
Тестирование почтовых ссылок с динамическим содержимым
Далее мы рассмотрим пример проверки динамически сгенерированных полей в почтовой ссылке.
требуется "application_system_test_case"
требуется "selenium-webdriver"
класс DocsTest < ApplicationSystemTestCase
включить Devise::Test::IntegrationHelpers
тест "посещение страницы документов" сделать
пользователь = пользователи (: один)
вход_в_пользователе
посещать '/'
element = page.find_link(:text => "Свяжитесь с нами")
href = элемент['href']
assert_includes href, "mailto:[электронная почта защищена]"
assert_includes href, "&subject="
assert_includes href, user.
email
assert_includes href, user.id.to_s
конец
конец Для динамически генерируемого контента мы хотим подтвердить, что пользовательский контент попадает в черновик электронной почты с полем темы. По моему опыту, ссылки Mailto очень щадящие. Но если есть ошибка форматирования, вы получите только заполненный адрес электронной почты «кому».
Подведение итогов и дополнительная информация
В этом посте вы узнали о ссылках mailto — для чего их использовать и как их тестировать. Если вы хотите узнать больше о почтовых ссылках, отличным местом для ознакомления является спецификация, созданная Internet Engineering Task Force. В этом документе рассказывается, почему существуют почтовые ссылки. Кроме того, он охватывает все различные части спецификации способами, на которые у нас нет времени.
В этом кратком руководстве показано, как проверять ссылки mailto с помощью стандартных инструментов браузера. Но при этом мы исходили из того, что вам не нужно тестировать взаимодействие между браузером и почтовым клиентом.
Ваш вариант использования может потребовать от вас проверки функциональности кросс-приложения. Если вы это сделаете, Testim поддерживает проверку электронной почты, что позволяет вам проверять содержимое и метаданные электронных писем, отправленных на тестовый адрес электронной почты Testim.
До следующего раза!
Что читать дальше
Измерение и информирование о ценности автоматизации тестирования: голоса сообщества
Примеры регрессионного тестирования: практическое руководство
Создание ссылки для звонка по клику или отправки по почте
При нажатии кнопки вызова по клику соединяют посетителей на мобильных устройствах с определенным номером телефона.
Ссылки Mailto открывают окно создания почтовой программы посетителя по умолчанию. Они могут быть созданы для создания электронного письма с определенным получателем, строкой темы и телом электронного письма.
Вы можете вставлять ссылки для звонка по клику и почты в модули форматированного текста и призывы к действию (CTA).
Создать интерактивную ссылку
Добавить интерактивную ссылку в модуль форматированного текста
- Нажмите Добавить ссылку .
- Чтобы активировать изменения, нажмите Опубликовать или Обновить в правом верхнем углу.
Добавить ссылку для вызова в CTA
- Маркетинг > Привлечение потенциальных клиентов > CTA .»}» data-sheets-userformat=»{«2″:8402945,»3»:{«1″:0},»14″:[null,2,0],»15″:»Arial» ,»16″:10,»26″:400}» data-sheets-formula=»=»»»>В своей учетной записи HubSpot перейдите к Marketing > Lead Capture > CTA .
- Наведите указатель мыши на CTA и нажмите раскрывающееся меню Действия , затем выберите Редактировать .
Установите дизайн CTA, затем нажмите Далее в правом нижнем углу.
Нажмите Перенаправление URL-адреса введите раскрывающееся меню и выберите Номер телефона .
В поле Введите номер телефона
- В правом нижнем углу нажмите Сохранить .
Создать ссылку mailto
Все ссылки mailto откроют новое электронное письмо определенному получателю в почтовой программе посетителя по умолчанию. Вы можете настроить ссылку mailto, включив в нее определенную строку темы и тело письма.
Форматировать ссылку mailto
Если вы не используете форматированный текстовый модуль или CTA, вместо этого вы можете создать ссылку mailto вручную. Выделите текст, который хотите связать, затем нажмите раскрывающееся меню «Ссылка на» и выберите «URL». В поле URL-адрес ссылки введите mailto:[email protected], затем замените [email protected] на адрес электронной почты получателя.
Вы можете изменить любую ссылку mailto, чтобы создать электронное письмо с определенной строкой темы и телом.
Базовая структура ссылки mailto со строкой темы и телом выглядит следующим образом:
mailto:[адрес электронной почты получателя]?subject=[тема письма]&body=[тело письма]
Поскольку ссылки не поддерживают пробелы, вам нужно будет использовать %20 вместо каждого пробела. Каждый %20 будет отображаться как пробел в строке темы и теле письма при нажатии на ссылку mailto.
Например, ссылка mailto для электронного письма с получателем получателя@hubspot.com, , строка темы «Зарегистрируйтесь на наш вебинар» и тело письма «Не забудьте зарегистрироваться сейчас!» будет выглядеть так:
mailto:[email protected]?subject=Register%20for%20our%20webinar&body=Не %20забывать%20to%20sign%20up%20сейчас!
Для более длинных электронных писем и строк темы HubSpot рекомендует использовать бесплатный генератор ссылок mailto, подобный этому.
Добавьте ссылку mailto в модуль форматированного текста
Добавьте ссылку mailto в CTA
- Введите ссылку mailto , начиная с адреса электронной почты.
