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

small_image (1) (1) (1).png

thumbnail_image (1) (1) (1).png

image (1) (1) (1).png

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

Хотите узнать, насколько аудитория довольна вашим продуктом и готова его рекомендовать? В этом поможет **NPS‑опрос** — быстрый способ понять реальную картину клиентского восприятия.

В этой статье расскажем, как работают NPS-опросы, а также как быстро и наглядно настроить их в email-рассылке с помощью **Pixcraft**.
## Что такое NPS
**Net Promoter Score** — это индекс лояльности клиентов, который показывает, насколько они готовы рекомендовать ваш продукт или компанию своему окружению. Он позволяет измерить уровень доверия и удовлетворённости без использования длинных анкет.

Методика проста: вы задаёте ключевой вопрос, например, «Насколько вероятно, что вы порекомендуете наш продукт другу или коллеге?». Клиент выбирает оценку и в зависимости от ответа попадает в одну из трёх категорий.
<br><br>
<Table>
| Категория  | Описание               |
| --------- | ------------------------ |
| **Промоутеры (оценка 9–10)** | В полной мере довольны продуктом и готовы активно рекомендовать его другим. Часто именно они становятся «неофициальными амбассадорами» бренда: делятся положительными отзывами и приводят новых пользователей. |
| **Нейтралы (оценка 7–8)** | Не испытывают явного недовольства, но и не проявляют яркого энтузиазма. Они продолжают пользоваться продуктом, но не видят весомой причины делиться опытом. Если почувствуют, что качество продукта стало хуже, могут легко перейти к конкурентам. |
| **Критики (оценка 0–6)** | Недовольные клиенты, у которых возникают проблемы с продуктом, сервисом или коммуникацией. Их мнения особенно важны: именно они чаще других делятся отзывами, а негативные отклики напрямую влияют на репутацию и могут показать слабые места продукта или сервиса. |
</Table>
<br><br>
Значение рассчитывается путём вычитания числа Критиков из числа Промоутеров. Например, если 50% опрошенных поставили оценку 10 или 9, а 20% — от 0 до 6, то NPS будет равен **50 – 20 = 30**. Чем выше показатель, тем лояльнее ваша клиентская база и больше шансов на органический рост бизнеса за счёт рекомендаций.

NPS может быть отрицательным. В таком случае это повод немедленно выяснить, чем именно недовольны клиенты и как это можно исправить.
## Зачем бизнесу знать NPS
NPS-опросы не просто дают общее представление о клиентской лояльности, а позволяют компаниям заранее видеть риски, находить зоны роста и действовать на опережение.

Вот что делает NPS полезным для бизнеса:

- **Понимание реального клиентского восприятия**. Цифры продаж или посещаемость сайта не всегда отражают настроение клиентов. NPS показывает, насколько аудитория в действительности довольна вашим продуктом.

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

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

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

Встраивать NPS-опросы можно непосредственно в email-кампании. Это даёт бизнесу уникальные преимущества:

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

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

- **Сегментация и автоматизация действий**. Оценки позволяют автоматически сегментировать аудиторию на Промоутеров, Нейтралов и Критиков. Впоследствии вы сможете запускать для каждой группы персонализированные сценарии, такие как бонусы или удерживающие кампании.

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

Особое внимание стоит уделять сопровождающим комментариям. За числовой оценкой может скрываться конкретная проблема или инсайт, который поможет вам улучшить продукт и удержать клиентов.
## Как реализовать NPS-опрос в Pixcraft
В Pixcraft есть два подхода к созданию NPS-опросов: быстрое добавление AMP-формы прямо в шаблон письма через визуальный редактор и создание отдельного AMP-компонента. Рассмотрим подробнее каждый из них.
### AMP-форма в письме
Если требуется оперативно собрать NPS-опрос, добавьте интерактивную AMP-форму в шаблон. Этот способ отлично подходит для срочных рассылок и позволяет создать форму опроса без сложной подготовки. 

Пошагово процесс выглядит так:

- На панели слева нажмите «Плюс» и перенесите примитив «Форма» в необходимое место на шаблоне.

- Выберите тип вашей формы. Для NPS-опросов подходит Radio — выбор единственного варианта из нескольких предложенных.

<Img
img="/api/uploads/01_label_3257ee1f5e.png"
alt="Выбор типа и опций формы"
/>

- Настройте ваш NPS-опрос. Добавьте числовую шкалу или другие варианты выбора, короткий вопрос (например, «Насколько вероятно, что вы порекомендуете нас?») и добавьте призыв к действию (call-to-action) на кнопку.

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

<Img
img="/api/uploads/02_opros_fbaf8c1f06.png"
alt="Готовый NPS-опрос"
/>

