Как вставить html в письмо
Перейти к содержимому

Как вставить html в письмо

  • автор:

# Sending Email

# Sending Email — The basics, more details, and a full example

A typical email has three main components:

  1. A recipient (represented as an email address)
  2. A subject
  3. A message body

Sending mail in PHP can be as simple as calling the built-in function mail() . mail() takes up to five parameters but the first three are all that is required to send an email (although the four parameters is commonly used as will be demonstrated below). The first three parameters are:

  1. The recipient’s email address (string)
  2. The email’s subject (string)
  3. The body of the email (string) (e.g. the content of the email)

A minimal example would resemble the following code:

The simple example above works well in limited circumstances such as hardcoding an email alert for an internal system. However, it is common to place the data passed as the parameters for mail() in variables to make the code cleaner and easier to manage (for example, dynamically building an email from a form submission).

Additionally, mail() accepts a fourth parameter which allows you to have additional mail headers sent with your email. These headers can allow you to set:

  • the From name and email address the user will see
  • the Reply-To email address the user’s response will be sent to
  • additional non-standards headers like X-Mailer which can tell the recipient this email was sent via PHP

The optional fifth parameter can be used to pass additional flags as command line options to the program configured to be used when sending mail, as defined by the sendmail_path configuration setting. For example, this can be used to set the envelope sender address when using sendmail/postfix with the -f sendmail option.

Although using mail() can be pretty reliable, it is by no means guaranteed that an email will be sent when mail() is called. To see if there is a potential error when sending your email, you should capture the return value from mail() . TRUE will be returned if the mail was successfully accepted for delivery. Otherwise, you will receive FALSE .

NOTE: Although mail() may return TRUE , it does not mean the email was sent or that the email will be received by the recipient. It only indicates the mail was successfully handed over to your system’s mail system successfully.

If you wish to send an HTML email, there isn’t a lot more work you need to do. You need to:

  1. Add the MIME-Version header
  2. Add the Content-Type header
  3. Make sure your email content is HTML

Here’s a full example of using PHP’s mail() function

Related Stack Overflow Questions

# Sending HTML Email Using mail()

This is not much different then sending a plain text email

(opens new window) . Thet key differences being the content body is structured like an HTML document and there are two additional headers that must be included so the email client knows to trender the email as HTML. They are:

  • MIME-Version: 1.0
  • Content-Type: text/html; charset=UTF-8

# Sending Email With An Attachment Using mail()

# Content-Transfer-Encodings

The available encodings are 7bit, 8bit, binary, quoted-printable, base64, ietf-token, and x-token. Of these encodings, when a header has a multipart Content-Type, the Content-Transfer-Encoding must not be any other value other than 7bit, 8bit, or binary as stated in RFC 2045, section 6.4.

Our example chooses the 7bit encoding, which represents US-ASCII characters, for the multipart header because, as noted in RFC 2045 section 6, some protocols support only this encoding. Data within the boundaries can then be encoded on a part-by-part basis (RFC 2046, section 5.1). This example does exactly this. The first part, which contains the text/plain message, is defined to be 8bit since it may be necessary to support additional characters. In this case, the Latin1 (iso-8859-1) character set is being used. The second part is the attachment and so it is defined as a base64-encoded application/octet-stream. Since base64 transforms arbitrary data into the 7bit range, it can be sent over restricted transports (RFC 2045, section 6.2).

# Sending Plain Text Email Using PHPMailer

Basic Text Email

Adding addtional recipients, CC recipients, BCC recipients

The Simplest and Fastest Way to Send an Email that every web developer should know

FAM

We developers tend to install libraries to do a specific thing like sending emails if it exists already. But did you know that you can send emails without any extra dependency or library that will add to your final bundle size?

This article covers how you can do that! So, welcome!

1- HTML Mailto Attribute

Oh, yes! All you need is HTML, simple but powerful. HTML has got an attribute called mailto that does the job well. Here is how you can use the attribute:

One line of code is enough to send your mail!

2- Need to send emails to multiple emails?

No worries, HTML mailto attribute can do that too.

