Как вставить email в html - IT Новости
Microclimate.su

IT Новости
28 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как вставить email в html

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-ссылка с введенными в форме параметрами.

to make an email»> See the Pen
Use a

MailTo — что это и как в Html создать ссылку для отправки Емейла

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Иногда мне встречаются вопросы о том, что такое MAILTO. Люди пытаются переводить этот термин с английского (например, с помощью гугловского или яндексовского переводчика), но транслейтеры это слово не понимают. Больше толка будет, если вы спросите у них так: «mail to».

Переводчик ругнется, что это дескать «почта на», но понимать сие следует как «написать кому-то» или «отправить почтовое сообщение для кого-то». И именно этой цели служит Html тег MAILTO (точнее не тег, а атрибут, но это не суть важно).

Читать еще:  Как сделать слайды в html

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

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

MAILTO в Html — что и как можно реализовать

Итак, прелесть MAILTO в том, что это мулька позволяет пользователю (например, посетителю вашего сайта) быстро отправить сообщение (письмо — читайте что такое электронная почта). При этом ему не потребуется ни почтовый клиент открывать, ни Емайл адрес с сайта копировать — при клике по такой ссылке все произойдет на автомате. Попробуйте сами кликнуть по этой тестовой ссылке: Отправить письмо админу KtoNaNovenkogo.ru

Можно будет и тему сообщения в эту ссылку зашить, и даже его содержание (текст). Последнее может быть удобно, например, при отправке сообщений об обнаружении какой-то определенной ошибки на сайте или при заказе какого-нибудь бесплатного курса, где текст может быть стандартным, а пользователю только по кнопке «Оправить» останется жмакнуть для отправки вам сообщения.

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

Код такой ссылки с MAILTO, правда, будет выглядеть несколько монструозно, но во-первых, пользователь его все равно не увидит, а во-вторых, чуть ниже я на пальцах покажу насколько тут все просто устроено (правда, правда):

Конечно же, на сайте для этой же цели может быть уместно установить форму обратной связи, но и MAILTO имеет право на жизнь, а по части автоматической подстановки текста этот вариант может дать фору многим формам. К тому же, такую ссылку можно будет отправить в Html письме или разместить на форуме, где это позволяется. В общем, штука полезная и вполне может пригодиться. Хотя бы будете знать где искать, если добавите этот пост в закладки.

Синтаксис ссылок с MAILTO для отправки Емайл сообщений

Синтаксис до безобразия прост, хотя итоговая конструкция и может показаться через чур перегруженной. Знаете какой будет самый простой вид ссылки использующей MAILTO? Скорее всего догадываетесь — это когда в открывшемся почтовом клиенте введется только лишь Емайл-адрес того, кому это письмо будет отправлено, а все остальные поля (тему и текст сообщения) пользователь должен будет заполнять самостоятельно. Выглядеть это дело будет примерно так: Отправить письмо админу KtoNaNovenkogo.ru

Т.е. всего лишь заменяете в теге ссылки А (она же и гиперссылка А) атрибут HREF на MAILTO, а сразу после него без пробела, но через двоеточие пишите тот Емайл адрес, который вставится в поле «Кому» при создании нового сообщения в открывшемся почтовом клиенте на компьютере пользователя.

