как вставить скопированный код электронной формы в файл главной страницы официального сайта

База знаний uCoz

1. Общие сведения

1.1. Полное наименование Системы и ее условное обозначение Федеральная государственная информационная система «Единый портал государственных и муниципальных услуг (функций)» (далее – Единый портал). Единое окно цифровой обратной связи. Условное обозначение – Система.

1.2. Описание электронной формы

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

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

1.3 Регистрация на сайте Госуслуг и получение кода виджета для установки

1.3.2. Зайдите в личный кабинет (ЛКО). Пройдите, если потребуется, повторную авторизацию на ЕПГУ.

1.3.3. Выберите своё учреждение и перейдите в него (по кнопке внизу справа или по двойному щелчку по названию ОУ.

1.3.4. Перейдите в раздел «Функционирование ЛКО».

Прокрутите страницу до подзаголовка «Веб-виджет» и выберите «Скопировать код».

2. Требования к размещению электронной формы

Электронная форма должна размещаться на первом экране главной страницы официальных сайтов Органов и организаций.

3. Порядок действий для размещения виджета

Предварительное условие: Для размещения электронной формы необходим личный кабинет Органа или организации (далее – ЛКО), зарегистрированный в Системе. Для регистрации ЛКО обратитесь в техническую поддержку с соответствующим запросом (см. п.4 настоящей инструкции).

Шаг 1: В настройках ЛКО, на вкладке «Функционирование ЛКО» выберите один из вариантов оформления баннера (рисунок 1, отметка 1).

Шаг 2: Нажмите кнопку «Сгенерировать код» (рисунок 1, отметка 2).

Шаг 3: Скопируйте код электронной формы, нажав кнопку «Скопировать код» (рисунок 1, отметка 3).

Шаг 4: Вставьте скопированный код электронной формы на главную страницу, для этого открываем главную на редактирование:

Или же переходим по адресу: ваш-сайт /index/31-1-0-1-2 после чего у вас откроется на редактирование главная страница:

как показано на изображении выше, ставим здесь код виджета и сохраняем изменения.

ВАЖНО: Каждый орган/организация должны использовать уникальный код веб-виджета и уникальный ЛКО для соответствующей веб-страницы/сайта размещения электронной формы.

Недопустимо:

— использование одного веб-виджета для нескольких органов/организаций;

— изменение размеров веб-виджета, негативно влияющее на дизайн и удобство пользователей.

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

Примечание! Устанавливая на сайт виджет Госуслуг, нужно устанавливать лишь один виджет, нельзя одновременно устанавливать несколько так как один из них работать в данной ситуации не будет.

Если от вас требуют установить новый виджет, в данной ситуации старый, который у вас ранее был установлен нужно удалить и установить новый.

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

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

4. Техническая поддержка

В случае возникновения вопросов, сложностей с размещением электронной формы, необходимо отправить запрос в службу технической поддержки по электронному адресу sd@sc.minsvyaz.ru:

В заявке обязательно должны быть указаны:

– фамилия, имя и отчество инициатора заявки;

– электронный адрес регистрации в Системе;

– наименование ведомства/организации инициатора;

– описание причины и сути заявки;

– детальное описание ситуации;

– ожидаемое поведение Системы по шагам и результат ее работы (скриншоты экранов, коды ошибок и т.д.).

Источник

Как вставить код на сайт

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

Если нужно вставить код на сайт и чтобы он был виден на всех страницах и в определенном месте, то это можно сделать непосредственно в главном файле сайта, обычно это index.php, index.html.

Как вставить код на сайт при использовании CMS-системы

Чтобы вставить код на сайт в определенном месте страницы, нужно для начала открыть файл index.php. Открыть его можно с помощью специального редактора или блокнота. Затем, в открытом файле с кодом страницы сайта найти место, куда вставлять код. Для того, чтобы найти место, куда будет вставлен код, удобно воспользоваться поиском в исходном коде страницы, задав для поиска фразу, расположенную вблизи того места где будет вставляться код на сайт. Далее скопировать код и вставить в выбранное место в файле index.php. После этого следует вставленный код отформатировать, чтобы выводимай им информация отображалась в нужном виде.

Как вставить код на сайт и отформатировать его

Если это сторонний код, то он обычно уже содержит контейнер типа …..

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

Делается это через атрибуты CSS таблиц, используя свойство style или создавая отдельный класс в таблице стилей.

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

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

Еще один способ смотрите в статье как вставить html код

Источник

Форма входа и регистрации с помощью HTML5 и CSS3

Здесь мы использовали несколько приемов HTML5. Например, элемент type=password автоматически скрывает то, что пользователь печатает и заменяет символы точками или звездочками (зависит от браузера). Элемент type=email позволяет браузеру проверить правильность формата email адреса. Кроме того, мы использовали параметр require=required; браузеры, поддерживающие данный параметр не позволят пользователю отправить форму до тех пор, пока поле не заполнено, JavaScript здесь не требуется. Параметр autocomplete=on будет автоматически заполнять некоторые поля. Мы также использовали замещающийся текст, который поможет пользователю при заполнении формы.

Теперь о двух хитрых моментах. Вы наверное заметили две ссылки в начале формы. Этот ловкий прием позволит нашей формы вести себя правильно при работе с якорями (anchors).

Второй момент связан с применением шрифта с иконками. Мы будем использовать data-attribute, чтобы отобразить иконки. Устанавливая параметр data-icon=”icon_character” с соответствующим символов в HTML, мы должны назначить лишь одно правило в CSS для установления стиля всех иконок. Подробнее об этом приеме можно почитать на сайте: 24 Ways: Displaying Icons with Fonts and Data- Attributes.

Для чистоты кода я пропущу базовые параметры (html, body и т.п.), но вы сможете найти их в исходных файлах. Повторяю, что я использую приемы CSS3, которые не будут работать во всех браузерах. Итак, давайте же приступим!

Стилизуем формы, используя CSS3

Во-первых, давайте назначим нашим формам базовый стиль.

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

Здесь мы назначим свойства для шапки:

Замечу, что сегодня только браузеры с webkit поддерживают background-clip: text, поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр background-clip: text работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр -webkit-text-fill-color: transparent позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.

Мы также создали тонкую линию под заголовком с помощью элемента :after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.

Теперь давайте позаботимся о полях ввода и придадим им приятный вид.

Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства :active и :focus.

Здесь мы использовали псевдо класс :not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства :focus и :active.

Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы :before и :after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas. Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут data-icon? Именно в него нужно вставить букву. Я использовал data-icon=’u’ для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @font-face.

Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр content: attr(data-icon), чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.

Теперь назначим правила для кнопки отправки формы.

Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.

Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:

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

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

Создаем анимацию

Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:

Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.

Теперь самое интересное: меняем формы местами, используя псевдо класс :target. Вам нужно понять одну вещь по поводу :target: для перемещения мы будем использовать якоря. Нормальное поведение якоря — прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none. Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).

Вот, что происходит: когда мы кликаем на кнопку Присоединиться, мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft. Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.
Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.

Форма, которая “исчезает”, будет иметь анимацию затемнения влево:

Вот и все, друзья. Надеюсь вам понравился этот туториал!

Заметим, что в некоторых браузерах параметр background-clip: text не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс :target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет.

Источник

Куда на сайте вставлять код?

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

Какой код мы хотим вставить?

Это лишь малая часть примеров.

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

Ищем (определяем) файл для размещения кода

За отображение сайта, как правило отвечает несколько файлов. Вот самые популярные в WordPress: index.php; single.php; page.php; header.php; footer.php; sidebar.php; style.css.

Верхняя часть сайта

За вывод верхней части как правило отвечает файл header.php (шапка сайта). Начало этого файла как правило имеет следующий вид:

Между тегами размещают скрипты, которые работают на всех страницах сайта.

Для каждой темы содержимое этих тегов может быть разным.

Главная страница сайта

За отображение главной страницы сайта отвечает файл index.php чаще всего с помощью языка php в этом файле объединяется код из других файлов например (header.php, footer.php) тем самым отображаемая страница в браузере собирается из нескольких файлов.

Боковое Меню сайта

За вывод сайтбара (боковой блок) на сайте как правило отвечает файл sidebar.php сюда же Вы можете вставить блок с рекламой.

Вывод записей

В случае если вы хотите изменить отражение записей блога используйте файл single.php.

Страницы сайта

Для изменения страниц сайта используйте файл page.php.

Подвал сайта

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

Внешний вид страницы

Если вы хотите видоизменить отображение сайта то вам понадобиться файл стилей style.css.

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

Определяем место вставки кода

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

С его помощью мы сможете определить название блока над, под или в который надо вставить ваш код.

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

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

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

Источник

Как отправить HTML-письмо: 4 простых способа

Блочный редактор писем, готовые шаблоны email, формы подписки и автоматизация. Запускайте email-рассылки, чтобы быть на связи со своими клиентами.

Где взять базу? Как сделать красивое письмо? Какие показатели смотреть? Расскажем об этом в бесплатном курсе из 16 писем. Татуировка в каждом письме!

Рассказываем про инструменты для email-рассылок. Обсуждаем лучшие примеры и механики. Говорим о деньгах. Публикуем вакансии.

Все email-письма можно разделить на два вида: Plain Text и HTML. Первые вы видели и писали много раз — это обычное текстовое сообщение, в котором можно выбрать шрифт или вставить гиперссылки. HTML-письма часто отправляют бренды: в них много картинок, есть кнопки, макет часто разделен на несколько колонок.

Кажется, что для создания HTML-писем нужно быть верстальщиком 80-го уровня. Но это не так: создать красивое письмо можно совсем без знаний в дизайне и верстке.

Я расскажу, как подготовить шаблон email и отправить его — через сервис рассылок или обычную почту.

Как создать HTML-письмо

Задизайнить и сверстать письмо можно четырьмя способами.

В блочном редакторе

Блочный редактор помогает верстать email тем, кто в совершенстве не владеет HTML и CSS. Письмо составляется по принципу конструктора Lego — из смысловых блоков разных размеров, которые вы заполняете контентом. Шаблон настраивается под конкретный проект в блочном редакторе: иногда можно обойтись только заменой картинок и текста.

+ большой выбор редакторов

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

— при создании писем вы ограничены элементами и структурой, которые доступны в редакторе

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

Предлагаю создать HTML-письмо на основе готового шаблона в редакторе UniSender:

2. Перед тем, как запустить рассылку, загрузите базу подписчиков — список email-адресов, на которые вы будете слать письма.

3. Начните создавать email-рассылку в сервисе : пропишите адрес, с которого будете отправлять письмо, имя отправителя и тему письма. Чтобы создать письмо, заходите в «Создать письмо» → «Email».

4. Наполните шаблон информацией или создайте письмо с нуля. О том, как работать в блочном редакторе, можно подробно прочитать в нашей Базе знаний.

5. Когда шаблон будет готов, нажмите «Сохранить». На следующих этапах вам нужно будет ввести тему письма и выбрать людей, которым вы будете отправлять рассылку.

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

В визуальном редакторе

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

+ в большинство блочных редакторов уже встроены визуальные редакторы. Между ними можно переключаться— нужно знать HTML и CSS

— малый выбор визуальных редакторов: большинство идут в связке с блочным

В редакторе первичного кода

В редакторах типа Sublime Text 3 и Visual Studio Code вы вручную прописываете HTML-код, который потом загружаете в сервис email-рассылок или почтовое приложение. Смотреть, как выглядит письмо, приходится в отдельной вкладке браузера, куда вы заливаете HTML-код.

+ доступны встроенные инструменты для упрощения работы над кодом

+ можно скопировать HTML-код любого письма и создать на его основе собственное— подходит только для опытных верстальщиков

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

Заказать на аутсорсе

HTML-письмо сверстает фрилансер, сервис email-рассылок или веб-студия. Вы получите адаптивный шаблон, который будет отвечать брендбуку компании. Это может быть универсальное письмо, email под конкретную акцию или welcome-серия.

Заказать верстку письма можно:

+ несложно найти исполнителя — в сервисе, через который вы делаете рассылку, будет дополнительная услуга «Разработать HTML-письмо»

+ получите готовое письмо через 2-4 дня— во многом результат верстки зависит от того, насколько подробно вы заполните бриф

— нужно платить за каждый отдельный вариант письма

— мало веб-студий, которые занимаются HTML-письмами

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

Когда письмо готово, его нужно отправить. Расскажу, как сделать это через сервис рассылки или вручную через почтовики Gmail, Mail.ru, Yandex и Outlook.

Отправляем через сервис рассылки

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

Если верстали во внешнем блочном редакторе

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

