Привет. Я тут покопался в свежих доках n8n и в живых кейсах, и вывод простой: в Form Trigger нормально проходят многие базовые HTML-теги, но форму чаще ломают не они, а лишние атрибуты и попытки запихнуть в Custom HTML собственные поля ввода. Если коротко, живут <a>, <b>, <br>, <div>, <img>, <table>, заголовки, списки, видео и ещё несколько безопасных тегов. А вот <script>, <style>, <input>, <form>, <button>, а также style, class, id и почти любые «хитрые» атрибуты санитайзер срезает. Ниже покажу, что реально проходит, где ломается кастомная вёрстка и как сделать форму аккуратной, а не капризной.
Заодно оставлю внутренние маршруты по теме: защиту вебхуков, авто-КП после формы, контроль ошибок в n8n и готовые шаблоны n8n.
- Содержание
- Какие HTML-теги в n8n Form Trigger проходят санитизацию
- Почему кастомная вёрстка ломает форму чаще, чем сами теги
- Какие атрибуты живут после санитизации
- Как кастомизировать форму и не развалить UX
- Рабочие примеры для Form Description и Custom HTML
- Когда лучше вынести кастомную страницу в Form Ending
- Чек-лист перед публикацией
Содержание
- Какие HTML-теги в n8n Form Trigger проходят санитизацию
- Почему кастомная вёрстка ломает форму чаще, чем сами теги
- Какие атрибуты живут после санитизации
- Как кастомизировать форму и не развалить UX
- Рабочие примеры для Form Description и Custom HTML
- Когда лучше вынести кастомную страницу в Form Ending
- Чек-лист перед публикацией
Какие HTML-теги в n8n Form Trigger проходят санитизацию
Раньше многие думали, что в n8n формам позволено почти ничего. Сейчас список уже приличный. Если тебе нужна нормальная подача текста, подсказки, картинки или компактная таблица, этого чаще всего хватает.
Что обычно проходит:
- Текст и акценты:
<b>,<em>,<i>,<u>,<sub>,<sup>,<code>,<pre>. - Структура:
<div>,<p>,<span>,<br>,<h1>–<h6>. - Списки:
<ul>,<ol>,<li>. - Ссылки и медиа:
<a>,<img>,<iframe>,<video>,<source>. - Таблицы:
<table>,<thead>,<tbody>,<tfoot>,<tr>,<th>,<td>.
То есть запросы вроде n8n form trigger allowed tags, custom html n8n form или n8n form description html уже не упираются в два абзаца текста. Можно собрать шапку формы, инструкцию, список шагов, FAQ, картинку или компактную таблицу.
Что срежется: <script>, <style>, <input>, <form>, <button> и другие элементы, которые могут влезть в логику самой формы или повести себя опасно. Так что строить внутри Form Trigger «свою отдельную форму» — идея мимо кассы.
| Что вставляешь | Что обычно выходит | Вердикт |
|---|---|---|
| Абзацы, заголовки, списки | Рендерятся стабильно | Нормально |
| Ссылка, картинка, таблица | Работают, если атрибуты допустимы | Тоже годится |
| Свой input, form, button | Удаляются | Не использовать |
| HTML с inline-стилями и классами | Теги могут остаться, оформление исчезает | Макет плывёт |
Почему кастомная вёрстка ломает форму чаще, чем сами теги
Самая частая ошибка — видеть поле Custom HTML как маленький конструктор лендинга. Человек кидает туда кусок привычной вёрстки, а потом удивляется, почему центрирование пропало, отступы стали кривыми, таблица съехала влево, а кнопка исчезла.
Обычно проблема одна из этих:
- Inline-стили. Вроде
<div style="text-align:center;margin-bottom:20px">. После санитизации от него остаётся просто<div>. - Ставка на class и id. В шаблоне всё красиво, а в итоговом DOM этих атрибутов уже нет.
- Попытка вставить свои поля ввода.
<input>,<button>, второй<form>— всё это конфликтует со штатной логикой n8n. - Путаница между Custom HTML и Custom Form Styling. Первый блок отвечает за контент, второй — за внешний вид формы через CSS.
Отсюда и частый вопрос n8n form trigger style attribute: люди хотят подкрасить или выровнять HTML прямо в разметке, а n8n режет почти всё лишнее. Моё правило простое: контент держим в HTML, вид держим в Custom Form Styling.
Какие атрибуты живут после санитизации
Тег может пройти, но вместе с ним останется только узкий набор атрибутов. Поэтому HTML формально жив, а макет уже не тот.
Что разрешено точечно:
- Для ссылок:
href,target,rel. - Для картинок:
src,alt,width,height. - Для видео:
controls,autoplay,loop,muted,poster,width,height. - Для iframe:
src,width,height,frameborder,allow,allowfullscreen,referrerpolicy. - Для ячеек таблиц:
colspan,rowspan,scope,headers.
Что лучше сразу не закладывать: style, class, id, data-*, обработчики событий и любые экзотические URL-схемы. Плюс ссылки и медиа лучше ставить на обычные http:// или https:// адреса.
| Элемент | Оставить можно | Чаще всего слетает |
|---|---|---|
| <a> | href, target, rel | class, style |
| <img> | src, alt, width, height | class, style, лишние параметры |
| <div>, <p>, <span> | сам тег и текст внутри | почти любые атрибуты |
| <iframe> | только ограниченный набор | кастомное оформление |
Как кастомизировать форму и не развалить UX
Я обычно собираю форму в три слоя.
- Слой 1 — штатные поля n8n. Всё, что человек вводит: текст, выбор, файлы, textarea, hidden field.
- Слой 2 — Custom HTML. Подсказки, пояснения, изображения, FAQ, таблицы, разделители.
- Слой 3 — Custom Form Styling. Типографика, отступы, ширины, выравнивание, цвета, рамки и общая визуальная сетка.
Что у меня работает стабильно:
- в Form Description — короткий заход и переносы через
<br>или отдельные абзацы; - в Custom HTML — только read-only блоки;
- весь визуал — через Custom Form Styling;
- никаких своих кнопок отправки и самодельных полей ввода.
Когда понимаешь, что CSS живёт в отдельной опции, половина проблем с кастомной вёрсткой просто исчезает.
Рабочие примеры для Form Description и Custom HTML
Спокойный вариант для Form Description:
<p>Оставь заявку, и я соберу сценарий под твою задачу.</p>
<p>Ниже три шага: описание процесса, контакты, подтверждение.</p>
<p><b>Среднее время заполнения:</b> 2–3 минуты.</p>Рабочий блок для Custom HTML:
<div>
<h3>Что подготовить заранее</h3>
<ul>
<li>ссылку на текущий процесс</li>
<li>пример входящих данных</li>
<li>куда отправлять результат</li>
</ul>
</div>Такой фрагмент обычно проходит спокойно. А вот карточки, сетки, сложные колонки и декоративные блоки с кучей классов уже лучше собирать не в самом HTML, а оформлять стилями формы.
Если нужна картинка, ставь её просто:
<p><img src="https://example.com/form-preview.jpg" alt="Пример блока с подсказкой" width="960" height="540"></p>Размеры задать можно. Выравнивание и внешний вид — уже задача CSS.
Когда лучше вынести кастомную страницу в Form Ending
Если задача — не украшать саму форму, а отдать после отправки отдельную итоговую страницу, используй Form Ending. Там удобнее показывать экран «спасибо», результат расчёта, дальнейшие шаги или более свободную HTML-разметку.
Особенно это полезно, когда форма запускает автоматизацию дальше: запись в таблицу, уведомление менеджера, формирование документа. Для таких связок полезно посмотреть обработку заявок в Google Sheets через n8n и ежедневные сводки по заказам.
Чек-лист перед публикацией
- 1. Все поля ввода созданы штатными элементами n8n.
- 2. В Custom HTML нет style, class, id и обработчиков событий.
- 3. Переносы строк сделаны через <br> или отдельные абзацы.
- 4. Ссылки и медиа проверены на Production URL.
- 5. Весь визуал вынесен в Custom Form Styling.
- 6. Финальный экран вынесен в Form Ending, если там нужна отдельная подача.
Итог: n8n Form Trigger уже даёт нормальную базу для кастомной подачи. Используй разрешённые теги для структуры и контента, держи интерактивность на штатных элементах, а оформление переноси в CSS формы. Тогда и запросы вроде какие HTML теги проходят в n8n form trigger, и проблема сломал custom html в n8n form закрываются вполне практично.