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

Основной синтаксис

Чтобы создать ссылку на электронную почту, нужно использовать тег <a> с атрибутом href, который начинается с mailto:. Вот базовый пример:

<a href="mailto:ex*****@ex*****.com" data-original-string="CD8PqMH0JAda9vT5PCCoNQ==8c9XzRgRNrRz3rToOMy7IOrTBj4vOHq271CwLgqhmExrSY=" title="Этот контакт закодирован плагином Anti-Spam by CleanTalk. Нажмите на текст для декодирования. Также убедитесь, что в вашем браузере включён JavaScript.">Напишите нам</a>

В этом примере, когда пользователь нажимает на текст Напишите нам, его почтовый клиент откроется с уже заполненным адресом электронной почты ex*****@ex*****.com.

Добавление темы и тела письма

Вы можете сделать ссылку на электронную почту более функциональной, добавив тему и тело письма. Это делается с помощью параметров subject и body. Вот пример:

<a href="mailto:ex*****@ex*****.com" data-original-string="sSJ7SB+9nvWAv7tvIRF3qQ==8c9ylv0tENDMv5X18dcqJvGkQsLDxei/UTfU62a9mnTm98eA1s5yHlDJ3yjErjfC7GObf5SVIffUXABAOLgzl9aNlBxn6AINWQHebR6n0vGu/k=" title="Этот контакт закодирован плагином Anti-Spam by CleanTalk. Нажмите на текст для декодирования. Также убедитесь, что в вашем браузере включён JavaScript.?subject=Вопрос&body=Здравствуйте!">Напишите нам</a>
  • mailto: — указывает, что это ссылка на электронную почту.
  • ex*****@ex*****.com — адрес электронной почты, на который будет отправлено письмо.
  • ?subject=Вопрос — задает тему письма.
  • &body=Здравствуйте! — задает текст, который будет в теле письма.

Полный пример

Вот как может выглядеть полный код для ссылки на электронную почту:

<a href="mailto:ex*****@ex*****.com" data-original-string="Noo5fGd6xrR9Qox0Dt+wEg==8c9Pzx+mJf6J22eFIPbOm4u6PMNI6iZ+Y1+2bZZysiUb60i8vW1sbHq6UlKw61SXRybwJWywBxVAwZ+pNQcHTDnqTNH6tJM7fsfyeZIjoCaABw=" title="Этот контакт закодирован плагином Anti-Spam by CleanTalk. Нажмите на текст для декодирования. Также убедитесь, что в вашем браузере включён JavaScript.?subject=Вопрос&body=Здравствуйте!">Напишите нам</a>

При нажатии на эту ссылку у пользователя откроется его почтовый клиент с уже заполненной темой и телом письма.

Использование нескольких получателей

Если вы хотите отправить письмо нескольким получателям, вы можете указать их адреса, разделяя их запятыми:

<a href="mailto:ex******@ex*****.com" data-original-string="GQ8DjP07Idv4z0OfU67/Mg==8c9+YYyculg7sq42156MloziCOAR/TFZOwfW2iM8mpSm9asCrrrWjHlJzwMEw9qy3omP9eNIEq0Zq8mZj4sduYffw==" title="Этот контакт закодирован плагином Anti-Spam by CleanTalk. Нажмите на текст для декодирования. Также убедитесь, что в вашем браузере включён JavaScript., ex******@ex*****.com?subject=Вопрос">Напишите нам</a>

В этом случае письмо будет отправлено обоим адресатам.

Обработка специальных символов

Если в теме или теле письма содержатся специальные символы (например, пробелы или символы пунктуации), их нужно кодировать. Например, пробелы заменяются на %20:

<a href="mailto:ex*****@ex*****.com" data-original-string="HwOZbC1qTJll/aRZ1p59qQ==8c9r0qO9DvNIbGF5YCihYLflkWn0c5Nj5u4dXCupMMbq60xOT4jn+OIQbMUle0J8DoRBQFcahr2OZI1jNhqv/6bxy1LCesrQp00RoBTYjzyRVYVrvDZoPux+0S7wAslAqwi" title="Этот контакт закодирован плагином Anti-Spam by CleanTalk. Нажмите на текст для декодирования. Также убедитесь, что в вашем браузере включён JavaScript.?subject=Вопрос%20по%20сайте&body=Здравствуйте!">Напишите нам</a>

Стилизация ссылки

Для улучшения визуального восприятия ссылки, вы можете применять CSS-стили. Например:

<a href="mailto:ex*****@ex*****.com" data-original-string="KgG9YiMVKMnzTdvOCZQW1w==8c92c3gfqR3C+/ohEsxSUj7gPERjT1fq/2aCO9tYbILHHU=" title="Этот контакт закодирован плагином Anti-Spam by CleanTalk. Нажмите на текст для декодирования. Также убедитесь, что в вашем браузере включён JavaScript." style="color: blue; text-decoration: none;">Напишите нам</a>

В этом случае ссылка будет синего цвета и без подчеркивания.

Тестирование ссылки

После создания ссылки на электронную почту, важно протестировать её, чтобы убедиться, что она работает корректно. Откройте ваш HTML-документ в браузере и кликните на ссылку. Должен открыться ваш почтовый клиент с правильным адресом, темой и телом письма.

Заключение

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