### Отдельный AMP-компонент
Вы также можете собрать компонент вручную и встроить его в готовый шаблон. Это удобно, если у вас уже есть HTML‑письмо, которое вы хотите дополнить интерактивным опросом. Достаточно пропустить письмо через [**конвертер Pixcraft**](https://pixcraft.io/ru/converter), чтобы получить готовую AMP‑версию, в которую можно легко добавить NPS‑форму или другой интерактивный элемент.

Вот как создать отдельный AMP-компонент в Pixcraft:

- Перейдите в раздел «Компоненты» и нажмите «Новый компонент». Откроется окно, где можно указать название и описание, а также выбрать тип компонента.

<Img
img="/api/uploads/03_komponent_77585b8ac6.png"
alt="Экран создания компонента"
/>

- Выберите заготовку формы. Для NPS-опроса подойдёт **Rating** или **Custom**. Rating сразу создаст простую числовую шкалу, а Custom предоставит пустую форму, которую можно заполнить необходимыми полями: особенно полезно, если вы хотите включить не только опрос, но также поле для комментария.

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

<Img
img="/api/uploads/04_nastroika_27d363089c.png"
alt="Настройка форма опроса"
/>

- Нажмите «Сохранить». Вы получите готовый код HTML (AMP), а также [**TJML**](https://pixcraft.io/ru/framework), которые можно кастомизировать по своему усмотрению.

<Img
img="/api/uploads/05_kod_457def3720.png"
alt="HTML-код формы опроса"
/>

Чтобы подключить опрос к вашему письму, добавьте в него сгенерированный код формы. Для корректной работы также необходимо подключить скрипты ```amp-bind```, ```amp-form``` и ```amp-mustache```.

В Pixcraft будут сохраняться только значения полей, имена которых соответствуют указанным в коде. Все остальные атрибуты, параметры и расположения можно менять в соответствии с вашим макетом.
## Отправка и обработка полученных данных
Когда пользователь заполняет и отправляет NPS-опрос, все значения автоматически фиксируются в Pixcraft. Собранные ответы можно:

- экспортировать в **CSV-файл** или отправлять в **Google Таблицы** для ручного анализа или загрузки в аналитику;

- передавать во внешние системы через **вебхуки** (автоматические оповещения о событиях в системе).

Вебхуки позволяют передавать результаты опроса на указанный вами URL-адрес сразу после отправки формы пользователем. Для этого необходимо их настроить:

- Откройте ваш компонент формы.

- Перейдите в раздел «Подключение» и в поле Webhook укажите URL, на который должны отправляться данные.

<Img
img="/api/uploads/06_webhooks_9c75a13948.png"
alt="Поле Webhook "
/>

- После того, как пользователь заполнит и отправит форму, Pixcraft сформирует и передаст POST-запрос с данными формы на указанный адрес.

Важно учитывать, что **Pixcraft не рассчитывает сам индекс NPS**. Для этого вам нужно будет настроить свою логику обработки данных в Excel, Google Таблицах или BI-инструментах.
## Альтернатива: HTML-версия
Некоторые почтовые клиенты, такие как Microsoft Outlook и Apple Mail, не поддерживают [**AMP‑письма**](https://pixcraft.io/ru/blog/kak-vnedrit-amp-pisma-v-vashu-email-strategiyu). Чтобы не потерять обратную связь, стоит дополнительно подготовить HTML‑версию. В ней вместо AMP‑формы отображается отдельная ссылка, кнопка или изображение, которые при клике ведут на веб‑форму опроса.

В качестве решения можно создать веб-версию AMP‑письма или воспользоваться сервисом [**Altcraft**](https://altcraft.com/ru), который позволяет легко развернуть веб‑форму NPS и автоматически собирать аналитику. Вот как это работает:

- **Создание формы**. В разделе «Веб‑слой» выберите «Формы» и нажмите «Создать». Укажите имя, описание и идентификатор формы. Активируйте переключатель «Опубликована», чтобы форма получила URL или стала доступна как iframe. Настройте дополнительные параметры, такие как финальная страница и ограничение на повторное заполнение.

- **Добавление NPS‑элемента**. Во вкладке «Конструктор» добавьте элемент «NPS‑опрос». Настройте заголовок, оценки и символы для шкалы. При необходимости добавьте поле комментария и сделайте опрос обязательным. Сохраните и опубликуйте форму.

- **Размещение ссылки в письме**. В Pixcraft HTML‑версия письма создаётся автоматически. Сюда рядом с AMP‑формой можно добавить визуальный элемент со ссылкой на веб‑форму Altcraft. Для элемента задайте параметр «Отображать → HTML». Это позволит отображать альтернативный вариант для email-клиентов, не поддерживающих AMP-компоненты.

<Img
img="/api/uploads/07_otobrajenie_33aac75a1e.png"
alt="Переключатель отображения элемента в Pixcraft"
/>

- **Сбор и аналитика данных**. Altcraft автоматически собирает ответы и рассчитывает индекс NPS. В разделе «Аналитика» формы можно увидеть общий NPS, распределение по группам (Промоутеры, Нейтралы, Критики) и динамику показателя.

## Заключение
Чем скорее вы внедрите NPS в ваши коммуникации, тем больше возможностей откроется как для понимания аудитории, так и для улучшения продукта. С помощью Pixcraft настроить NPS-опрос можно всего за несколько минут. Задайте клиентам простой вопрос — и получите ценные ответы, которые помогут вам расти.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там мы делимся полезными материалами, лайфхаками и идеями для работы.

В статье рассказываем, что такое NPS-опросы, чем они полезны и как их реализовать в email-рассылках с помощью Pixcraft.

small_Обложка (2).png

thumbnail_Обложка (2).png

Обложка (2).png

NPS-опросы: зачем они нужны и как их реализовать в Pixcraft

Рассказываем об улучшениях и обновлениях в блочном редакторе писем Pixcraft: различные подходы к созданию шаблонов, инструменты, адаптивность и многое другое.

small_Обложка (1).png

thumbnail_Обложка (1).png

Обложка (1).png

Новые возможности Pixcraft: как мы улучшили редактор писем

Как запустить ИИ-генератор изображений Stable Diffusion на своём компьютере: инструкция, основные функции и советы по генерации.

small_stable_diffusion_oblojka.png

thumbnail_stable_diffusion_oblojka.png

stable_diffusion_oblojka.png

Stable Diffusion: как запустить генератор изображений на своём компьютере

Как с помощью RFM-анализа сегментировать аудиторию, сократить расходы на рассылки и повысить отдачу от email-маркетинга.

small_rfm-analysis.png

thumbnail_rfm-analysis.png

rfm-analysis.png

RFM-анализ для рассылок: как сократить расходы

Email-рассылки остаются одним из самых результативных инструментов в арсенале маркетолога. Но с 30 мая 2025 года в России начали действовать новые правила обработки персональных данных — и теперь за несоблюдение требований по получению согласия на рассылку грозит значительно более крупный штраф.

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

## Какие законы нужно соблюдать, чтобы не получить штраф 

Чтобы отправлять email-рассылки законно, важно соблюдать сразу два закона: о персональных данных ([**ФЗ-152**](https://www.consultant.ru/document/cons_doc_LAW_61801/)) и о рекламе ([**ФЗ-38**](https://www.consultant.ru/document/cons_doc_LAW_61801/)). Email-адрес относится к персональным данным, и его можно использовать — хранить, обрабатывать, отправлять письма — только если человек дал на это добровольное и осознанное согласие. Для рекламных писем это согласие должно быть дано заранее. Без него любая рассылка будет считаться спамом и может привести к штрафу.

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

<Img
img="/api/uploads/pixcraft_obrabotka_dannyh_eksmo_7d202b8ad5.png"
alt="Обработка персональных данных"
/>

Законы (в частности, ст.9 и ст.15 ФЗ-152 и ст.18 закона «[**О рекламе**](https://www.consultant.ru/document/cons_doc_LAW_58968/)») требуют, чтобы согласие было подтверждено — то есть рассылка разрешена только в случае, если у вас есть доказательство, что человек действительно подписался. Также вы обязаны прекратить рассылку и удалить данные пользователя по его первому запросу.

Рассыльщик обязан учитывать случаи, когда пользователь передумал и больше не хочет получать письма. По [**закону**](https://www.consultant.ru/document/cons_doc_LAW_61801/6c94959bc017ac80140621762d2ac59f6006b08c/#:~:text=2,%D1%87%D0%B0%D1%81%D1%82%D0%B8%202%20%D1%81%D1%82%D0%B0%D1%82%D1%8C%D0%B8%2010%20%D0%B8) человек имеет право в любой момент отозвать своё согласие, и тогда оператор должен немедленно прекратить обработку его данных и удалить адрес из рассылки. Поэтому каждое письмо должно содержать понятную и доступную ссылку для отписки. Если пользователь напрямую обратился с просьбой удалить его из базы, это необходимо сделать без промедления.

<Img
img="/api/uploads/obrabotka_otpiska_c1237a8b55.png"
alt="Отписка от рассылки"
src="Отписка от рассылки в емейле"
/>

Согласно [**статье 5 Федерального закона №152-ФЗ**](https://www.consultant.ru/document/cons_doc_LAW_61801/96fbc469f91f57235cc842a85e0516a99f23dc85/), хранить персональные данные — включая email-адреса — можно только столько, сколько это действительно необходимо для достижения цели обработки. Если пользователь отписался или рассылка больше не актуальна, данные нужно удалить или обезличить. Хранить их «на всякий случай» нельзя. Допускается сохранение технической записи о подписке (например, даты, IP-адреса, источника), но только до тех пор, пока этот email-адрес используется. После отзыва согласия даже такие записи должны быть удалены из рабочей базы.

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

## Что считается нарушением при сборе email-адресов

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

**1. Рассылка без согласия.** Это самая частая ошибка. Например, компания начинает рассылать письма на адреса, собранные из чужой базы или найденные в открытом доступе — без того, чтобы человек явно разрешил отправку. Если при проверке оператор не может доказать, что подписка была добровольной, такая рассылка признаётся незаконной.

**2. Скрытые или предустановленные галочки.** Согласие должно быть осознанным. Поэтому заранее проставленные чекбоксы, расплывчатые формулировки вроде «согласен со всеми условиями» или «хочу получать новости» — это плохая практика. Такие соглашения легко оспорить, потому что они не соответствуют требованиям прозрачности и однозначности.

<Img
img="/api/uploads/soglasie_na_obrabotku_dannyh_d49b925122.png"
alt="Политика конфиденциальности"
src="Здесь галочка поставилась автоматически"
/>

**3. Нет уведомления при косвенном получении emai-адреса.** По [**ст.18.3 ФЗ-152**](https://www.consultant.ru/document/cons_doc_LAW_61801/cbf4e15b7c330f9372e876cdf2bc928bad7950ef/#:~:text=3,%D1%81%D1%83%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%83%20%D0%BF%D0%B5%D1%80%D1%81%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D1%85%20%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85%20%D1%81%D0%BB%D0%B5%D0%B4%D1%83%D1%8E%D1%89%D1%83%D1%8E%20%D0%B8%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%86%D0%B8%D1%8E), если вы получили емейл не напрямую от пользователя (например, из открытой базы), вы обязаны заранее — до начала обработки — уведомить человека, откуда вы взяли его данные, зачем их используете и как он может отказаться. Если это не сделать, вы нарушаете закон.

**4. Покупка или обмен базами.** Приобретение готовой базы email-адресов без подтверждённого согласия абонентов — грубое нарушение (нет правовых оснований для обработки данных таких людей). Аналогично, обмен списками рассылки без предварительного согласия каждого абонента также запрещён.

## Какие возможно получить штрафы при нарушениях 

[**Новые поправки**](https://www.consultant.ru/document/cons_doc_LAW_490308/3b904c06ca00c18b687ec94295a0a967ddc5cce7/#:~:text=%D0%A3%D0%B2%D0%B5%D0%BB%D0%B8%D1%87%D0%B8%D0%BB%D0%B8%20%20%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D1%8B%20%D1%88%D1%82%D1%80%D0%B0%D1%84%D0%BE%D0%B2%20%D0%BF%D0%BE,%D0%B6%D0%B5%20%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%B5%2C%20%D1%87%D1%82%D0%BE%20%D0%B8%20%D1%8E%D1%80%D0%BB%D0%B8%D1%86%D0%B0), вступившие в силу 30.05.2025, значительно ужесточают [**штрафы**](https://www.consultant.ru/legalnews/28492/#:~:text=%D0%A8%D1%82%D1%80%D0%B0%D1%84%20%D0%B7%D0%B0%20%D0%BD%D0%B0%D1%80%D1%83%D1%88%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%BE%D0%B1%D1%8F%D0%B7%D0%B0%D0%BD%D0%BD%D0%BE%D1%81%D1%82%D0%B8%20%D1%83%D0%B2%D0%B5%D0%B4%D0%BE%D0%BC%D0%B8%D1%82%D1%8C,%D0%B4%D0%BB%D1%8F%20%D0%BA%D0%BE%D0%BC%D0%BC%D0%B5%D1%80%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D1%85%20%D0%BE%D1%80%D0%B3%D0%B0%D0%BD%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D0%B9%20%D0%B8%20%D0%98%D0%9F) за нарушения в сфере персональных данных. В частности:

- **Общие нарушения (ст.13.11 КоАП).** Для организаций штрафы выросли до 150–300 тыс. руб. (против прежних 60–100 тыс.). Для должностных лиц и предпринимателей — до 50–100 тыс. руб., а для физических лиц — до 10–15 тыс. руб. За повторное нарушение санкции ещё выше (вплоть до 500–1000 тыс. руб. для организаций).

- **Специальные составы нарушений.** Законом введены крупные штрафы за несоблюдение обязанностей в сфере ПД: например, за неуведомление Роскомнадзора о намерении обрабатывать данные — штраф 100–300 тыс. руб., а за неуведомление об утечке ПД — 1–3 млн руб. (для коммерческих компаний и ИП). За массовую утечку данных (пострадало тысячи людей) штрафы доходят до сотен миллионов (или процент от оборота). При этом исключена «половинная скидка» за быстрый платёж — [**платить придётся полностью**](https://www.consultant.ru/document/cons_doc_LAW_490308/3b904c06ca00c18b687ec94295a0a967ddc5cce7/#:~:text=%D0%98%D1%81%D0%BA%D0%BB%D1%8E%D1%87%D0%B8%D0%BB%D0%B8%20%D0%B2%D0%BE%D0%B7%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D1%8C%20%D0%B7%D0%B0%D0%BF%D0%BB%D0%B0%D1%82%D0%B8%D1%82%D1%8C%20%D1%88%D1%82%D1%80%D0%B0%D1%84%20%D1%81,%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D0%BD%D1%82%D0%BD%D0%BE%D0%B9%20%D1%81%D0%BA%D0%B8%D0%B4%D0%BA%D0%BE%D0%B9).

- **Ответственность за спам (рекламные рассылки).** Cт.14.3 влечёт штрафы за рассылку рекламы без согласия. Сейчас компании могут получить штраф от 300 тыс. до 1 млн руб., а их руководители — до 100 тыс. руб. за первый факт.

<Img
img="/api/uploads/obrabotka_dannyh_6cee596d76.png"
alt="Штрфы за нарушения при сборе персональных данных"
/>

## Практические советы для email-маркетологов

- **Используйте явное согласие (Opt-In).** На сайте или в форме подписки задайте отдельный чекбокс на рассылку, не предустанавливайте галочку и чётко укажите цель (новости, акции и т.п.). Рядом должна быть ссылка на «Политику обработки персональных данных» с описанием, как вы будете использовать email.

- **Разделите согласия.** Если вы одновременно собираете согласие на обработку ПД и на маркетинговые рассылки, оформляйте их раздельно. Например, сначала пользователь ставит галочку «Согласен с Политикой конфиденциальности», а потом — «Хочу получать рассылку».

<Img
img="/api/uploads/obrabotka_dannyh_tsum_a0bdd26642.png"
alt="Выбор при подписке"
/>

- **Применяйте Double Opt-In.** Настройте автоматическую рассылку письма с просьбой подтвердить подписку. Так вы убережётесь от «случайных» подписок и получите «железное» доказательство добровольного согласия каждого адресата.

- **Документируйте факт согласия.** Храните время и способ получения согласия (например, запись о клике по кнопке «Подтвердить»). Это поможет защититься при проверках. Указывайте в системе, кем и когда даны все согласия.

- **Обеспечьте лёгкую отписку.** В каждом письме вставляйте понятную ссылку или инструкцию для отказа. При запросе пользователя удаляйте его email из списка без задержек. Регулярно очищайте базу от неактивных адресов.

- **Следите за обновлениями.** Законодательство меняется — проверяйте новости Роскомнадзора и ФАС. При необходимости вносите изменения в текст согласий, протоколы работы, политику безопасности.

- **Не покупайте чужие базы.** Рассылки на купленные или собранные не самостоятельно контакты — риск крупного штрафа. Гораздо безопаснее медленно наращивать подписчиков честным путём, соблюдая все правила.

- **Повышайте безопасность.** Используйте защищённые системы хранения и шифрование персональных данных, в том числе email-адресов, чтобы избежать утечки. Пропишите внутренние процедуры по соблюдению ФЗ-152 и обучите команду.

## Заключение 

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

Если работаете в Figma, [**загляните к нам**](https://www.figma.com/@pixcraft). Здесь мы выкладываем много полезных материалов и инструментов для дизайнеров.


С 30 мая 2025 вступили в силу новые правила рассылок. Узнайте, как легально собирать email-согласие и избежать штрафов.

small_pixcraft-personal-data-emails.png

thumbnail_pixcraft-personal-data-emails.png

pixcraft-personal-data-emails.png

Как правильно получить согласие на email-рассылку в 2025 году

AMP в email-рассылках — это способ добавить в письмо интерактив: формы, карусели, смену контента без перехода на сайт. Однако, как и в случае с обычными html-письмами, здесь есть свои особенности отображения и поведения, которые важно учитывать при верстке и тестировании.

В этой статье разбираем 8 распространённых проблем, с которыми сталкиваются верстальщики при работе с AMP-письмами, — и показываем, как их решать на практике: с примерами, кодом и пояснениями.

## 1. Проблема AMP-карусели в Gmail на iOS

При использовании стандартного компонента ```<amp-carousel>``` в Gmail на iOS возникает неприятный баг — при переключении слайдов письмо резко прокручивается вверх. Проблема известна давно, но поведение так и не было исправлено.

**Решение:** Не использовать ```<amp-carousel>```, а реализовать его имитацию с помощью состояний (amp-bind). Ниже — рабочий пример:

```html
<amp-state id="carouselState">
  <script type="application/json">
    {
        "index": 0
    }
  </script>
</amp-state>

<style amp-custom>
  .carousel-wrapper {
    position: relative;
    width: 450px;
    height: 300px;
    overflow: hidden;
  }
  .carousel-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  .slide-0 { transform: translateX(0%); }
  .slide-1 { transform: translateX(-100%); }
  .slide-2 { transform: translateX(-200%); }
  .carousel-slide {
    min-width: 100%;
    flex: 0 0 auto;
  }
</style>

<div class="carousel-wrapper">
  <div class="carousel-container" [class]="'carousel-container slide-' + carouselState.index">
    <amp-img src="https://amp.dev/static/inline-examples/images/image1.jpg" width="450" height="300" class="carousel-slide"></amp-img>
    <amp-img src="https://amp.dev/static/inline-examples/images/image2.jpg" width="450" height="300" class="carousel-slide"></amp-img>
    <amp-img src="https://amp.dev/static/inline-examples/images/image3.jpg" width="450" height="300" class="carousel-slide"></amp-img>
  </div>
</div>

<button on="tap:AMP.setState({carouselState: {index: (carouselState.index - 1 + 3) % 3}})">
  Previous
</button>

<button on="tap:AMP.setState({carouselState: {index: (carouselState.index + 1) % 3}})">
  Next
</button>
```


## 2. Проблема начальных AMP-состояний в Mail.ru

Начальное состояние, заданное через ```<amp-state>```, не применяется при загрузке письма — оно подставляется только после действия пользователя (setState). Mail.ru же полностью игнорирует содержимое ```<amp-state>```. Рассмотрим на примере:

```html
<amp-state id="myItem">
  <script type="application/json">
    {
        "el":"some value"
    }
  </script>
</amp-state>
<span [text]="myItem.el"></span>
<button on="tap:AMP.setState({})">Кнопка</button>
```


При загрузке письма мы не увидим текста. В Gmail он появится только после клика на кнопку. Mail.ru же после клика на кнопку вместо текста отобразит null.

**Решение:**

**1.** Добавьте значение по умолчанию в HTML, чтобы текст отображался сразу.

```HTML
<span [text]="myItem.el">some value</span>
```

**2.** Для корректной работы в Mail.ru, нициализируйте состояние вручную по действию пользователя. Не используйте ```<amp-state>``` для начальной инициализации, а задайте значение через ```setState```: 

```HTML
<button on="tap:AMP.setState({ myItem: { el: 'some value' } })">
  Кнопка
</button>
<div [text]="myItem.el"></div>
```

## 3. Ограничение длины выражений в Mail.ru

Ещё одна особенность AMP в Mail.ru — ограничение на сложность/длину выражений, используемых в bind. Максимальный размер выражения — 100 единиц. Если выражение превышает этот лимит, Mail.ru выдаёт ошибку вида:

```JavaScript
amp-bind: Expression eval failed. Expression size (194) exceeds max (100). Please reduce number of operands.
```

С такой ошибкой мы столкнулись при [**разработке игры «Змейка» в AMP-письме**](https://pixcraft.io/ru/blog/zmejka-v-pisme-kak-my-s-altcraft-sozdali-igru-dlya-amp-rassylki): вычисления для движения и логики игры требовали выражений длиннее 100, что приводило к их блокировке на стороне Mail.ru.

**Решение:**

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

## 4. Переменные ESP и шаблоны AMP (конфликт синтаксиса)

Многие ESP (сервисы рассылок) позволяют вставлять переменные персонализации или условные конструкции в шаблон письма. Нередко синтаксис таких переменных пересекается с синтаксисом шаблонов AMP (amp-mustache), которые используют двойные фигурные скобки ```{{ }}```. Это приводит к тому, что платформа-рассыльщик «подменяет» или искажает AMP-шаблон, считая его своими переменными. В результате письмо может сломаться или вовсе не отправиться (если ESP сочтёт шаблон некорректным).

**Решения:**

[**Altcraft**](https://altcraft.com/ru): В Altcraft шаблоны тоже используют фигурные скобки, поэтому для обозначения AMP-шаблона нужно добавить префикс $. Например, вместо ```{{success}}``` пишем ```${{success}}```. Символ $ предотвратит интерпретацию платформой, и на выходе в отправленном письме останется чистый ```{{success}}``` для AMP. То есть Altcraft пропустит такой фрагмент, позволив AMP-механизму обработать его уже на стороне клиента.

Пример: 

```<template type="amp-mustache">$\{\{success\}\}</template>``` — Altcraft не тронет содержимое внутри ```$ {{ }}```, а AMP при отображении увидит стандартный ```{{success}}```.

**Mailganer:** В Mailganer для таких случаев предусмотрены специальные теги ```{% verbatim %} ... {% endverbatim %}```. Любой код, заключённый в ```{% verbatim %}```, платформа не будет менять. Поэтому AMP-шаблон можно обернуть этими тегами. 

**Пример:**

```HTML
 <template type="amp-mustache">
  {% verbatim %}{{success}}{% endverbatim %}
</template>
```

**Unisender:** В Unisender, наоборот, ничего дополнительно делать не нужно, так как внутри тега ```<template>``` платформа вообще не пытается подставлять свои переменные. Unisender по умолчанию игнорирует содержимое ```<template type="amp-mustache">```, полагая, что это для клиентской стороны. Это упрощает жизнь — можно прямо писать ```{{variable}}``` — но есть ограничение: вы не сможете вставить персонализацию внутрь ```amp-mustache```. 

## 5. Особенности работы тёмной темы в разных клиентах

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

**Разберем подробнее:**

**Mail.ru.** Не перекрашивает AMP-письма сам, но поддерживает кастомные стили для тёмной и светлой темы. Добавьте в ```<head>```:

```HTML
<meta name="supported-color-schemes" content="light dark">
```
В стилях используйте селекторы с префиксом:

```:root[data-ogsc]``` — для тёмной темы,
```:root:not([data-ogsc])``` — для светлой.

**Gmail на Android.** Перекрашивает светлые письма в тёмные автоматически.

**Gmail на iOS.** Не перекрашивает письмо и не даёт его кастомизировать. 

**Yahoo.** Поведение похоже на Gmail: на Android — автоинверсия, на iOS — письмо остаётся без изменений. 

## 6. Время жизни AMP-письма 

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

**Решения:**

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

## 7. Ограничение размера письма в Gmail 

В Gmail действуют два разных лимита на размер письма:

- HTML-часть: максимум 102 КБ. Если превышен, письмо обрезается, и Gmail показывает ссылку «Показать полностью». Это нарушит верстку и скроет часть контента.

- **AMP-часть:** максимум 200 КБ. Если превышен, AMP-версия просто не будет отображена — пользователь увидит HTML-версию.
<Img
img="/api/uploads/screely_1563350239721_5ab764f678.png"
alt="Показана часть сообщения"
/>

**Решения:**

- **Сжимайте код.** Удалите комментарии, пробелы, дублирующиеся стили. Используйте специальные инструменты (например, [**htmlminifier.com**](https://htmlminifier.com)).

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

- **Оптимизируйте стили:** общие — в ```<style amp-custom>```, инлайн — только по необходимости.

## 8. Проблемы с аналитикой AMP-писем

AMP позволяет взаимодействовать с контентом прямо внутри письма — например, нажимать кнопки, заполнять формы или листать карусели — без переходов на сайт. Такие действия не фиксируются обычными трекерами, поскольку внутри AMP нельзя использовать JavaScript, а компонент ```<amp-analytics>``` не поддерживается в AMP для email. В результате клики и события остаются «невидимыми» для систем аналитики вроде Google Analytics, «Яндекс.Метрики» и большинства ESP.

**Решение:**

Для реализации такой аналитики можно использовать сервисы, поддерживающие сбор событий с помощью трекинг-пикселей. Один из надёжных вариантов — [**Pixcraft**](https://pixcraft.io), который предоставляет API для трекинга AMP-событий через обычные GET-запросы. 

## Заключение

При вёрстке AMP-писем важно учитывать, как они ведут себя в разных почтовых клиентах. Даже у таких крупных платформ, как Gmail и Mail.ru, поведение отличается: где-то ломается карусель, где-то игнорируются состояния.

Обязательно тестируйте рассылки в Gmail (веб, Android, iOS), Mail.ru, Yahoo. Главное — не полагаться на «работает в одном месте — значит, везде». Потратьте время на тестирование, и интерактив в письмах будет работать стабильно, независимо от платформы.

Если работаете в Figma, [**загляните к нам**](https://www.figma.com/@pixcraft). Здесь мы выкладываем много полезных материалов и инструментов для дизайнеров.

В этом материале — восемь сложностей при верстке AMP-писем и практичные решения с примерами и кодом.

small_amp-emails.png

thumbnail_amp-emails.png

amp-emails.png

Топ-8 тонкостей при создании AMP-писем

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

В этом обзоре — что именно изменилось и как это использовать в ежедневной работе.

## Figma Make

<Img
img="/api/uploads/figma_update_make_17ac1606c2.png"
alt="Figma Make"
/>

Figma Make превращает текстовое описание или фрейм из Figma в интерактивный прототип с кодом. Можно начать с нуля: ввести, что нужно — например, «экран профиля с аватаркой, кнопкой и списком» — и получить заготовку, которую потом легко подправить. Или скопировать в Make уже созданный фрейм и попросить AI добавить логику: анимации, переходы, интерактивность. Получается не просто макет, а реально работающий код — можно просмотреть результат, отредактировать его и даже опубликовать как мини-приложение.

Инструмент пока в бете и работает нестабильно — иногда результат странный или слишком простой. Сейчас Figma Make — скорее способ быстро проверить идею или собрать прототип «на коленке», а не замена полноценной разработке. В сообществе относятся к нему с интересом, но без восторга: потенциал есть, но в текущем виде всё ещё сыровато. Тем не менее, сам подход — генерация прототипов по описанию — открывает возможности для ускорения работы, особенно на ранних этапах.

Кроме Make, в Figma добавили и другие AI-функции прямо в редактор. Теперь можно автозаполнить текст — Figma предложит варианты на основе контекста, чтобы не копировать «рыбу» вручную. Есть простое редактирование изображений с помощью ИИ — например, убрать фон или улучшить качество без внешних сервисов. А ещё всё это теперь работает без дополнительных настроек: просто выбираешь объект и запускаешь замену контента.

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

## Grid Auto Layout 

<Img
img="/api/uploads/figma_update_grid_42f5ab67e5.png"
alt="Figma Grid Auto Layout"
/>

В Auto Layout появился новый режим — Grid. Теперь можно строить не только вертикальные или горизонтальные блоки, а нормальные двумерные сетки: с колонками, строками, ячейками, растяжением и адаптивностью. Раньше для сложных макетов приходилось вкладывать Auto Layout друг в друга или использовать хаки — теперь всё это делается напрямую, без костылей.

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

Grid — это то, чего давно не хватало, чтобы макеты в Figma были ближе к реальной вёрстке. Всё, что дизайнер настраивает в сетке, теперь читается в Dev Mode как CSS Grid, с нужными параметрами. Разработчики сразу видят структуру и могут взять нужный код без перевода с «дизайнерского на разработческий». Это снижает количество вопросов и исправлений на этапе передачи макета — всем понятна логика и поведение интерфейса.

## Figma Draw 

<Img
img="/api/uploads/figma_update_draw_fc0128b6a6.png"
alt="Figma Draw"
/>

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

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

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

 - Текст по кривой, чтобы делать логотипы или декоративные надписи;
 - Заливки узором, вроде паттернов или текстур — удобно для фонов;
 - Динамические линии (Dynamic Stroke), где можно задать небольшое «дрожание» для живого, рисованного эффекта;
 - Эффекты шума и текстур — чтобы имитировать материал или «винтаж».

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

## Figma Sites 

<Img
img="/api/uploads/figma_update_sites_ecb64781ae.png"
alt="Figma Sites"
/>

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

Сайты поддерживают брейкпоинты — можно настроить отображение под мобильные устройства, планшет и десктоп. Есть базовые визуальные эффекты: параллакс, плавные анимации, marquee, hover-состояния. Всё редактируется прямо в интерфейсе, как в любом визуальном редакторе. В будущем обещают добавить поддержку кастомного кода — это пригодится, если нужна нестандартная логика или поведение, которого пока нет «в коробке».

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

Figma Sites — это не замена полноценной веб-разработке, а скорее решение для простых задач. Например, собрать лендинг для продукта, быстро сверстать страницу под кампанию или сделать презентационный сайт — без лишней возни с передачей макета. Команды маркетинга и контента могут работать быстрее, не отвлекая разработчиков.

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

Планы на развитие есть — например, [**обещают встроенную CMS**](https://www.figma.com/blog/config-2025-recap/). Если Figma будет развивать Sites дальше, он может занять устойчивое место среди no-code решений.

## Figma Buzz 

<Img
img="/api/uploads/figma_update_buzz_aaf9bd3e83.png"
alt="Figma Buzz"
/>

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

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

Главная фишка — массовая генерация контента по таблице. Можно загрузить список текстов и изображений (например, из Google Sheets), и Buzz сам соберёт все возможные комбинации. Это удобно для кампаний, где нужно много вариантов одного и того же баннера с разными товарами, акциями или языками. Получившийся контент сразу доступен для скачивания.

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

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

## Заключение

Figma постепенно превращается из просто редактора в удобную рабочую среду для всей команды — от дизайна до запуска продукта. Новые функции вроде Make, Sites, Draw и Buzz упрощают задачи, сокращают количество ручной работы и помогают быстрее двигаться от идеи к результату. Не всё идеально, но направление развития в целом правильное.

Если работаете в Figma, [**загляните к нам**](https://www.figma.com/@pixcraft). Здесь мы выкладываем много полезных материалов и инструментов для дизайнеров.

Обзор обновлений Figma 2025: новые инструменты для дизайна, прототипов, сайтов и контента — всё в одном месте. Что добавили и как с этим работать.

small_figma-updates-main.png

thumbnail_figma-updates-main.png

figma-updates-main.png

Обновления Figma на Config 2025: подробный обзор

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

Технология AMP для email открывает новые возможности, интегрируя динамические элементы и формы обратной связи прямо в письма. [**В предыдущих материалах**](https://pixcraft.io/ru/blog/ispolzovanie-komponenta-amp-list-v-email-rassylke) мы рассмотрели базовые принципы работы с AMP-list в email-рассылках. В этой же статье сосредоточимся на компоненте **AMP-form** — ключевом инструменте для создания форм внутри писем. Он позволяет собирать данные, подтверждать действия и выстраивать полноценное взаимодействие с пользователями в реальном времени. Рассмотрим, как эффективно использовать AMP-form в email-маркетинге, а также как интегрировать его с помощью Pixcraft.

## Что такое AMP-form

AMP-form — это компонент AMP, который позволяет создавать формы прямо внутри email без необходимости перехода на другую страницу. С его помощью можно добавить к письму:

- Регистрацию на мероприятие;
- Сбор отзывов;
- Подписку на рассылку;
- Опросы прямо в письме.

<Img
img="/api/uploads/amp_form_webinar_1_2d3b8c0338.png"
alt="Пример AMP в емейле"
src="Пример формы в письме, созданный с AMP-form"
/>

### Синтаксис AMP-form

Разметка простейшей формы на AMP выглядит так:

```HTML
<form method="post" action-xhr="https://example.com/submit">
<input type="text" name="name" placeholder="Ваше имя" required>
<input type="email" name="email" placeholder="Ваш email" required>
 	<button type="submit">Отправить</button>
 <div submit-success>
<template type="amp-mustache">
Спасибо за отправку, {{name}}!
</template>
  </div>
  <div submit-error>
Ошибка: попробуйте ещё раз.
  </div>
</form>
```
Основными атрибутами здесь являются:

**action-xhr**: указывает URL для отправки данных формы;
**div submit-success**: элемент, отображаемый при успешной отправке формы;
**div submit-error**: элемент, отображаемый при ошибке отправки формы;

Для динамической подстановки ответа используется [**amp-mustache**](https://amp.dev/documentation/components/email/amp-mustache).

## Примеры использования форм

### Регистрация на мероприятия и вебинары

С помощью AMP-form можно создать форму для регистрации, которая появится прямо в письме. Пользователь указывает имя и название организации, нажимает кнопку Зарегистрироваться, и его данные мгновенно отправляются на сервер организатора.

<Img
img="/api/uploads/amp_form_webinar_2_bc7aabca5e.png"
alt="AMP в письме"
/>

### Опросы и сбор обратной связи

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

<Img
img="/api/uploads/amp_form_cloud_3_9c665cdb6a.gif"
alt="AMP-письмо"
/>

### Бронирование встреч и консультаций

С помощью AMP-form клиент может выбрать дату и точное время встречи, а также оставить свои контакты прямо в письме.

<Img
img="/api/uploads/web_form_lawyer_4_a1af052a5c.png"
alt="Бронирование в AMP-письме"
/>

### Оформление заказов и заявок

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

<Img
img="/api/uploads/amp_form_order_5_4328e810a3.gif"
alt="Форма заказа в письме"
/>

### Расширение каналов коммуникации

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

<Img
img="/api/uploads/amp_form_phone_number_6_35773b5c67.png"
alt="Номер телефона в письме"
/>

### Сбор дополнительной информации

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

<Img
img="/api/uploads/amp_form_vet_7_c2f079b16a.png"
alt="Сбор дополнительной информации"
/>
## Реализация в Pixcraft

Быстро создать и настроить AMP-форму можно в [**визуальном конструкторе Pixcraft**](https://pixcraft.io/ru). Для этого на главной странице сервиса перейдите к разделу **AMP-компоненты** и  нажмите **Создать AMP-form**.

<Img
img="/api/uploads/amp_form_amp_components_8_a6b49995ff.png"
alt="Создание AMP-формы"
/>

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

Далее добавьте и расположите в нужном порядке **элементы** формы. Доступны следующие элементы:

**Input** — однострочное поле ввода текста;
**Checkbox** — галочки для выбора нескольких вариантов;
**Radio** — переключатели для выбора единственного варианта;
**Textarea** — многострочное поле ввода текста;
**Select** – выпадающий список, в котором можно выбрать единственный вариант из предложенных;

Также можно добавить сообщение об успешной отправке данных в форме.

Для текстовых полей можно настроить валидацию:

**Not Validate** — не проверять значение;
**Required** — поле обязательно для заполнения;
**Equal to value** — содержимое поля точно соответствует значению (необходимо указать в появившемся поле);
**Phone** — проверка количества числовых символов. Необходимое количество следует указать в дополнительном поле валидации;
**Email** — введенное значение должно соответствовать формату имейл-адреса.

<Img
img="/api/uploads/amp_form_element_label_9_baa17de081.png"
alt="Element label"
/>

По умолчанию данные из формы сохраняются в Pixcraft, но если вам нужно передать их во внешний сервис или базу, можете добавить ссылку на **Webhook**. Для этого в соответствующем поле укажите URL для перенаправления и тогда Pixcraft начнет отправлять **POST-запросы** по заданному адресу. Запрос содержит следующие параметры:

| Параметр   | Тип                                           | Пример                             | Описание                                                                                      |
|-------------|------------------------------------------------|-------------------------------------|--------------------------------------------------------------------------------------------------|
| componentId | Number                                         | 123                                 | ID компонента в Pixcraft.                                                                         |
| campaignId  | Number                                         | 124                                 | ID кампании, к которой принадлежит компонент. Может оставаться пустым, если компонент не привязан к кампании.                         |
| email       | String                                         | test@test.com                       | Емейл-адрес подписчика, отправившего форму.                                                       |
| date        | UNIX date                                      | 1648553051                          | Время, когда произошло событие.                                                                   |
| owner       | Number                                         | 125                                 | ID владельца формы в Pixcraft.                                                                    |
| data        | Content-Type: application/x-www-form-urlencoded | {"field0": "testInput", "field1": "radio1", "field2": "checkbox2", "success": "success"} | Данные формы.                                                        |

<Note>Подробнее о создании формы и настройке вебхука можно прочесть в [**документации Pixcraft**](https://docs.pixcraft.io/ru/amp/components/form.html).</Note>


Форма готова. Скопируйте сгенерированный код и вставьте его в шаблон письма.

<Img
img="/api/uploads/amp_form_podklucheniye_10_cafd79d172.png"
alt="Форма АМП"
/>

После сохранения форма будет доступна в разделе **Компоненты.**

<Img
img="/api/uploads/amp_form_my_space_11_da72f141cb.png"
alt="Форма АМП"
/>

Полученные через формы данные будут храниться в Pixcraft. В разделе **Статистика** вы найдёте информацию обо всех взаимодействиях с формой.

<Img
img="/api/uploads/amp_form_events_12_36a84288bc.png"
alt="Events: статистика AMP"
/>

Эту информацию можно экспортировать в виде **CSV-таблицы** или выгрузить в **Google Таблицы**. 

### Интеграция с Albato

Данные из форм можно автоматически передавать во внешние сервисы с помощью вебхука, а используя сервисы-посредники, вроде, **Albato** или **zapier** вы можете настроить любую интеграцию без программирования. В Albato перейдите в раздел **Мои связки**. Создайте новую связку.

<Img
img="/api/uploads/amp_form_moi_svyazki_13_6eed0cfa23.png"
alt="Мои связки"
/>

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

<Img
img="/api/uploads/amp_form_trigger_13_682d5fc608.png"
alt="Настройка триггера"
/>

Для подключения соединения нужно нажать кнопку **+ Добавить подключение** и назвать его. После нажатия на кнопку **Далее** перед вами появится адрес вебхука.

<Img
img="/api/uploads/amp_form_webhook_14_aeaf54e4bf.png"
alt="Генерация вебхука"
/>

Скопируйте адрес, укажите его в поле Webhook в настройках формы в Pixcraft и сохраните изменения.

<Img
img="/api/uploads/amp_form_enter0webhook_15_e88b10e923.png"
alt="Вебхук"
/>






Вернитесь в Albato и нажмите **Ожидать вебхук**. Теперь необходимо отправить форму, чтобы отработал запрос. Для этого вставьте код формы в ваше письмо или воспользуйтесь [**плейграундом от Google**](https://amp.gmail.dev/playground/).
После отправки формы окно в Albato изменится, оно отобразит поля полученного вебхука.


<Img
img="/api/uploads/amp_form_webhook_catcher_16_2069c05d6e.png"
alt="Webhook catcher"
/>


Далее необходимо решить, что делать с полученными данными: отправить данные в ESP, CDP, CRM-систему и т.д. — вы можете выбрать любую интеграцию из списка. Например, можно отправить данные в CDP Altcraft: для этого при настройке действия после старта связки выберите Altcraft, укажите нужное действие и подключите ваш аккаунт в сервисе.



<Img
img="/api/uploads/amp_form_deistvie_17_0e4032d1bc.png"
alt="Запуск автоматизации"
/>

Для завершения и запуска автоматизации нажмите **Запустить**.

## Заключение

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

А если вы создаёте формы в [**визуальном конструкторе Pixcraft**](https://pixcraft.io/ru/builder), вам не придется разбираться в особенностях синтаксиса AMP-form. Вместо этого вы сможете использовать это время для разработки наиболее креативных маркетинговых кампаний для вашей компании.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там делимся полезными материалами, лайфхаками и идеями для работы.

Узнайте, как использовать AMP-form в email-маркетинге для создания интерактивных писем с формами, обратной связью и сбором данных прямо в почтовом клиенте.


Блог