Генератор HTML-шаблонов email-писем
Создайте адаптивный HTML-шаблон письма, совместимый с почтовыми клиентами (табличная верстка с инлайн-стилями), из заголовка, текста письма, кнопки призыва к действию, подвала и фирменных цветов. Скопируйте готовый HTML или посмотрите предпросмотр в реальном времени.
Ввод
Используется для тега <title> письма.
Скрытый фрагмент предпросмотра, который большинство почтовых ящиков показывает рядом с темой письма.
Каждая пустая строка начинает новый абзац; одиночные переносы строк превращаются в <br>.
Используется для текста заголовка и кнопки.
Вывод
Здесь появится предпросмотр вашего письма.
Табличная верстка с инлайн-стилями — вставьте в свой сервис рассылок.
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/html-email-template-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"subject": "Welcome to Acme",
"preheader": "Everything you need to get started.",
"headerText": "Acme",
"bodyContent": "Hi there,\n\nThanks for signing up. Your account i…",
"buttonText": "Get Started",
"buttonUrl": "https://example.com/start",
"footerText": "You received this email because you signed up at…",
"brandColor": "#464aff",
"bgColor": "#f4f4f7"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `html-email-template-generator` tool (HTML Email Template Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/html-email-template-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор HTML-шаблонов email-писем — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Создайте адаптивное HTML-письмо, готовое к отправке, за считаные секунды. Заполните заголовок, немного текста, кнопку призыва к действию, подвал и фирменные цвета — и инструмент сгенерирует чистый HTML с табличной версткой и инлайн-стилями, который стабильно отображается в Gmail, Outlook, Apple Mail, Yahoo и других клиентах. Затем скопируйте его или скачайте как файл .html.
Чем HTML для писем отличается от HTML для сайтов
HTML, который вы пишете для сайта, не работает в почтовом ящике. Почтовые клиенты отстают от браузеров на годы и очень непоследовательны: Outlook для Windows отрисовывает письма движком верстки Microsoft Word, Gmail удаляет блоки <style> и внешние таблицы стилей, а почти никто из них не поддерживает flexbox, grid или современное позиционирование CSS. Код, который идеально выглядит в Chrome, в почтовом ящике может полностью развалиться.
Разработчики писем обходят это намеренно старомодным подходом, которому следует и этот генератор:
- Табличная верстка. Структура строится из вложенных элементов
<table>, а не из<div>и flexbox, потому что таблицы — единственный примитив верстки, который понимают все клиенты. - Только инлайн-стили. Каждый стиль находится в атрибуте
style=""прямо у элемента. Блока<style>, который могли бы удалить, здесь нет. - Атрибуты
width. Основной контейнер используетwidth="600"— безопасную и широко применяемую ширину контента — как HTML-атрибут, потому что Outlook учитывает атрибут, даже когда игнорирует CSS. - Правильная оболочка документа. Включены обёртка
<!DOCTYPE html>,<title>и скрытый<div>прехедера (короткая строка предпросмотра, которую большинство почтовых ящиков показывает рядом с темой письма).
Как пользоваться
- Введите тему письма (она используется для
<title>) и прехедер. - Напишите текст заголовка/логотипа и текст письма. Оставляйте пустую строку между абзацами — каждый становится отдельным
<p>; одиночные переносы строк превращаются в<br>. - Добавьте текст и URL кнопки для призыва к действию (оставьте текст пустым, чтобы не выводить кнопку).
- Выберите фирменный цвет (текст заголовка и кнопка) и цвет фона.
- Следите, как обновляется предпросмотр в реальном времени, затем скопируйте HTML или скачайте
email-template.html.
Всё работает в вашем браузере — ничего из введённого не отправляется на сервер.
Можно ли вставить это в Mailchimp или другой сервис рассылок?
Да. Результат — стандартный самодостаточный HTML. У большинства сервисов рассылок есть опция «вставить свой код» или «импорт HTML» — просто вставьте туда сгенерированную разметку.
Безопасны ли мои данные?
Весь введённый текст экранируется в HTML перед тем, как попасть в шаблон, поэтому символы вроде <, >, & и кавычки отображаются как обычный текст и не ломают разметку.
Работает ли это в Outlook?
Да. Табличная верстка, инлайн-стили и атрибуты width — именно те приёмы, которые помогают сохранить письма неизменными в основанном на Word движке отрисовки Outlook.