Проще некуда. Но вот полная запись MAILTO может выглядеть намного сложнее, и схематично ее можно представить так (квадратные скобки писать не нужно — они приведены только для визуального отделения отдельных частей записи друг от друга, чтобы вам это было проще разложить в мозгу по полочкам:

Т.е. в предыдущем (простейшем) примере мы использовали только:

Но, как видите, можно после этого дела поставить знак вопроса (?) и дописать много чего интересного, а именно такие вот параметры:

  1. subject= — тот текст, что вставится в поле «Тема» при создании нового сообщения в открывшемся почтовом клиенте на компьютере пользователя.
  2. body= — вы можете и текст сообщения полностью здесь ввести, или хотя бы его начать, чтобы пользователю не нужно было бы, например, набирать «Здравствуйте!»
  3. cc= — на указанный тут Емайл-адрес будет отправлена копия письма
  4. bcc= — а на этот Емайл будет отправлена скрытая копия письма (он не будет отображаться у других получателей этого сообщения): MAILTO-ссылка со скрытым Емайл-адресом

Последние два параметра не факт, что вы будете использовать, тем более, что если требуется отправить письмо на несколько адресов, то проще их будет перечислить через запятую прямо непосредственно после MAILTO: Отправить письмо админу KtoNaNovenkogo.ru

Ничего необычного в записи не заметили? Я же ведь сказал через запятую, а сам какую-то лабуду из набора символов использовал. Что это? А это спецсимволы, которые лучше использовать вместо запятых, а также пробелов, амперсандов и других специфических знаков. Так оно надежнее будет, ибо не все почтовые программы их правильно воспримут.

Читать еще:  Html скрыть строку таблицы

Давайте я просто приведу тут набор спецсимволов (взятых из юникода), чтоб вам было понятнее:

  1. Вместо запятой и пробела следующего за ней вставляйте — %2C%20
  2. Вместо & — используйте & (точка с запятой в конце обязательны)
  3. Вместо пробела — ставьте %20
  4. Перенос строки — можно задать с помощью конструкции %0D%0A

Думаю, что после этого вам становится понятнее тот код ссылки, который я привел в самом начале этого поста.

Внимательность вам в помощь.

Итак, подытожим. После Html атрибута MAILTO через двоеточие указывается Емайл, на который должно быть отправлено сообщение. Далее при необходимости ставится знак вопроса (без пробелов) и указываются какие-то из дополнительных параметров (subject, body, cc, bcc). Они опять вводятся в строке без пробелов, а их значения указываются после знака равно. Параметры друг от друга отделяются амперсандами & (опять же без пробелов). Вот и все. Видите, как просто.

Главное не забыть закрыть двойные кавычки после ввода значения последнего параметра, да и вообще быть внимательнее. Давайте для примера введем что-то простое, не требующее использования спецсимволов (разве что только & вместо & все же придется использовать), которые сильно снижают визуализацию синтаксиса записи MAILTO: Текст Емайл-ссылки

Да, ребят, если в адресе вашего Емайл тоже присутствуют какие-либо заковыристые символы, то их лучше будет заменить на спецсимволы юникода. Например, знак вопроса в Емайла лучше будет заменить на %3F (взять код можно из этой таблицы — просто найдите знак, кликните по нему и скопируйте код, добавив в записи MAILTO перед кодом знак процентов).

Как отправить html-письмо через Mail.ru

Чтобы отправить html-письмо через Mail.ru нужно проявить немного смекалки. Мы самостоятельно разобрались в том, как это сделать и подготовили подробную пошаговую инструкцию.

Шаг 1. Подготовка письма

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

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

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

Шаг 2. Вставка письма в Mail.ru

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

Нажмите правой кнопкой мыши на поле для ввода текста письма и выберите “просмотреть код” (В каждом браузере этот пункт называется по-своему, но смысл сохраняется). Откроется панель редактирования кода страницы. (Панель может отличаться визуально в зависимости от вашего браузера. Мы показываем на примере Google Chrome).

Выделился код, который отвечает за наполнение письма. Но нам нужна главная строчка кода — html.

Именно этот блок отвечает за наполнение письма и нам нужно вместо него вставить наш шаблон. Для этого щелкните правой кнопкой мыши по блоку и нажмите “Edit as HTML”.

Далее нам нужно удалить весь находящийся там код…

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

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

Шаг 3. Отправка html-письма

Остается подкорректировать содержимое письма, если это требуется. Просто перепишите тексты. Можно пользоваться инструментами оформления из верхней панели.

Лучший сервис для массовых рассылок

Удобный инструмент для быстрых первых и повторных продаж

Cov >Поддерживаем бизнес во время карантина. Рассказываем, как оставаться на связи с клиентами и организовать удалённую работу.

7 лучших сервисов для видеозвонков

О чём писать в рассылке во время коронавируса

Антивирусный пакет для бизнеса

Школа email-маркетинга со скидкой 30%

Бесплатная консультация по email-маркетингу

UniSender помогает малому и среднему бизнесу

Почему email-маркетинг

  • Email-маркетинг в 4 раза прибыльнее других маркетинговых каналов
  • По ссылке в письме перейдёт в 5 раз больше людей, чем в посте на Facebook
  • Читатели рассылки проведут на вашем сайте на 80% больше времени, чем те, кто её не получали
Читать еще:  Как сохранить изменения на сайте html

Увеличивайте продажи с помощью рассылок:

Соберите базу контактов

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

Отправьте первое письмо

Настройте первую рассылку, реанимируйте неактивных пользователей, а после – удерживайте их имиджевыми письмами. Дизайн письма можно создать с нуля в вашем фирменном стиле или использовать один из 100 наших бесплатных шаблонов

Улучшайте результаты

Отправляйте персонализированные письма разным сегментам аудитории, выбирайте лучшие варианты с помощью А/Б-тестирования писем и оценивайте результаты отправки из подробных аналитических отчетов

Забудьте про скучную работу

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

Каждый клиент UniSender получает

Готовую стратегию
email-маркетинга
для вашего бизнеса

Круглосуточную
консультацию от
наших специалистов

Доступ ко всему
функционалу сервиса

700 000 компаний уже выбрали нас

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

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

Мы активно используем сервис «Юнисендер» для проведения массовых рассылок писем с 2016 года. При работе с сервисом не возникало проблем: интерфейс удобный, понятный даже начинающему пользователю. Нам удалось автоматизировать ряд процессов и улучшить качество писем в части дизайна и статистических показателей (открываемость, прочтение). В сервисе доступная аналитика и гибкая система тарифов. Стоит отметить блог Юнисендера и службу поддержки клиентов. Я всегда оперативно находила ответы на любые вопросы с помощью данных ресурсов, а также узнала много полезной информации по трендам email-маркетинга.

Email маркетингом занимаюсь занимаюсь 7 лет и за это время был опыт работы в 5 сервисах рассылок. После положительного опыта работы с Unisender, внедрила этот сервис в 3 компаниях.

Основными причинами моего выбора в пользу Unisender было удобство сервиса, грамотный UX сайта и редактора писем, прозрачная статистика, связь с тех поддержкой 24/7.

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

За год пользования сервисом мы успели хорошо разобраться в его технических возможностях и на сегодняшний день их более чем хватает. Но радует другое, Unisender не только внедряет разные улучшения, но и рассказывает своим клиентам как ими пользоваться, и даже предлагает протестировать бета-версии! Например, когда мы использовали «письма по событию», нам рассказали о более продвинутой «Автоматизации» и открыли доступ к бете. А совсем недавно появилась функция «отправка в лучшее время» и мы сразу узнали об этом из чата поддержки. Это очень современный подход, так держать!

Мы сотрудничаем с сервисом Unisender более трех лет. За это время мы неоднократно убедились в профессионализме команды, ответственном подходе к решению любых задач. Отдельно хотим отметить готовность идти навстречу! Нерешаемых вопросов просто нет. Всем желаем таких партнеров!

Для одного из клиентов нашего агентства мы заработали 15000$ за 1,5 месяца объединив социальные сети и email-рассылки. А по другому получили рекордный ROMI 9700% и сделали продажи на сумму 12000000 рублей. На уровне пользователя нравится простота в использовании и хорошая тех.поддержка. На уровне партнёра мы очень ценим дружеские взаимоотношения, открытость к новым идеям и возможность участия во всевозможных мероприятиях

Пользуемся UniSender 6 лет. На мой взгляд, по соотношению цена-возможности-качество, это лучший сервис для рассылок. Из преимуществ: развитой API, высокая скорость работы, надёжность и широкие возможности автоматизации.

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

0 0 голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector