Html отправка email: Как создать форму email, которая может отправлять email с помощью html

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

10 декабря 2018

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

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

Видео

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

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

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

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

Рис. 1

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

Рис. 2

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

Рис. 3

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

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

. Именно это содержимое определяет отображение html-страницы в теле письма.

Рис. 4

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

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

Рис. 5

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

Рис. 6

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

Рис. 7

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

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

Рис. 8

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

Рис. 9

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

Рис. 10

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

По выделенному — правый клик и «Вставить».

Рис. 11

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

Рис. 12

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

Рис. 13

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

Рис. 14

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

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

Адрес электронной почты | htmlbook.ru

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

Синтаксис создания поля следующий.

<input type="email" атрибуты>

Атрибуты по большей части совпадают с текстовым полем и приведены в табл. 1.

Табл. 1. Атрибуты поля для почтового адреса

Атрибут	Описание
maxlength	Устанавливает максимальное число символов, которое может быть введено пользователем в поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот атрибут опустить, то можно вводить строку длинее самого поля.
multiple	Позволяет указывать несколько адресов через запятую.
name	Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
size	Ширина поля, которая определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали.
value	Начальный почтовый адрес отображаемый в поле.

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

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

Пример 1. Адрес электронной почты

HTML5IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Авторизация на сайте</title>
 </head>
 <body>
  <form action="handler.php">
   <p>Вход на сайт</p>
   <p>Email: <input type="email" name="login"></p>
   <p>Пароль: <input type="password" name="pass"></p>
   <p><input type="submit" value="Вход"></p>
  </form>
 </body>
</html>

По своему виду поле для ввода адреса ничем не отличается от текстового поля.

Различия проявляются, если указать некорректный адрес, в этом случае браузер выведет замечание об ошибке. Firefox поле с неверным адресом обозначает красной рамкой и сообщением об ошибке при отправке формы (рис. 1), Chrome никак сразу не выделяет поле с ошибкой, но выводит сообщение при отправке формы (рис. 2). Аналогично поступает и Opera (рис. 3). Сама форма на сервер не отправляется, пока ошибка не будет исправлена.

Рис. 1. Отправка формы в Firefox

Рис. 2. Отправка формы в Chrome

Рис. 3. Отправка формы в Opera

Другие популярные браузеры (IE, Safari) интерпретируют поле для адреса электронной почты как текстовое.

Обработка html формы django + отправка email через smtp gmail · GitHub

Обработка html формы django + отправка email через smtp gmail · GitHub

Instantly share code, notes, and snippets.

Обработка html формы django + отправка email через smtp gmail

	# In settings. py
	# Email settings
	EMAIL_HOST = ‘smtp.gmail.com’
	EMAIL_HOST_USER = ‘[email protected]’
	EMAIL_HOST_PASSWORD = ‘bureausmolgu’
	EMAIL_PORT = 587
	EMAIL_USE_TLS = True
	# In views.py
	from django.forms import ModelForm
	class ContactUsForm(ModelForm):
	class Meta:
	model = MailBox
	fields = [‘subject’, ‘message’, ‘sender’ ]
	def contact_us(request):
	path_back = request. META.get(‘HTTP_REFERER’,’/’)
	if request.method == ‘POST’: # If the form has been submitted…
	contact_form = ContactUsForm(request.POST) # A form bound to the POST data
	if contact_form.is_valid(): # All validation rules pass
	subject = contact_form.cleaned_data[‘subject’]
	sender = contact_form.cleaned_data[‘sender’]
	message = ‘Письмо было отправлено с сайта, адрес для ответа %s \r\n \r\n’ %sender
	message += contact_form.cleaned_data[‘message’]
	#recipients = [‘Bureau@smolgu. ru’]
	recipients = [‘[email protected]’]
	# Положим копию письма в базу на всякий случай
	MailBox.objects.create(subject=subject, sender=sender, message=message)
	# и отправим его
	try:
	send_mail(subject, message, sender, recipients, fail_silently=False)
	except:
	send_mail(subject, message, sender, recipients, fail_silently=False)
	return render_to_response(‘web_site/success. html’, {‘path_back’: path_back}, context_instance=RequestContext(request))
	return render_to_response(‘web_site/fail.html’, context_instance=RequestContext(request))
	# In template.html
	<form method=»post» action=»{% url ‘contact_us’ %}»>
	{% csrf_token %}
	<div>
	<div>
	<input name=»subject» placeholder=»Тема письма» type=»text» />
	</div>
	<div>
	<input name=»sender» placeholder=»Ваш email для ответа» type=»text» />
	</div>
	</div>
	<div>
	<div>
	<textarea name=»message» placeholder=»Текст письма»></textarea>
	</div>
	</div>
	<div>
	<div>
	<a href=»#»>Написать нам</a>
	<input type=»submit» value=»Отправить письмо»/>
	</div>
	</div>
	</form>

You can’t perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

wp_mail() – отправка почты в WordPress

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

Функция возвращает true в случае успешной отправки email, однако это не означает, что письмо будет получено и прочтено. Это означает, что сама функция отработала без ошибок.

Кроме того, по умолчанию тип контента письма text/plain, что значит, что HTML-теги не поддерживаются, но это легко исправить несколькими строчками кода.

Кодировка письма по умолчанию совпадает с кодировкой вашего сайта на WordPress, но и это вы также можете изменить фильтров wp_mail_charset.

wp_mail( $to, $subject, $message, $headers = '', $attachments = array() )

Параметры

$to

(строка|массив) получатель или получатели письма (в виде массива или через запятую). Обратите внимание, если вы укажете их через запятую, то каждый получатель письма увидит все email-адреса, на которые было выслано это письмо

$subject

(строка) тема сообщения

$message

(строка) текст сообщения, по умолчанию text/plain, это значит, что HTML-теги не поддерживаются, о том, как включить их поддержку, смотрите в примерах

$headers

(строка|массив) заголовки сообщения

$attachments

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

Примеры

Обычная отправка письма

wp_mail( '[email protected]', 'Какая-то тема', 'Какое-то сообщение' );

Изменение имени и email отправителя

В WordPress по умолчанию в качестве отправителя письма выставляется «WordPress»,а в качестве его email «wordpress@misha. agency».

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

Для этого нам нужно передать параметр $headers.

wp_mail(
	'[email protected]',
	'Какая-то тема',
	'Какое-то сообщение',
	array(
		'From: Миша <[email protected]>'
	)
);

Использование HTML-тегов в письме, фильтр wp_mail_content_type

Для того, чтобы использовать HTML-теги в тексте сообщения, нужно изменить content-type письма на text/html, а это можно сделать двумя способами.

Это можно сделать двумя способами.

Через фильтр – в таком случае HTML-теги станет возможно использовать в любых письмах, отправляемых с блога.

add_filter( 'wp_mail_content_type', 'true_content_type' );
 
function true_content_type( $content_type ) {
	return 'text/html';
}

Не знаете, куда вставлять код?

Второй способ – указать заголовки уже при отправке конкретного письма. Тут мы также и устанавливаем кодировку письма.

