Создаем индивидуальный htm-шаблон письма для Yandex / Mail.ru

Все компании (особенно их директора) хотят выделиться на фоне остальных своим уникальным стилем. И e-mail письма не исключение.

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

Но многие почтовые клиенты и сервисы предоставляют возможность изменить только подпись в письме. Что ж, это делают все, а как быть если необходимо сделать вот такое письмо:

При условии того, что корпоративная почта развернута на бесплатной платформе Яндекса или Mail.ru (Gmail для бизнеса не берем в расчет, т.к. она уже давно не бесплатная) задача становится достаточно трудоемкой, но она решаема!

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

После необходимо сверстать письмо. О правилах верстки e-mail писем написано достаточно много статей и найти их не составит труда. После верстки советуем убедиться, что большинство почтовых сервисов и клиентов воспринимают шаблон письма адекватно. В первую очередь стоит проверить на

• Yandex – почте;
• почте mail.ru;
• Gmail почте;
• Mozilla Thunderbird;
• The Bat;
• Microsfot Outlook.

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

Из всех почтовых сервисов и программ на данный момент только Mozilla Thunderbird и Microsfot Outlook поддерживают вставку письма в HTML-формате. Но все пользователи в Вашей компании «категорически доверяют» Yandex – почте (или mail.ru), да и сам директор отказывается переходить на непонятные программы, когда он уже ни один год отправляет письма с его любимой темой «Звездных войн». А Yandex не поддерживает вставку письма в HTML-формате. Как быть?

Идем на хитрость.

Устанавливаем и настраиваем Mozilla Thunderbird на учетную запись нужного нам сотрудника.

Обязательно указываем передачу данных через IMAP – протокол для входящей почты, для исходящей SMTP – протокол. Данная манипуляция позволит скачивать почту в Mozilla Thunderbird без ее удаления на серверах Yandex и автоматически обновлять отправленные письма с Mozilla Thunderbird на серверах Yandex.

Эта особенность поможет нам создать шаблон письма в Mozilla Thunderbird в HTML-формате и автоматически выгрузить его в одну из папок в почте Yandex.

Вставляем HTML-код в письмо и сохраняем его как шаблон в Thunderbird:

Через 1-2 минуты в Yandex появляется необходимая нам папка «template», где содержится сверстанное нами письмо. Данный шаблон можно поправить и сохранить уже в нужном нам виде в самой Yandex-почте:

При создании нового письма вызвать шаблон не составит труда – кликаем по зеленой ссылке «шаблон» и подгружаем необходимый вариант шаблона. Просмотреть все созданные нами шаблоны можно в одноименной папке, которая вложена в папку «Черновики».

Проблема: не отображаются картинки в шаблоне письма на принимающей стороне.

Да, есть такая проблема. Если Вы подгружаете изображения со стороннего сайта (например, с сайта своей компании), то картинки у адресата отображены не будут. Данную проблему можно решить двумя способами:

• Загрузить картинки, используемые в верстке письма на Yandex диск (если отправляете почту с Yandex, либо в облако Mail.ru, если отправляете почту с mail.ru). Далее указать прямые ссылки на эти изображения в сервисах. Обратите внимание, что по указанной Вами ссылке должна открываться картинка и ничего более.
• Возможно загрузить картинку в само тело письма, перекодировав его в base 64. Далее вставить код картинки в формате base 64 в теги <img src=»https://steptosleep.ru/wp-content/uploads/2018/06/23113.jpg»/>

Лучший вариант — это перекодировка изображения в код base 64 – меньше движений мышкой, больше надежности (изображение не удалят с Yandex диска, оно уже вложено в само письмо).

Задача выполнена. Thunderbird можно удалять. Директор и сотрудники довольны – теперь их письма совсем не такие как у всех.

Одной из самых востребованных функций на сайте является форма заявки или заказа, данные из которой отправляются на почту владельцу сайта. Как правило такие формы являются простыми и состоят из двух трех полей для ввода данных. Как же создать такую форму заказа? Здесь потребуется использование языка разметки HTML и языка программирования PHP.

Язык разметки HTML сам по себе несложен, нужно всего лишь разобраться в том как и где ставить те или иные теги. С языком программирования PHP все немного сложнее.

Для программиста создать такую форму не составит труда, а вот HTML верстальщику может показаться сложным некоторые действия.

Создаем форму отправки данных в html

На этом этапе нужно создать файл form.php, в него добавить html код формы. Подробности о каждом элементе формы читайте в статье Как сделать форму в HTML для сайта.

Первая строка будет следующей

Это очень важный элемент формы. В нем мы указываем каким способом будут передаваться данные и какому файлу. В данном случае все передачется методом POST файлу send.php. Программа в этом файле соответственно должна принять данные, они будут содержаться в post массиве, и отправить их на указанный email адрес.

Вернемся к форме. Вторая строка будет содержать поле для ввода ФИО. Имеет следующий код:

Тип формы text, то есть пользователь сможет ввести или скопировать сюда текст с клавиатуры. Под параметром name содержится название формы. В данном случае это fio, именно под таким именем будет передаваться все, что пользователь введен в данноу поле. Параметр placeholder указывает на то, что будет записано в этом поле в виде пояснения.

Следующая строка:

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

Следующей строкой будет кнопка «отправить»:

И последней строкой в форме будет тэг </form>

Теперь соберем все вместе.

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

Создаем файл, принимающий данные из HTML формы

Это будет файл с именем send.php

В файле на первом этапе нужно принять данные из пост массива. Для этого создаем две переменные:

Перед названиями переменных в php ставиться знак $, в конце каждой строки ставиться точка с запятой. $_POST это массив в который передаются данный из формы. В форме html при этом указан метод отправки method=»post». Так, приняты две переменные из формы html. Для целей защиты своего сайта нужно провести эти переменные через несколько фильтров — функций php.

Первая функция преобразует все символы, которые пользователь попытается добавить в форму:

При этом новые переменные в php не создаются, а используются уже имеющиеся. Что сделает фильтр, он преобразует символ «<» в ‘&lt;’. Также он поступить с другими символами, встречающимися в html коде.

Вторая функция декодирует url, если пользователь попытается его добавить в форму.

Третей функцией мы удалим пробелы с начала и конца строки, если таковые имеются:

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

Проверка данных, передаваемых от HTML формы в файл PHP

Для того, чотбы проверить, работает ли этот код, передаются ли данные можно просто их вывести на экран при помощи функции echo:

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

Отправляем полученные данные из формы HTML на почту при помощи PHP

Для отправки данных на почту нужно воспользоваться функцией mail в PHP.

mail(«на какой адрес отправить», «тема письма», «Сообщение (тело письма)»,»From: с какого email отправляется письмо \r\n»);

Например, нужно отправить данные на email владельца сайта или менеджера example@mail.ru.

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

Необходимо добавить условие, которе проверит отправилась ли форма при помощи PHP на указанные адрес электронной почты.

Таким образом программный код файла send.php, который отправит данные HTML формы на почту будет выглядеть следующим образом:

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

Помещаем HTML и PHP код отправки формы в один файл

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

Для реализации такой работы нужно поместить HTML код формы в файл send.php и добавить условие, которое будет проверять наличие переменных в массиве POST (этот массив передается из формы). То есть, если переменные в массиве не существуют, то нужно показать пользователю форму. Иначе нужно принять данные из массива и отправить их адресату.

Давайте посмотрим как изменить PHP код в файле send.php:

Существование переменной в POST массиве мы проверяем PHP функцией isset(). Восклицательный знак перед этой функцией в условии означает отрицание. То есть, если переменной не существует, то нужно показать нашу форму. Если бы я не поставил восклицательный знак, то условие дословно означало бы — «если существует, то показать форму». А это неправильно в нашем случае. Естественно, что вы можете переименовать его в index.php. Если будуту переименовывать файл, то не забудьте переименовать название файла и в строке <form action=»send.php» method=»post»>. Форма должна ссылаться на эту же страницу, например index.php. В код я добавил заголовок страницы.

Проверьте работу формы отправки на хостинге с бесплатным 30-дневным периодом для тестирования.

Частые ошибки, возникающие при отправке PHP формы с сайта

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

Html письмо

Добавьте в код:

Файл send.php должен запускаться только на сервере, иначе код просто не будет работать. Желательно, чтобы это был не локальный сервер, так как он не всегда настроен на отправку данных на внешний почтовый сервер. Если вы запустите код не на сервере, то вам отобразиться код PHP прямо на странице.

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

Еще одна частая ошибка, когда появляется оповещение «Сообщение успешно отправлено», а письмо не приходит на почту. В этом случае нужно внимательно проверить строку:

Вместо example@mail.ru должен быть email адрес на который нужно отправить письмо, а вместо example2@mail.ru должен быть существующий email данного сайта. Например для сайта webriz.ru это будет info@webriz.ru.  Только в этом случае письмо с данными из формы будет отправлено.

Читайте также статью про немного модифицированный вариант данной формы отправки.

Отправка формы без перезагрузки страницы

Для того,чтобы отправить красивое html письмо в Яндекс Почте, не нужно регистрироваться в различных службах рассылок, достаточно банального знания html, и процент прочтения ваших писем вырастет в разы.

Оформление письма в Яндекс почте

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

Среди которых:

1. прикрепление файлов,
2. формирование текста,
3. и смайлики.

Как вставить картинку в Яндекс почте

Как это не странно, но кнопок «Добавить видео» или банальной «Добавить изображение» нет.

Как отправить HTML письмо?

По какой-то причине Яндекс отключил данный функционал не понятно. Но добавлять картинки в тело письма можно копирование файла и вставкой в тело письма.

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

Как отправить html письмо с Яндекс почты

Технически данная возможность предоставлена Яндексом, и для отправки html письма потребуется лишь сам html шаблон и открытая в браузере почта.

Готовый шаблон необходимо вставить в исправленный код элемента страницы с формой отправки письма.

1. Для этого открываем страницу «Написать»
2. В текстовом поле правым кликом открываем «Просмотреть код» либо же «Исследовать элемент» (зависит от браузера).

   

3. В найденном div-блоке правым кликом открываем «Edit as HTML».

   

4. В открывшейся редактор вставляем наш шаблон и закрываем редактор.
   

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

Точно так же можно изменить оформление и вставить картинку в подпись в почте Яндекс.

С уважением, Максим

Польза HTML-писем и рассылок

Email-маркетинг — это один из самых эффективных видов интернет-продвижения. Благодаря нему повышается лояльность, возрастает объем как новых, так и повторных продаж, а также поддерживается постоянная связь с аудиторией. Очень часто, просматривая почту в своём личном ящике, мы встречаем красивые интерактивные письма, прямо из которых можно совершить какой-либо заказ или иной целевой переход.

С таким письмом действительно хочется ознакомиться, оно яркое, стильное и визуально приятное, в отличие от сухого текста на белом фоне. Давайте разбрёмся, как создать HTML-письмо самому.

Реализация интерактивного письма

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

С чего начать и как создать?

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

Создание HTML-письма по шаблону

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

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

Как отправить HTML-письмо?

Отправка интерактивного письма, пожалуй, — самый неординарный этап процесса. Давайте разберёмся как вставить html в письмо. Итак, будем действовать на примере mail.ru. Заходим в свой ящик, нажимаем «написать письмо», пишем в форму какое-то слово, затем выделяем его и нажимаем «просмотреть код элемента».

В открывшемся коде, перед нами сразу предстанет строчка body id=»tinymce», кликнув по котрой правой клавишей, необходимо выбрать пункт «Edit As HTML».

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

Осталось только указать адресата и нажать на «Отправить»

Хочется большего?

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

Также, советую почитать мою статью про актуальность SEO-оптимизации сайта при новых поисковых алгоритмах.