1. Экспортируйте HTML-письмо в UniSender. Например, на бесплатном тарифе Stripo доступно 4 экспорта в месяц.

2. Введите имя аккаунта и API key. Ключ API можно найти в профиле UniSender. Он доступен в Личном кабинет по вкладке «Интеграция и API».

3. Переходим в UniSender. Найдите HTML-письмо в меню «Рассылки»/«Мои шаблоны». Оно появится сразу же после экспорта.

4. Проверьте письмо перед запуском. На этом этапе в HTML-редакторе UniSender можно исправить опечатки, изменить форматирование и добавить картинки. Если результат нравится — сохраните изменения.

5. Создайте рассылку в личном кабинете. Адрес отправки, имя отправителя и тему письма можно будет поменять позже, после настройки шаблона.

Если создавали письмо в редакторе первичного кода

Если вы верстали письмо в редакторе первичного кода, его также можно отправить через сервис рассылок. Расскажу на примере Visual Studio Code, что делать, если у вас уже есть HTML-код письма и вы хотите вставить его в сервис рассылки.

Сохраните письмо в формате HTML.

В UniSender создайте новую рассылку и выберите пункт «HTML-редактор».

В открывшемся окне редактора нажмите «Загрузка из файла». Выберите HTML-файл, который вы сохранили ранее в Visual Studio Code, и загрузите его.

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

Отправляем вручную в почтовике

Дальше надо просто вставить код письма в почтовик и отправить. Расскажем, как это сделать в разных программах.

В Gmail

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

2. Подсвеченный синим блок — это код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».

3. Удалите фрагмент
и вставьте вместо него HTML-код письма. Как только закроете окно консоли, письмо отобразится в поле текста Gmail.

4. Добавьте получателя и введите тему письма.

5. Отправьте тестовое письмо, чтобы проверить его на ошибки. Например, если вы забудете проставить ссылки на изображение в HTML-шаблоне, при просмотре в Gmail в углу картинки появится кнопка «Скачать».

6. Если с тестовым письмом все ок, отправляем боевую рассылку.

В Mail.ru

Чтобы залить HTML-письмо в Mail.ru вручную, нужно:

2. Подсвеченная синим строчка — это код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».

3. Удалите фрагмент
и вставьте вместо него HTML-код письма. Как только закроете окно консоли, письмо отобразится в поле текста Mail.ru.

4. Добавьте получателя и введите тему письма.

5. Отправьте тестовое письмо, чтобы проверить его на ошибки.

6. Если с тестовым письмом все ок, отправляем боевую рассылку.

В Yandex

Чтобы залить HTML-письмо в «Яндекс.Почту» вручную, нужно:

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

3. Подсвеченная синим строчка — это код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».

4. Удалите фрагмент
и вставьте вместо него HTML-код письма. Как только закроете окно консоли, письмо отобразится в поле текста Yandex.

5. Отредактируйте HTML-шаблон. В нём может слететь форматирование: появиться лишние отступы или пустые строчки.

6. Добавьте получателя и введите тему письма.

7. Отправьте тестовое письмо, чтобы проверить его на ошибки. Если с тестовым письмом все ок, отправляем боевую рассылку.

В Outlook

Чтобы залить HTML-письмо в Outlook вручную, нужно:

2. Подсвеченный синим блок — код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».

3. Удалите фрагмент
и вставьте вместо него HTML-код письма. Как только закроете окно консоли, письмо отобразится в поле текста Outlook.

4. Проверьте шаблон: все ли картинки отображаются, не слетело ли оформление.

5. Добавьте получателя и введите тему письма.

6. Отправьте тестовое письмо, чтобы проверить его на ошибки. Если с тестовым письмом все ок, отправляем боевую рассылку.

Итого

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

Удобнее верстать письмо во встроенном редакторе сервиса рассылки или редакторе, у которого интеграция с этим сервисом.

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

Большинство редакторов, с которыми вы столкнетесь — комбинация блочного и визуального.

Если привыкли работать в конкретном редакторе — верстайте письмо в нем, сохраняйте отдельным файлом и импортируйте в сервис рассылок.

Отправить HTML-письмо вручную можно в любом почтовике. Удобнее всего это сделать в Gmail, а вот в «Яндекс.почте» придется сначала включить панель оформления. Также в «Яндекс. почте» может слететь верстка или не загрузиться картинки.

Источник