Разборы

Как сделать ссылку Mailto: для шаблонного письма с уже заполненными полями?

Адресом получателя, темой и содержанием письма, email для отправки копий

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

Как работает mailto
Например, здесь в ссылку вписан только адрес получателя. Но можно добавить больше параметров

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

Плюсы и минусы Mailto-ссылок

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

Но есть и недостатки. Так, пользователь без настроенного почтового клиента не сможет просто взять и отправить письмо. Даже Google Chrome по умолчанию не открывает Mailto в Gmail (если ссылка встречается на сайте, а не внутри почтовой рассылки).

Как сделать ссылку Mailto: для шаблонного письма с уже заполненными полями? 2
Например, на сайте wearefrankly.co решили предложить сразу два варианта: скопировать адрес или воспользоваться ссылкой Mailto. Чтобы посетители могли выбрать более удобный вариант.

Из чего состоит ссылка Mailto

Она начинается, собственно, с префикса mailto:, а дальше идет email-адрес вида name@site.ru

(Можно указать и несколько адресов через запятую, к примеру mailto:ivan@site.ru, sasha@site.ru)

Email получателя и остальные параметры должны быть разделены знаком вопроса — ? А параметры между собой — символом амперсанда &

(В общем, тут все то же самое, как с UTM-метками.)

Теперь о самих параметрах. Так, subject отвечает за тему письма, а body — за тело соответственно.

Пример ссылки с ними — mailto:name@site.ru?subject=Hello&body=How are you

Есть еще cc — email для отправки копии и bcc — email для отправки скрытой копии.

Вот, например, как их можно использовать с предыдущими — mailto:name@site.ru?cc=sasha@site.ru&bcc=ivan@site.ru&?subject=Hello&body=How are you

В визуальном редакторе легко добавить такую ссылку как есть. А если работать с HTML, нужно просто обернуть ее в тег <a>.

Допустим, так — <a href=«mailto:name@site.ru»>Напишите нам</a>

А чтобы ссылка точно работала во всех случаях, нельзя забывать о спецсимволах: %20 — вместо пробела, %0D%0A — в случае переноса строки. Также нужно закодировать кириллицу, но для этого точно лучше использовать специальный сервис вроде urlencoder.org. Или сервис для создания Mailto, где такая возможность встроена.

Дальше о том, где удобнее генерировать такую ссылку для сайта или email-рассылки.

Где и как создать ссылку Mailto

Можно и вручную по информации из предыдущих разделов статьи, но со специальными инструментами это удобнее и проще.

Генератор Mailto от Unisender. В первую очередь рекомендуем свой инструмент, который сделали прямо в Google Таблицах. Просто копируете себе («Файл → Создать копию»), чтобы можно было редактировать, и указываете нужные параметры (подсказки на полях помогут). Специальная формула кодирует все пробелы, переносы строки и кириллицу. Генерируется обычная ссылка, ссылка с анкором, а также HTML-код.

Mailtolink.me. Простой и минималистичный онлайн-сервис для создания Mailto-ссылок, ничего лишнего. Готовый URL не занимает много места и легко копируется в буфер обмена, но вот кнопка для копирования кода, похоже, не работает.

Mailtolinkgenerator.com. Тоже простой создатель Mailto, но еще с забавными иллюстрациями и работающим генератором HTML-кода для ссылки.

Mailto Generator от Parcel.io. Приятный дизайн, где не нужно кликать кнопку для создания ссылки — все происходит автоматически по мере заполнения полей. Зато тут есть кнопка «Try it», чтобы протестировать работу Mailto на своем устройстве и браузере.

Mailto: Generator на Codepen. Здесь нет всех параметров и создания HTML-кода, но хороший вариант для тех, кто изучает программирование и хочет делать подобные сервисы самостоятельно. Можно прямо в браузере начать добавлять новые фичи этому генератору.