All right, what if you need to add a subject. Well, that’s the next step!

3- Need to add a subject?

It’s also possible by simply add the key world subject and ? like below:

4- Need to add email in CC?

The same goes for adding email in CC. we add the ? and then the cc keyword:

Отправка html-письма при помощи web-интерфейса Gmail

В отличие от специализированных программ-почтовиков, создание html-сообщения электронной почты в веб-интерфейсах распространённых почтовых сервисов, задача, мягко говоря, не тривиальная. Но ознакомится с тем, как это действует, есть резон. Просто уже потому, что этот инструмент всегда есть под рукой. Т.е., ничего не надо скачивать, устанавливать — зашел на соответствующий сервис в браузере, и, что называется — бери и пользуйся.

Эту серию обзоров начнём с Гугловского Gmail-а. Как и для двух других самых распространённых, но уже отечественных сервисов, Mail.ru и Yandex-почта, он не отличается дружелюбностью интерфейсов для создания html-писем, ни в лучшую, ни в худшую стороны. Неудобно, но возможно — самое подходящее определение.

Видео

1 этап — ревизируем шаблон нашего html-письма

Перво-наперво, проверяем, что наше письмо содержит целиком прописанные ссылки на свои изображения. И что картинки расположены не на локальном диске компьютера, а на внешнем сервере. Иначе, Gmail изображения попросту не увидит, и отображаться в письме они не будут.

2 этап — создаём письмо из своего html-шаблона в среде браузера

Итак, логинимся на Gmail, заходим в свою почту и жмём на «Написать» слева вверху

Логинимся на GmailРис. 1

Раскрывшееся окошко «Новое сообщение» развернём по максимуму, нам далее очень пригодится это пространство

Новое сообщениеРис. 2

Теперь решаем задачу вставки html-кода. Просто скопировать/вставить плодов не принесёт, ибо браузер воспримет эту вставку, как просто текст. Поэтому применим военную хитрость и внедрим код нашего письма в код станицы браузера. Итак, правый клик по полю для ввода текста письма. В выпавшем контекстном меню выбираем «Просмотреть код».

Просмотреть кодРис. 3

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

Открыв код страницы, браузер Chrome подсветит нам блок кода между тегами <div id…> и <div> . Именно это содержимое определяет отображение html-страницы в теле письма.

Код страницыРис. 4

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

Правый клик по выделенному блоку <div id…>…<div> вызовет контекстное меню, в нём выбираем команду «Edit as HTML» — редактировать, как HTML.

Edit as HTMLРис. 5

Блок с выделением трансформируется в текстовый блок, пригодный для правки. Выделим всё его содержимое, правый клик по выделенному и выберем «Копировать».

КопироватьРис. 6

Теперь нам придётся призвать на помощь текстовый редактор, самый простой — «Блокнот». Делаем с ним два действия. Первое, открываем в нём пустой, чистый без текста файл. И в него копируем содержимое буфера обмена, то, что скопировано нами на предыдущем шаге.

БлокнотРис. 7

Им же, «Блокнотом», через контекстное меню и его команду «Открыть с помощью» откроем файл с нашим html-письмом (шаги 2 и 3 на предыдущем рисунке).

Выделяем в «Блокноте» всё содержимое нашего письма и копируем теперь его в буфер обмена.

Копируем в буфер обменаРис. 8

Теперь возвращаемся окно «Блокнота» с фрагментом кода из Gmail. Находим и выделяем в конце кода оператор <br>, и вставляем вместо него содержимое буфера, т.е. код нашего html-сообщения.

Вставляем содержимоеРис. 9

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

Рис. 10

Возвратимся в Chrome. Там блок кода должен у нас находиться в состоянии редактирования для HTML, как после выполнения команды на рисунке 5. Если видим иное, повторяем то действие, приводим блок кода в состояние для редактирования и выделяем его, полностью и весь. По выделенному — правый клик и «Вставить».

Рис. 11

Завершаем операцию кликом по полю для ввода текста письма — и изменения сохранятся.

Завершаем операциюРис. 12

Для выхода из режима правки html-кода закроем окна, отражающие этот код.