wp_mail(
	'[email protected]',
	'Какая-то тема',
	'Какое-то сообщение', 
	array(
		'Content-type: text/html; charset=utf-8'
	)
);

Изменение кодировки письма, фильтр wp_mail_charset

Кодировка письма по умолчанию соответствует кодировке блога, но ее тоже можно изменить через заголовки (предыдущий пример) или через фильтр:

add_filter( 'wp_mail_charset', 'true_mail_charset' );
 
function true_mail_charset( $content_type ) {
	return 'utf-8';
}

Не знаете, куда вставлять код?

В предыдущем примере (и по умолчанию тоже) WordPress отправляет письма юникодом, но таким способом вы спокойно можете изменить кодировку например на Windows-1251.

Отправка письма с вложениями

$upload_dir = wp_upload_dir();
 
$attachments = array(
	$upload_dir[ 'path' ] . '/file-1.png',
	WP_CONTENT_DIR . '/uploads/file-2.txt'
);
 
wp_mail( '[email protected]', 'Письмо с вложениями', 'Вложения приложены', array(), $attachments );

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!

Как создавать и отправлять HTML-письма через Gmail при помощи Stripo — Stripo.email

Отправлять элегантные HTML-рассылки через Gmail еще никогда не было так просто! Больше не нужно никаких аддонов и расширений — Stripo дает возможность создавать и отправлять HTML-письма в ваш любимый почтовик всего одним кликом.

Хотите делать это в считанные минуты?

Бесплатная подписка

Итак, в этой статье я сделаю следующее:

• создам шаблон в формате HTML;

• экспортирую его в мой аккаунт Gmail;

• уделю внимание некоторым техническим особенностям Gmail;

• и в финале мы с вами рассмотрим, как Stripo помогает справляться с трудностями — другими словами, что делает наши шаблоны Gmail-совместимыми.

1. Создание письма

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

Сделать это можно тремя способами:

Способ 1. Использовать наши готовые HTML-шаблоны

Stripo предлагает более 700 готовых шаблонов. Они классифицируются по типам — подтверждение, брошенная корзина, промо, приветствие и т. д. — и по функциональным особенностям: традиционные HTML-шаблоны, интерактивные (написанные на HTML5) и AMP-письма в формате AMP HTML. Как известно, AMP for Email полностью поддерживается почтовиком Gmail. Кроме того, шаблоны отсортированы по сезонам и праздникам. Выбирайте тот, который вам больше всего нравится. Конечно, вам нужно будет настроить его, чтобы HTML-шаблон Gmail соответствовал стилю вашего бренда. Это не займет много времени.

Используйте готовые шаблоны для отправки профессиональных HTML-писем через Gmail

Ознакомиться

Способ 2. Создать HTML-шаблон с нуля

Войдите в свой аккаунт Stripo, перейдите во вкладку «Шаблоны» и выберите «Базовые шаблоны». Там вы найдете восемь мокапов, они же прототипы. «Обучающий шаблон» содержит пояснения, как использовать наши Drag-n-Drop блоки.

Также вы можете выбрать в этом разделе «Пустой шаблон» и просто перетаскивать базовые блоки в этот HTML-шаблон для Gmail.

Способ 3. Импортировать свой кастомный HTML-код

Зайдите в свой аккаунт, перейдите во вкладку «Шаблоны» —> «Базовые шаблоны» и выберите «Мой HTML».

Откройте его и вставьте собственный HTML-код.

Your browser does not support HTML5 video tag.

На мой взгляд, самые простые способы — первый и второй. Давайте их рассмотрим.

Итак, как же модифицировать наши готовые шаблоны?

Мы опубликовали в нашем блоге статью «Как создать письмо в Stripo: инструкция от А до Я». В ней мы подробно показываем, как работать с письмами в Stripo. Тем не менее, хотелось бы добавить к ней несколько моментов.

Шаг 1. Как установить тему и прехедер при помощи Stripo и как будет выглядеть ваше письмо

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

Вот почему мы настоятельно рекомендуем: никогда, слышите, НИКОГДА(!) не игнорируйте эту опцию:

Важно отметить:

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

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

Если вы считаете, что строки темы достаточно, и не хотите использовать прехедер — просто добавьте вместо него пробел.

Если вы активируете эту опцию, то ваше письмо будет выглядеть как вот эта рассылка от WWF (Всемирного фонда дикой природы):

(Источник: Gmail)

Вы также можете добавить пробел, если у вас короткий прехедер.

Шаг 2. Как добавить ссылку на веб-версию письма

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

Поэтому нам нужно добавить ссылку «Открыть в браузере», также известную как «Веб-версия».

(Источник: письмо от Stripo)

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

Чтобы получить ссылку на веб-версию вашего письма с помощью Stripo, вам нужно:

• войти в режим предварительного просмотра;

• в новом окне нажать «Копировать», чтобы сохранить ссылку в буфер обмена;

• и вставить эту ссылку в соответствующее поле вашего письма.

Шаг 3. Как добавить хедер и логотип с помощью Stripo и как будет выглядеть ваше письмо

Мы неоднократно слышали о том, что хедер — это лицо вашей рассылки и бренда в целом. Поэтому убедитесь, что вы добавили логотип своей компании и ее название.

Как создать хедер с логотипом и меню при помощи Stripo:

• перетащите в свой HTML-шаблон для Gmail структуру с двумя колонками;

• добавьте блок «Изображение» в левую колонку и загрузите в этот блок свой логотип;

• затем перетащите в шаблон блок «Меню». Дайте название каждому пункту и прикрепите свои ссылки;

• теперь активируйте настройки для всей структуры, кликнув значок «Структура» в области шаблона, чтобы настроить размер и ширину каждой колонки;

• на панели настроек установите параметры колонок (также известных как контейнеры), их ширину и отступ между ними.

Вы также можете добавить в хедер иконки соцсетей и контактную информацию.

Больше деталей том, как работать с меню писем, можно найти в статье «Как добавить меню в емейл-сообщение с помощью Stripo» нашего блога.

Шаг 4. Как добавить баннер с помощью Stripo и как будет выглядеть ваше письмо

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

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

Дополнительную информацию о том, как создавать баннеры, вы найдете в статье «Как создать баннер в Stripo Email Builder за считанные минуты» нашего блога. Или же посмотрите короткое видео.

Создавайте сложные баннеры прямо в Stripo

Присоединиться

Шаг 5. Как с помощью Stripo добавлять структуры, также известные как ряды, и как при этом будут выглядеть ваши письма

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

Перетащите нужную структуру в свой HTML-шаблон письма для Gmail.

После чего добавьте в каждую колонку/контейнер соответствующий контент.

Посмотрите на пример структуры с двумя колонками:

А это структура с тремя колонками:

Как видим, в каждую колонку под описанием можно добавить кнопку.

Структура с четырьмя колонками:

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

Чтобы добавить дополнительные колонки в HTML-письмо для Gmail, вам нужно:

• навести курсор на всю структуру в HTML-шаблоне — если все сделано правильно, вы увидите метку «Структура»;

• на панели настроек нажать «+»;

• добавить еще от 1 до 4 контейнеров;

• и настроить ширину колонок. Вы можете установить отдельную ширину для каждого контейнера или выровнять их все.

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

Шаг 6. Как добавить иконки соцсетей при помощи Stripo и как будут выглядеть ваши письма

Вы можете расположить их где угодно.

Мы предлагаем 70 иконок соцсетей — набор не ограничивается только самыми популярными иконками Facebook, Twitter и Instagram. Мы постарались собрать максимум различных значков для вашего удобства.

Вы можете выбрать для них цветовую схему и настроить размер.

Делается это очень просто: перетащите блок «Соцсети» в нужную структуру, настройте дизайн иконок и вставьте URL-адреса в поля «Ссылка».

Чем хороши наши иконки соцсетей?

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

Создайте раздел «Отслеживайте нас в соцсетях» всего один раз и используйте его во всех дальнейших кампаниях

Начать

Для этого вам понадобится заполнить данные вашего профиля соцсети в аккаунте Stripo. После этого вы просто перетаскиваете базовый блок «Соцсети» в HTML-шаблон новой кампании для Gmail, и Stripo добавляет выбранные вами иконки с соответствующими ссылками и настроенным дизайном.

Подробности о создании и добавлении иконок соцсетей в HTML-шаблоны вы найдете в специальной статье нашего блога.

Шаг 7. Как использовать нашу библиотеку модулей контента, чтобы еще быстрее создавать HTML-письма для Gmail

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

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

Во вкладке «Мои модули» вы увидите модули, которые сохранили ранее. В «Модулях шаблона» находятся модули, которые система извлекла из самого шаблона. А в разделе «Подготовленные» хранятся те, которые были созданы нашими верстальщиками и дизайнерами.Your browser does not support HTML5 video tag.

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

Шаг 8. Как создавать промо-аннотации Gmail при помощи Stripo и как ваши письма будут выглядеть на мобильныхэ

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

Если вы отправляете массовые рассылки через Gmail, то ваши письма скорее всего попадут во вкладку промоакций.

Но промо-аннотации помогут вашим рассылкам выделиться среди множества писем в папке входящих.

Создавайте аннотации для своих промо, чтобы выделиться среди сотен писем в пользовательских входящих

Начать

Эта функция предназначена только для мобильных устройств.

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

Шаг 9. Как добавлять AMP-элементы и как ваши письма будут выглядеть в Gmail

В марте 2019 года Google выпустили AMP for Emails. И Stripo стал первым Drag-n-Drop конструктором шаблонов, который предоставил пользователям возможность создавать AMP-письма без каких-либо навыков программирования.

Stripo предлагает три Drag-n-Drop блока AMP:

• аккордеон — чтобы представить контент в структурированном по разделам виде. Лучше всего использовать аккордеон для длинных писем;

Your browser does not support HTML5 video tag.

• карусель изображений — для размещения от 3 до 16 баннеров на одном экране. Получателям достаточно кликнуть по стрелке, чтобы увидеть все изображения карусели;

• форма — интерактивные формы дают возможность оставлять комментарии и делиться отзывами о вашем сервисе прямо в письмах. Как показало A/B тестирование, интерактивные формы получают в 5,2 раза больше откликов в сравнении с обычными формами на внешних ресурсах.

Также вы можете создавать AMP-компоненты при помощи Google Playground и встраивать их в свои HTML-шаблоны Gmail, используя наш редактор открытого кода.

Подробности о создании AMP-писем в Stripo вы найдете у нас в блоге в специальной статье.

Не забывайте, что вы также можете добавить в HTML-письма Gmail следующие функции:

Все вышеупомянутые элементы безупречно отображаются в Gmail, и их можно легко создать в Stripo практически без навыков HTML-верстки.

Шаг 10. Предварительный просмотр HTML-писем перед экспортом в Gmail

Просто нажмите кнопку предварительного просмотра прямо над письмом.

Здесь вы увидите как десктопную, так и мобильную версию вашего письма.

Обе версии имеют свои субверсии: AMP и HTML. Обязательно проверьте их все.

Если в вашем AMP-письме есть ошибки, наш редактор их покажет.Your browser does not support HTML5 video tag.

Кликните значок «Ошибки», чтобы увидеть баги в письме и подсказки по их исправлению.

Важно отметить:

Приложение Gmail не поддерживает медиа-запросы ни на Android, ни на iOS.

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

(Приложение Gmail. Письмо отправлено через Gmail)

Это случается только при доставке писем в черновики Gmail.

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

(Приложение Gmail. Письмо отправлено через ESP)

2. Экспорт HTML-писем в Gmail

Чтобы отправить HTML-шаблон в Gmail, вам нужно:

• кликнуть кнопку экспорта;

• во всплывающем окне выбрать Gmail. Убедитесь, что в вашем браузере активирована опция всплывающих окон;

• в новом всплывающем окне вы увидите предложение войти в систему через аккаунт Google. Введите свой логин и пароль;

• предоставьте Stripo доступ к вашим черновикам, нажав кнопку «Разрешить»;

• найдите свой HTML-шаблон в папке «Черновики».

Вы делаете это всего один раз. При следующем экспорте HTML-писем в Gmail вы просто выбираете Gmail из списка экспорта — и письмо будет немедленно экспортировано в этот почтовый клиент.

Важно отметить:

Во-первых, с момента запуска прямого экспорта в Gmail мы ежегодно проходим тест безопасности Bishop Fox, чтобы убедиться, что ваши данные надежно защищены.

Во-вторых, предоставляя Stripo доступ к своей учетной записи Gmail, вы допускаете нас только к папке «Черновики». У нас не будет доступа ни к одной другой папке, кроме вашей базы контактов.

Теперь, когда ваше письмо доставлено в папку «Черновики» вашего аккаунта Gmail, оно готово к отправке.

Впишите заголовок и добавьте получателей. Готово!

В статье «Массовая рассылка писем в Gmail» в нашем блоге мы рассказывали, как отправлять письма на 2 000 получателей за один раз.

Кстати, после экспорта вы можете редактировать шаблоны, прежде чем их отправить!

3 и 4. Технические ограничения Gmail и как с ними справиться при помощи Stripo

Я читала о некоторых фактах и гипотезах, связанных с Gmail, и решила их проверить. Вот что у меня получилось:

Гипотеза 1. Gmail предлагает получателям скачивать изображения без ссылок

Люди в интернете говорят, что если какое-то изображение в HTML-письме не содержит ссылок, то Gmail предложит получателям его скачать.

Я проверила — таки да, это правда. Возможно, вам как раз не нужна кнопка «скачать», потому что она ломает весь дизайн и письмо из-за этого не выглядит профессионально.

Решение:

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

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

Вывод: правда

Гипотеза 2. Изображения без Alt-текста попадают в папку «Спам»

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

Я специально отправила множество сообщений с удаленным alt-текстом, но все они были без проблем доставлены во входящие. Правда, при этом я тестировала только Gmail. Поэтому мы не можем обещать, что ваши письма без альтернативного текста пройдут спам-фильтры Outlook или Apple Mail. Так что если вы собираетесь отправлять письма не только пользователям Gmail, вам все-таки понадобится альтернативный текст для прохождения спам-фильтров.

Важно отметить:

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

Вывод: письма без альтернативного текста доставляются во входящие. Впрочем, может быть нам просто повезло 🙂 Кроме того, мы должны добавлять к изображениям альтернативный текст для других почтовиков и для соблюдения требований доступности.

Гипотеза 3. Gmail обрезает письма

Это суровая истина.

Gmail обрезает письма, вес которых превышает:

В конце видимой части письма предлагается «Просмотреть все сообщение».

Решение:

В настоящее время технических возможностей справиться с этой загогулиной не существует. Но у нас вы можете взвешивать письма:

• просто нажмите «Экспорт»;

• выберите «HTML»;

• скачайте HTML-файл;

• и посмотрите свойства файла, нажав правую кнопку мыши.

В свойствах указан вес 65 кБ. Я перепроверила его с помощью нескольких приложений, включая mail-tester. com. Все они подтвердили точность взвешивания.

Вывод: это правда. Но мы с вами умеем взвешивать письма.

Гипотеза 4. Кнопка отмены не работает для массовых рассылок

Совершенно неверно, если вы используете Gmail без каких-либо расширений, например Gmail Mail Merge. Все, что вам нужно сделать — покопаться в настройках.

Я попыталась применить этот метод к своим массовым рассылкам, и он сработал.

Решение:

На панели настроек найдите опцию «Отменить отправку» и установите подходящее время. Оно варьируется от 5 до 30 секунд.

Я попыталась применить этот метод к своим массовым рассылкам, и он сработал.

Вывод: неверно.

Гипотеза 5. Текстовые блоки объемом свыше 8500 символов удаляются

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

Так что мы можем сказать, что гипотеза не подтвердилась. Кстати, это отлично. Хотя вообще-то я сомневаюсь, что кто-то будет отправлять клиентам так много букв.

Вывод: это неверно.

Гипотеза 6. Номера телефонов и адреса электронной почты в HTML-письмах Gmail становятся кликабельными

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

И да!! С адресами электронной почты все было еще веселее. Они были либо серые, но кликабельные — либо синие, подчеркнутые, но не кликабельные.

Вывод: неверно. Все нужно делать вручную :).

Решение:

Добавляйте ссылки «Mailto» к каждому адресу электронной почты, который вы указываете в письме.

Чтобы узнать дополнительные подробности о том, как добавлять ссылки «Mailto» в письма, читайте эту статью нашего блога.

Гипотеза 7. Фон не отображается в десктопной версии Gmail, если ширина письма превышает 640 пикселей

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

Естественно, мы это проверили.

Фоновое изображение и цвет (мы тестировали оба варианта) отображались в Gmail на всех устройствах и во всех браузерах.

(Ширина контентной части – 670 пикселей, ОС – macOS)

Гипотеза 8. Gmail заменяет кастомные шрифты стандартными

Пользовательские шрифты делают ваш дизайн более уникальным. Но это действительно правда: Gmail склонен заменять некоторые кастомные шрифты дефолтным Arial.

Я протестировала 4 разных шрифта.

Вот как они сработали:

1. Great Vibes – хорошо работал на мобильных и десктопных устройствах;

2. Dokdo – был заменен на Arial;

3. Alexa Std – был заменен на Arial;

4. Montserrat – был заменен на Arial.

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

Хотим напомнить, что с помощью Stripo вы можете загружать пользовательские шрифты.

В завершение

Теперь вы знаете, как создавать HTML-письма для Gmail и бесплатно отправлять массовые рассылки через этот почтовик, и мы надеемся, что вы будете создавать исключительно элегантные письма даже для личной переписки.

Создавайте HTML-письма для Gmail с помощью Stripo без лишних усилий

Отправка Email в html — Вопросы и проблемы

Привет, уважаемые коллеги!

Уже пару недель бьюсь вот с какой проблемой: отправляю почтовое сообщение, где тело письма формируется в форме RichTextArea. Письмо отправляется, но отображается в Gmail в виде:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www. w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title> Внимание изменена позиция Senior Software Developer / Ведущий разработчик</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>
<body>
  <p><b>Описание позиции</b></p>
  <p><p>Стоп-лист компаний: .</p><p>Рекомендуемые доноры: </p><p>---------------------------------------------------------------------------</p><p>О компании. Сайт можно почитать вот тут&nbsp;<a href="https://xxxxx.com/" target="_blank">https://xxxxx.com/</a>.&nbsp;<o:p></o:p></p><p>&nbsp; Краткое позиционирование. Мы продуктовый стартап Кремниевой долины, разрабатываем решение для управления сетями как это сделано в Google или Facebook.&nbsp;<o:p></o:p></p><p>&nbsp; Более подробно если расшифровывать. ..

Сам файл шаблона, как рекомендовано в документации

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title> Внимание изменена позиция ${openPosition.vacansyName}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>
<body>
  <p><b>Описание позиции</b></p>
  <p>${openPosition.comment}</p>
</body>
</html>

Если посмотреть то, что пришло на gmail, то видно

------=_Part_16_2063980431.1582468923090
Content-Type: multipart/related; boundary="----=_Part_17_136900125.1582468923090"

------=_Part_17_136900125.1582468923090
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: base64

Что сделать, чтобы отображалось в html?

Отправка электронной почты в формате HTML с использованием Python

Вот пример кода. Это основано на коде, найденном на сайте Поваренной книги Python (не могу найти точную ссылку)

def createhtmlmail (html, text, subject, fromEmail):
    """Create a mime-message that will render HTML in popular
    MUAs, text in better ones"""
    import MimeWriter
    import mimetools
    import cStringIO

    out = cStringIO.StringIO() # output buffer for our message 
    htmlin = cStringIO.StringIO(html)
    txtin = cStringIO.StringIO(text)

    writer = MimeWriter.MimeWriter(out)
    #
    # set up some basic headers... we put subject here
    # because smtplib.sendmail expects it to be in the
    # message body
    #
    writer.addheader("From", fromEmail)
    writer.addheader("Subject", subject)
    writer.addheader("MIME-Version", "1.0")
    #
    # start the multipart section of the message
    # multipart/alternative seems to work better
    # on some MUAs than multipart/mixed
    #
    writer.startmultipartbody("alternative")
    writer.flushheaders()
    #
    # the plain text section
    #
    subpart = writer. nextpart()
    subpart.addheader("Content-Transfer-Encoding", "quoted-printable")
    pout = subpart.startbody("text/plain", [("charset", 'us-ascii')])
    mimetools.encode(txtin, pout, 'quoted-printable')
    txtin.close()
    #
    # start the html subpart of the message
    #
    subpart = writer.nextpart()
    subpart.addheader("Content-Transfer-Encoding", "quoted-printable")
    #
    # returns us a file-ish object we can write to
    #
    pout = subpart.startbody("text/html", [("charset", 'us-ascii')])
    mimetools.encode(htmlin, pout, 'quoted-printable')
    htmlin.close()
    #
    # Now that we're done, close our writer and
    # return the message body
    #
    writer.lastpart()
    msg = out.getvalue()
    out.close()
    print msg
    return msg

if __name__=="__main__":
    import smtplib
    html = 'html version'
    text = 'TEST VERSION'
    subject = "BACKUP REPORT"
    message = createhtmlmail(html, text, subject, 'From Host <[email protected]>')
    server = smtplib.SMTP("smtp_server_address","smtp_port")
    server.login('username', 'password')
    server.sendmail('[email protected]', '[email protected]', message)
    server.quit()

Как отправить электронное письмо в формате HTML

Что нужно знать

• Gmail / macOS: напишите электронное письмо в редакторе HTML. Сохраните на диск, затем откройте в браузере, скопируйте и вставьте код в тело письма.
• Thunderbird: напишите электронное письмо в редакторе HTML. Скопируйте это. В Thunderbird перейдите к . Запись > . Вставка > HTML . Вставьте код. Выберите Вставить .

Большинство современных почтовых клиентов по умолчанию отправляют электронные письма в формате HTML.Например, Gmail и Yahoo Mail имеют встроенные редакторы WYSIWYG, которые можно использовать для написания сообщений HTML. Однако, если вы хотите написать HTML во внешнем редакторе, а затем использовать его в своем почтовом клиенте, это может быть немного сложно. Узнайте, как создавать и встраивать HTML в Gmail, macOS Mail и Thunderbird.

Отправка электронной почты в формате HTML в Gmail или macOS Mail

Gmail и приложение «Почта» на Mac не позволяют создавать электронные письма в формате HTML в клиенте. Однако вы можете отправить HTML-сообщение через любой из этих двух клиентов, скопировав, а затем вставив HTML-код, созданный в другом приложении.

1. Напишите свой адрес электронной почты в редакторе HTML. Обязательно используйте полные пути, включая URL-адреса к любым внешним файлам.

2. Когда HTML-файл будет готов, сохраните его на жестком диске (неважно где).

3. Откройте HTML-файл в веб-браузере. Если все выглядит так, как вы ожидаете (изображения видны, стили CSS верны и т. Д.), Выберите всю страницу, используя Ctrl + A на ПК с Windows или Cmd + A на Mac.

4. Нажмите Ctrl + C (Windows) или Cmd + C (Mac), чтобы скопировать все содержимое страницы.

5. В Gmail или Mac Mail начните новое сообщение. Вставьте скопированное выше содержимое страницы в тело сообщения, используя Ctrl + V или Cmd + V .

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

Отправить электронное письмо в формате HTML в Thunderbird

Thunderbird позволяет легко создавать HTML, а затем импортировать его в ваши почтовые сообщения.

1. Напишите свой адрес электронной почты в редакторе HTML. Обязательно используйте полные пути, включая URL-адреса к любым внешним файлам.

2. Выделите весь HTML-код, используя Ctrl + A (Windows) или Cmd + A (Mac).Чтобы увидеть код, вам может потребоваться изменить представление с WYSIWYG на представление необработанного кода HTML, которое показывает все теги HTML и другую информацию.

3. Скопируйте свой HTML-код, используя Ctrl + C или Cmd + A .

4. Откройте Thunderbird и Напишите новое сообщение.

5. В меню сообщения нажмите Вставить и выберите HTML .

6. Когда появится всплывающее окно HTML, вставьте HTML-код в окно, нажав Ctrl + V или Cmd + V .

7. Нажмите Вставить , и ваш HTML-код будет вставлен в ваше сообщение.

Советы по написанию в HTML

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

• Ваши изображения должны быть размещены на общедоступном веб-сайте. Они не обязательно должны быть на веб-странице, но они должны быть общедоступными в Интернете.
• Используйте полный URL-адрес изображения в атрибуте и проверьте его, чтобы убедиться, что ваше изображение отображается правильно, прежде чем отправлять сообщение.
• Не используйте в ссылках относительные пути. Вы должны использовать полностью определенные URL-адреса для всех ссылок, как и для изображений.
• Если вы используете CSS, встраивайте их в код HTML с помощью встроенных, встроенных или внешних таблиц стилей.

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

Почтовые клиенты могут не поддерживать расширенные функции, такие как Ajax, CSS или HTML5. Чем проще вы сделаете свои сообщения, тем больше вероятность, что они будут просмотрены большинством получателей вашей электронной почты. Некоторые почтовые клиенты также упрощают использование HTML, созданного в программе или редакторе HTML.

TimeStopper / Getty Images

Преимущество использования Thunderbird в качестве почтового клиента

Вы можете подключить учетные записи электронной почты, такие как Gmail, Yahoo Mail и многие другие, к почтовому клиенту Thunderbird и использовать его в качестве универсального почтового приложения.Таким образом, немного проще вставить HTML в сообщение Thunderbird, и вы можете отправлять свои исходящие сообщения через любую из ваших подключенных учетных записей электронной почты.

Не все могут читать электронные письма в формате HTML

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

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

Спасибо, что сообщили нам!

Расскажите, почему!

Другой Недостаточно подробностей Сложно понять

Как получить электронную почту из HTML-формы

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

Используя конструктор форм перетаскивания Simfatic Forms, вы можете быстро создавать потрясающие формы электронной почты!

Как отправить электронное письмо прямо из HTML-формы?

Было бы неплохо для веб-разработчика, если бы браузеры позволяли им направлять отправку формы непосредственно на адрес электронной почты. Но это не так.Причина в том, что если браузеры разрешили отправлять электронную почту прямо со страницы формы, это покажет адрес электронной почты посетителей. Злоумышленник может собирать адреса электронной почты посетителей веб-страницы и затем спамить им. Чтобы защитить веб-пользователей, ни один клиентский язык не может отправлять электронную почту без вмешательства пользователя.

Есть ли HTML-код для отправки электронной почты из формы?

В HTML нет функции для отправки формы непосредственно на адрес электронной почты .А что насчет «mailto»? Использование mailto: Вы можете установить поле действия формы как «mailto». В этом случае веб-браузер вызывает почтовый клиент для отправки формы на указанный адрес электронной почты.

Однако этот метод несовместим с другими браузерами. Это тоже неудобно для пользователя; при отправке формы выдается предупреждающее сообщение. Для получения дополнительных сведений об этом методе см .: форму электронной почты с использованием mailto

Может ли JavaScript отправить форму на адрес электронной почты?

№ JavaScript также не может отправлять электронную почту . Если клиентский JavaScript позволяет отправлять электронную почту программно, спамеры первыми воспользуются им, и вы возненавидите свой веб-браузер!

Итак, как получить электронную почту из HTML-формы?

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

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

Ссылка на внутренний скрипт упоминается в атрибуте «действие» тега HTML-формы.

Браузер выбирает ссылку (URL), упомянутую в атрибуте действия, и отправляет данные для отправки формы на этот URL. Веб-сервер передает данные отправки формы сценарию в URL-адресе действия (yourform-processor.php в примере.) Теперь внутренний скрипт может отправлять электронные письма, сохранять отправку формы в базу данных или даже направлять пользователя на страницу оплаты.

Как создать внутренний скрипт?

Для внутреннего программирования создано несколько языков сценариев. PHP — одна из популярных и широко поддерживаемых платформ сценариев (другие включают Perl, Ruby, ASP- только для Windows и т. Д.). Почти все службы хостинга поддерживают PHP на своих веб-серверах.

Работа простого PHP-скрипта

Скрипт PHP запускается на вашем веб-сервере.Когда форма отправляется, почтовый скрипт формы собирает данные, представленные в форме, составляет электронное письмо и отправляет его на адрес, который он настроен.

Дополнительная литература и ресурсы

Примечание: Используя инструмент для создания веб-форм, такой как Simfatic Forms, вы можете быстро создавать полные веб-формы (отправлять материалы по электронной почте, сохранять в базе данных и т. Д.).

Как работает электронная почта в формате HTML | Справочник по дизайну электронной почты

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

Составной / альтернативный формат MIME

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

Вместо этого вам нужно отправить электронное письмо в формате HTML с вашего сервера в альтернативном формате MIME, состоящем из нескольких частей. Это означает, что ваш агент передачи почты объединяет ваш HTML-код и текстовую версию сообщения в одно электронное письмо. Таким образом, если получатель не может просмотреть ваше красивое электронное письмо в формате HTML, будет отображаться старая добрая надежная текстовая версия вашего сообщения.Это занудная штука, поэтому многие люди портят ее, когда пытаются сами отправить электронное письмо в формате HTML. Вам нужно либо запрограммировать сценарий для отправки электронной почты в альтернативном формате MIME, состоящем из нескольких частей, либо использовать стороннего поставщика (например, Mailchimp) для доставки электронной почты для вас.

Доставка электронной почты в формате HTML

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

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

Рекомендации по доставке электронной почты

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

Брандмауэры электронной почты и интернет-провайдеры, которые получают ваши кампании, не любят получать тонны писем с одного IP-адреса одновременно (если они обычно не получают тонны писем с этого IP-адреса). Поэтому, если вы отправляете только случайные рассылки по электронной почте со своего IP-адреса, вы можете ограничить доставку или распределить их по нескольким IP-адресам, чтобы избежать случайной блокировки. Сервисы электронного маркетинга обычно разбивают вашу кампанию на части и рассылают ее по множеству разных IP-адресов, чтобы избежать этой проблемы.

Если вы отправляете электронные письма из почтовой программы на компьютере, скорее всего, вы подключаетесь через местного интернет-провайдера. Если у вашего интернет-провайдера не настроен выделенный IP-адрес, вы, вероятно, отправляете электронные письма с динамического IP-адреса. Интернет-провайдеры и фильтры спама не любят получать много писем с динамического IP-адреса, потому что он выглядит как взломанный домашний компьютер. Если вы не пользуетесь услугами такого поставщика услуг электронной почты, как Mailchimp, вам всегда следует отправлять сообщения с выделенного IP-адреса.

Пошаговое руководство по созданию собственного электронного письма в формате HTML

96

Образец тестового письма | Просмотреть в Интернете Это образец электронного письма, который должен быть помещен в один абзац & nbsp; Это абзац 2 с размером шрифта 18 пикселей и цветом шрифта # fbeb59 с межстрочным интервалом 15 пикселей & nbsp; Это абзац 3 с размером шрифта 18 пикселей и цветом шрифта # fbeb59 с межстрочным интервалом 25 пикселей и прописными буквами & nbsp; & nbsp; ЗАЯВЛЕНИЕ О КОНФИДЕНЦИАЛЬНОСТИ | УСЛОВИЯ ОБСЛУЖИВАНИЯ | ВОЗВРАТ © 2017 Название компании.Все права защищены. Если вы не хотите больше получать от нас электронные письма, отказаться от подписки

Как отправлять электронную почту в формате HTML в Gmail

С тех пор, как Gmail был представлен еще в 2004 году, в провайдер электронной почты было внесено много изменений.Одним из первых изменений было удаление редактора HTML и сохранение редактора WYSIWYG.

Хотя Gmail не предлагает функции редактора HTML, он все же поддерживает HTML.

Но зачем вам отправлять электронную почту в формате HTML в Gmail?

Хотя редактор WYSIWYG удобен для повседневного использования и работает быстро, бывают случаи, когда вам может понадобиться использовать HTML.

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

В этой ситуации вам, вероятно, лучше всего создать подпись с помощью собственного HTML и вставить ее в Gmail.

Скопируйте и вставьте HTML в Gmail

Шаг 1. Создайте HTML-код вне Gmail и затем сохраните его как файл .html на своем компьютере.

Шаг 2. Не копируйте необработанный HTML-код в Gmail; в противном случае получатель также увидит только необработанный HTML-код — вот так:

Так это не совсем верно, не так ли?

(Код через Postbox-Inc)

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

Давайте вставим HTML в Gmail

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

Шаг 2. Оттуда вам просто нужно скопировать HTML в том виде, в каком он был отображен в браузере.

Шаг 3. Вставьте это в новое окно создания сообщения Gmail.

Шаг 4. Нажмите «Отправить», и все готово.

На что следует обратить внимание при работе с HTML-сообщениями в Gmail

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

• Внешние таблицы стилей могут не работать — Gmail не поддерживает внешние стили. Если вы хорошо разбираетесь в CSS, возможно, вы захотите использовать встроенный CSS и встроенные стили в качестве временного решения.
• Вы не можете использовать веб-шрифты — к сожалению, нет возможности импортировать шрифты в ваш HTML, поэтому вы придерживаетесь стандартных вариантов.
• Изображения должны размещаться в Интернете и быть общедоступными. — убедитесь, что они загружены куда-нибудь с общедоступной ссылкой.Многие пользователи Gmail используют для этого Google Диск, но вы также можете использовать такие сервисы, как Imgur.

Некоторые бесплатные редакторы HTML для вас

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

Тестирование электронной почты в формате HTML в Gmail

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

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

Проблема в том, что это занимает невероятно много времени.

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

HTMLemailcheck — отличный инструмент для этого и относительно недорогой.

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

Как отправить электронную почту в формате HTML в Gmail

Gmail имеет более 1,5 миллиарда учетных записей по всему миру, и их число продолжает расти. Вы, вероятно, один из них, и я, моя команда и, вероятно, большинство пользователей Mailtrap тоже. С момента первого тестирования в 2004 году Gmail претерпел множество изменений. Одно из них касалось упрощения окна создания и удаления старого доброго редактора HTML.Однако это не означает, что HTML больше не поддерживается Google — просто отправить электронное письмо в формате HTML из Gmail немного сложнее. Посмотрим, как это работает.

Зачем вообще импортировать HTML в Gmail?

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

Однако все становится непросто, когда вам нужно использовать фирменный знак вашей компании или другое более сложное форматирование, недоступное в редакторе по умолчанию. Можно вставить логотип или баннер. Вы можете нанять профессионала или есть более простой и доступный способ — использовать один из доступных инструментов для создания логотипов. Например, вы можете проверить функциональность и особенности Designhill Logo Maker, Zyro или любого другого, которое вам больше нравится.

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

В таких ситуациях вам нужно полагаться на внешние инструменты или написать свой собственный HTML и вставить его в окно создания.

Импорт HTML в Gmail

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

• Вне Gmail создайте HTML-код и сохраните его как файл .html на своем диске. Убедитесь, что ваш редактор сохраняет файлы как обычный текст, без дополнительного форматирования. Он также не может добавлять .txt или любые другие расширения к имени файла, иначе код не будет отображаться должным образом. Например, Mac TextEdit требует некоторых настроек для правильной работы с HTML. Вот наш пример кода довольно низкого качества:

• Щелкните файл правой кнопкой мыши и откройте его в любом браузере.Он должен отображаться так, как ожидалось. Если вы видите необработанный HTML, дважды проверьте, правильно ли был сохранен файл, и ваш редактор использует простой текст.

• Скопируйте все содержимое страницы либо с помощью Ctrl + A (Windows) / Cmd + A (Mac), либо просто используйте мышь или трекпад. Затем вставьте его в окно создания сообщения Gmail и отправьте!

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

На что обращать внимание при написании электронного письма в формате HTML

Хотя HTML — это действительно простая структура, есть несколько функций / ограничений Gmail, о которых вам необходимо знать.Вот основные из них:

Изображения должны размещаться в Интернете и быть общедоступными

Вместо этого изображения должны быть загружены в другое место в Интернете и обозначены ссылкой в ​​коде.

По возможности храните изображения на собственном сервере или используйте Google Диск (или другой аналогичный сервис). При загрузке на последний убедитесь, что ссылка является общедоступной, а не частной (попытка получить к ней доступ в режиме инкогнито должна сработать). При загрузке в популярные службы обмена изображениями, такие как Imgur или Tinypic, убедитесь, что вы получаете прямую ссылку на изображение, а не на папку, в которой оно хранится.

Внешние таблицы стилей не работают

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

Вы не можете использовать веб-шрифты

Gmail не позволяет использовать какие-либо веб-шрифты, и нет возможности импортировать их в ваш HTML.Вам нужно будет использовать один из доступных шрифтов в своих письмах.

Использование редакторов HTML

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

Более сложные инструменты включают в себя десятки шаблонов, подходящих для любого случая. Вы выбираете нужный, настраиваете его в соответствии со своими потребностями, просматриваете и загружаете весь HTML-код.Затем вы следуете приведенным выше инструкциям, чтобы отправить его через Gmail или использовать любой другой клиент или поставщика услуг электронной почты (ESP), например eSputnik, GetResponse и т. Д. Большинство этих инструментов работают по модели freemium, что позволяет вам попробовать некоторые базовые шаблоны бесплатно и взимать с вас плату. для более продвинутых.

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

Кстати, недавно мы рассмотрели 10 лучших редакторов электронной почты HTML в нашем блоге, чтобы облегчить выбор. Посмотрите их здесь.

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

Как проверить электронную почту в формате HTML

К настоящему времени ваше электронное письмо, вероятно, составлено и готово к отправке.Вы все же закончили? Мы думаем, что нет. Прежде чем нажать кнопку «отправить», вы можете протестировать каждый шаблон в нескольких клиентах и ​​на экранах разных размеров. Вы можете быть удивлены тем, как некоторые платформы будут отображать ваше тщательно продуманное сообщение.

Вы можете отправлять такие электронные письма на различные свои адреса электронной почты или своим коллегам / друзьям. Кроме того, вы можете автоматизировать этот процесс, добавив такой инструмент, как Mailtrap. Одна из его функций — предварительный просмотр того, как электронное письмо будет выглядеть в браузере.Вы можете изменить размер экрана и просмотреть свое сообщение, как если бы оно было доставлено на мобильный телефон или планшет. Вы сразу заметите, если что-то отображается неправильно. Даже если все в порядке, Mailtrap проверяет код электронной почты и сразу же сообщает вам, какие элементы могут вызвать проблему и какой клиент электронной почты, скорее всего, будет затронут.

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

Заключительные слова

Как видите, отправлять электронные письма в формате HTML через Gmail совсем несложно. Единственная сложная часть может заключаться в их правильном отображении в огромном количестве браузеров и почтовых клиентов. Однако с небольшой практикой и подходящим набором инструментов это не должно стать проблемой. Чтобы убедиться, что все работает без сбоев, используйте последнюю функцию Mailtrap — средство проверки электронной почты HTML, чтобы узнать, как Gmail, Outlook, Apple Mail будут обрабатывать вашу электронную почту.

Как использовать собственный HTML-код в окне создания сообщения Gmail [3 способа]

Сегодня я покажу , как создавать «электронные письма в формате HTML» и отправлять их в Gmail. Преимущество этого состоит в том, что вы можете разрабатывать кампании по электронной почте, а затем редактировать и отправлять их прямо в Gmail , либо как кампанию, либо просто как часть обычной электронной переписки.

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

Почему импорт HTML в Gmail «не работает»

Если вы возьмете HTML-код и вставите его «в сыром виде» в окно создания сообщения Gmail, он больше не отобразит ничего — он будет отображаться как HTML-код.Таким образом, HTML сам по себе не поможет вам отформатировать форму или внешний вид ваших писем.

Итак, я покажу вам, как это обойти.

Как отправить электронное письмо в формате HTML с помощью Gmail

Существует тремя способами вы можете загрузить окно Gmail Compose с помощью пользовательского HTML .

1. Скопируйте / вставьте обработанный HTML-код в окно создания.
2. Вставьте свой HTML-код в окно создания с помощью Chrome Developer Tools
3. Используйте расширение Chrome , чтобы добавить редактор HTML в поле ввода Gmail

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

Вариант 1. Скопируйте / вставьте обработанный HTML-код

Само по себе окно Gmail Compose не позволяет редактировать HTML «позади» сообщения. В этом отличие от таких поставщиков услуг электронной почты, как Mailchimp или Constant Contact, в которых вы можете редактировать необработанный HTML. Итак, описанный ниже метод — это способ обойти это ограничение Gmail.

После того, как вы написали свой HTML, процесс в основном сводится к копированию и вставке. Вы создаете свою страницу в HTML, загружаете ее в браузер, копируете содержимое браузера, а затем вставляете его в окно создания сообщения Gmail. Под «обработанным» HTML я имею в виду то, как выглядит HTML в браузере , с цветами, шрифтами и изображениями.

Давайте быстро рассмотрим это.

Создание и отправка электронного письма в формате HTML

1. Напишите свой HTML. В этом примере я использую шаблонный HTML, адаптированный для наших целей.HTML может быть написан напрямую или, возможно, составлен с помощью инструмента разработки HTML. Gmail немного разборчив с тем, что он позволяет использовать в качестве HTML в своих электронных письмах, поэтому вот несколько важных рекомендаций:
   — вы, , не можете использовать внешние таблицы стилей , хотя вы можете использовать встроенный CSS (например,), а также встроенный CSS в заголовок. Дополнительные сведения о том, что именно можно и нужно использовать в Gmail, см. На этой странице. Примечание. Gmail изменил поддержку CSS в 2016 году, поэтому в более старых публикациях в Интернете может утверждаться, что они не поддерживают то, что на самом деле делают.Сообщение, на которое я указал, обновлено с учетом этого изменения.
   — Некоторые теги HTML могут не поддерживаться . В этом списке (который может быть не совсем актуальным) показаны HTML-теги, которые поддерживаются, а некоторые — нет.
   — Gmail не поддерживает веб-шрифты. Итак, либо используйте стандартные шрифты, которые они предоставляют, либо, если вам нужен другой шрифт для чего-то вроде логотипа, сделайте изображение этого текста. Затем в HTML-коде укажите ссылку на это изображение, размещенное в Интернете, что я сделал для логотипа «Книги Бинкмана» в моем образце электронного письма ниже.
   — Все изображения должны быть где-то размещены в Интернете — их нельзя включать в электронное письмо. Вы можете размещать изображения на Imgur, Amazon Web Services, Google Docs (если вы можете получить прямую ссылку на изображение) или в любом другом месте, предназначенном для размещения изображений.
   — Использование таблиц для организации отображения содержимого является рекомендуемым способом для электронных писем в формате HTML. Однако даже при использовании таблиц все еще есть проблемы, на которые следует обратить внимание.
   — Документы Google для создания документов могут быть проблематичными. Хотя существуют руководства по использованию Документов Google для создания электронного письма в формате HTML без кодирования, когда я попробовал его, я обнаружил, что то, что отображалось в Документах Google, было не совсем тем, что было в электронном письме (например, что-то, что было сосредоточено в Google Документы были выровнены по левому краю в электронном письме).
   — Будьте проще. Поскольку то, что будет поддерживать Gmail, в некоторой степени непредсказуемо, лучше всего упростить работу с HTML. (Это, наверное, хорошая идея и с точки зрения получателей.Никому не нужно слишком сложное электронное письмо.) Простота также помогает почтовым клиентам ваших получателей отображать вещи в соответствии с вашими намерениями, особенно когда речь идет об адаптивном дизайне электронной почты.
   — Создайте шаблон. После форматирования HTML-файла сохраните его как шаблон вне Gmail. Затем в будущем вы можете использовать этот шаблон для создания новых писем, просто заменив несколько слов, без необходимости воссоздавать HTML-код для настройки макета, размещения логотипа и т. Д.
   — Помните, Gmail находится в стадии разработки. Gmail постоянно меняется, поэтому сообщения в блогах или ответы в Интернете, написанные несколько лет назад, уже устарели. Если вы изучаете, как что-то делать с HTML и Gmail, попытайтесь найти контент, который был написан как можно раньше.

   Часть HTML, используемая для создания электронного письма.

2. Отобразить страницу в браузере. Я использовал Chrome и просто открыл (Ctrl-O) файл .html, который был на моем компьютере.

   HTML-код, отображаемый в браузере Chrome.

3. В окне браузера выделите все и скопируйте содержимое окна браузера в буфер обмена.
4. Откройте окно создания сообщения Gmail и вставьте его в основную текстовую область. Электронное письмо в формате HTML должно появиться в окне создания сообщения. Еще раз проверьте (включая прокрутку вниз), что все выглядит правильно, прежде чем отправлять электронное письмо. Письмо

   HTML теперь вставлено в окно создания Gmail.

5. Отправьте слияние с GMass. Как обычно, просто нажмите красную кнопку GMass .

   Готово к отправке, просто нужно нажать GMass…

Вот и все! Хорошая вещь в этом подходе заключается в том, что когда вы сохраняете файл HTML в качестве шаблона, ваши будущие электронные письма в формате HTML будут выглядеть согласованно и создавать «фирменный стиль» в ваших электронных письмах. Это также сэкономит вам огромное количество времени на создание новых электронных писем в формате HTML, и вам не придется создавать какие-либо внешние файлы CSS.

Конечно, этот метод можно комбинировать с любыми другими способами использования GMass , например, из электронной таблицы Google Docs или даже как часть автоматизированной последовательности электронной почты .

Вариант 2. Вставьте HTML-код с помощью инструментов разработчика Chrome

Это метод взлома Gmail и Chrome. Вы щелкните правой кнопкой мыши в окне Gmail Compose , найдите соответствующую часть HTML элемента поля и вставьте свой HTML-код.

Сначала щелкните правой кнопкой мыши в любом месте поля Compose и выберите Inspect .

Chrome затем разделится и откроет панель, показывающую HTML-код поля Compose, и одна часть будет выделена.

Найдите «div» с пометкой «contenteditable = true», затем щелкните правой кнопкой мыши и выберите Изменить как HTML .

Часть внутри тега «div» — это часть, которую вы должны заменить на свой собственный HTML-код.

Вот мой собственный HTML-код в текстовом редакторе Sublime:

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

 
 Это мой заголовок 
 

 Это мой первый абзац.

 Вот жирный текст. 

 Вот изображение солнца: 




 

Наконец, вот мой код, вставленный в:

, и как только я щелкаю, окно Compose заполняется обработанной версией HTML.

Вариант 3. Используйте расширение Chrome

Есть несколько расширений Chrome , которые добавляют изящный HTML-редактор в окно Gmail Compose, так что вы можете редактировать HTML за кулисами простым в использовании способом.В варианте 2 вы, , также редактируете HTML за кулисами, но делаете это напрямую, взламывая код за HTML-страницей. Расширения Chrome позволяют делать то же самое, но упрощают весь процесс HTML-кода.

Расширение Chrome 1: Бесплатный редактор HTML для Gmail от cloudHQ

Это самый надежный из редакторов HTML, поскольку он также включает инструменты проектирования WYSIWIG. Единственное неудобство, связанное с этим расширением, — это , оно требует, чтобы вы создали с ними учетную запись .Они не требуют доступа OAuth к вашей учетной записи Gmail, но им требуются права входа в Google. По сути, это не подвергает риску данные вашей учетной записи, но это раздражает, потому что все функции должны быть реализованы на стороне клиента.

Щелкните значок расширения в нижней части окна создания.

Их инструмент для дизайна электронной почты выглядит так:

Инструмент дизайна занимает окно «Создать», пока вы не нажмете «Закрыть редактор».”

Вы также можете посмотреть их видео, чтобы увидеть их расширение в действии.

Расширение хром 2: GMass

Мое собственное расширение Chrome включает функцию «HTML», поэтому вы можете просматривать и устанавливать HTML в окно Compose .

Запустите окно Settings и щелкните «HTML».

Вставьте свой HTML.

Ударьте Хорошо, , и наблюдайте, как происходит волшебство.

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

Расширение Chrome 3: Инструмент вставки HTML для Gmail

Это отличное расширение, которое мне нравится больше всего, потому что оно не требует доступа OAuth к моей учетной записи Gmail. Он работает полностью на стороне клиента, не отправляя никакой информации обратно на сервер.