Выход из режима правкиРис. 13

Как полагается, заполняем поля адреса получателя, тему письма. Наше html-письмо, созданное в недрах Gmail и Chrome-а готово, можно смело отправлять.

html-письмо готово, можно отправлятьРис. 14

И под занавес обзора несколько обыденных, но от этого не менее жизненных советов. Первое, не бойтесь экспериментов, всё, что мы тут наредактировали, произошло только на нашей локальной машине, и простое обновление страницы восстановит исходный код. Второй совет банален, но так же важен и вписывается в парадигму хорошего тона, как и указание темы электронного письма: отправьте созданное сначала самому себе, а вдруг незаметная ошибка исказила ваш шаблон? Лучше, если эту неприятность первым увидите вы, а не ваш адресат. Ну и наконец, помните, что созданное вами можно сохранить в виде черновика. Тогда к результату редактирования можно возвращаться вновь и вновь, по мере надобности.

Как вставить html в письмо

К нам часто обращаются клиенты, кто хочет просто красиво оформить свое письмо и отправлять его через интерфейс своей почты. Это может быть коммерческое предложение для потенциальных клиентов. Акция, которая будет отправляться точечно, только конкретным клиентам, или просто информационные письма. Как же это сделать? Как html-макет вставить в письмо и отправить, используя вашу почту? Рассмотрим на примере Яндекс Почты.

И так, у вас есть готовое сверстанное html-письмо. Не буду вдаваться в тонкости верстки, НО….

ОБРАТИТЕ ВНИМАНИЕ:

1. Не используйте теги <p>… </p> для оформления абзаца текста. Яндекс прибавляет дополнительные отступы этому тегу, и верстка может выглядеть не совсем так, как планируется.
2. В коде между тегами не должно быть пробелов, отступов и новых абзацев. Все должно быть написано в одну строку. Это грозит тем же, что и п.2 – ваш макет превратится в длинное полотно с огромными дырками))

Как указано в Яндекс.Помощи – « В течение суток можно отправить с одного ящика 500 писем. Если в письме несколько получателей, то письмо каждому из них считается отдельным письмом…
В одном письме, отправленном через сайт – 50 получателей/сутки
В одном письме, отправленном через почтовую программу или по протоколу SMTP — 35 получателей/сутки
»

Должно быть все органично, в спокойном режиме отправляйте не более 50 писем в день и будет ваш СЧАСТЬЕ!

Вернемся к исходной точке… Берем наш html-файл, правой клавишей мышки выбираем «открыть с помощью» и открываем в БЛОКНОТ-е.

У вас откроется «простынь» непонятного для многих кода. Выбираем раздел «Правка» — «Выделить все» или используя правую клавишу мыши. Копируем полностью все содержимое и переходим в интерфейс Яндекс.Почты.
Создаем новое письмо. В «теле» письма, где будет располагаться само содержимое, вписываем любые буквы, знаки, цифры – не важно что! Главное вписать пару символов. Скоро вы поймете, для чего это нужно.

Далее курсором подводим к выделенным div-ам и, вновь, правой клавишей мышки выбираем «Править как HTML».
Выделяем в открывшемся прямоугольнике содержимое и вставляем ранее скопированный код нашего email-письма. Не пугайтесь, если фото не будут отображаться – получатель увидит письмо с картинками.

При верстке должны быть картинки прописаны абсолютными ссылками. Изображение, используемые в макете, можно загрузить на Яндекс.Диск (это именно при отправке через Яндекса-почту, если вы создаете шаблон письма).
Но обязательно проведите тест, чтобы убедиться, что картинки корректно прописаны в письме.

Финальный аккорд – отводим мышку в сторону и просто кликаем по пространству. Готово! Теперь останется прописать ТЕМУ письма и КОМУ вы будете отправлять эту красоту))

Также рекомендую перед рассылкой протестировать на основных почтовых клиентах. Отправьте себе на Яндекс, создайте дополнительные почты (если еще нет) на mail, gmail. Посмотрите, как ваше письмо будет смотреться на мобильном телефоне, в идеале с разными разрешениями.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *