HTML-поле формы

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

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

Что можно делать с помощью HTML-поля

• создавать свои текстовые поля, селекты, маски, дата-пикеры, теги и другие
• использовать нативные HTML-атрибуты (name, type, required, disabled) и системные атрибуты flexbe (data-mask, data-check)
• подключать JavaScript и управлять отправкой формы
• использовать React-компоненты для сложных UI
• добавлять в заявку невидимые поля

Как работает HTML-поле

HTML-поле – это пользовательский код, выполняемый внутри формы, который позволяет создавать собственные поля и интерфейсы: от простых HTML-элементов до сложных React-компонентов с логикой и состоянием.

Для добавления HTML-поля добавьте на страницу элемент «Форма». Затем откройте настройки формы и нажмите на кнопку Добавить поле - в разделе Дополнительные элементы выберите HTML-поле.

Для перехода в редактор нажмите «Настроить». Редактор кода содержит вкладки:

• HTML - index.html
• CSS - style.css
• JS - main.js
  

  

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

В примере ниже:

• index.tsx - точка монтирования компонента
• App.tsx - основной компонент
• App.module.css или LESS
• App.data.json
• SVG (опционально)
  

  

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

Работа с JS API формы

Вы можете взаимодействовать с формой с помощью объекта formApi, который доступен на вкладке JS / TSX вашего HTML-поля.

Этот API позволяет:

• получать доступ к DOM-нодам формы и её полей
• подписываться на события отправки и ошибок
• добавлять дополнительные данные в заявку
• управлять кнопкой отправки
• очищать форму или её ошибки

Свойства formApi

Методы formApi

Как работает метод setFields()

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

Код:

formApi.setFields([
  { name: 'Internal Tag', value: 'beta-tester', type: 'text' },
  { name: 'Pet Age', value: '13', type: 'number' }
]);

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

Формат объекта Field

Код:

type Field = {
  name: string;  // обязательное имя поля (отображается в заявке)
  value: string; // значение, которое попадёт в заявку
  type?: string; // (опционально) тип поля (идентичен описанному в разделе «Атрибуты type и data-type» в этой статье)
};

Как работает метод validateForm()

Метод запускает принудительную проверку всех базовых полей формы, добавленных пользователем (т.е. стандартных полей элемента «Форма»).
Полезно, если вы предотвращаете отправку формы в событии submit и хотите провалидировать (отобразить ошибки) стандартные поля до того, как решите отправлять форму.

Метод возвращает:

• true - если ошибок нет, форма валидна
• false - есть ошибки в базовых полях формы

Типичный сценарий использования

Код:

formApi.on('submit', (e) => {
  const baseFieldsValid = formApi.validateForm(); // валидация базовых полей
  const customFieldsValid = validateCustomFieldsSomehow(); // валидация HTML-полей

  if (!baseFieldsValid || !customFieldsValid) {
    // есть ошибки – останавливаем отправку формы
    return false; // или e.preventDefault()
  }

  // всё ок — форма продолжит стандартную отправку
});

Примечание

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

События формы

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

Перед отправкой формы

Код:

formApi.on('submit', (e) => {
  // Ваш код до отправки
  // return false или e.preventDefault() отменяют отправку
});

Используется для:

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

После успешной отправки формы

Код:

formApi.on('submitted', (e, result) => {
  // Ваш код после отправки
  // return false или e.preventDefault() отменяют отправку
});

Можно показывать сообщения, сбрасывать состояние, очищать UI. Если в функции вернуть false или вызвать e.preventDefault(), то можно полностью заменить стандартное поведение платформы.
Таким образом после отправки формы можно предотвратить:

• очистку всех полей формы
• выполнение действия, выбранного в интерфейсе (например: «Открыть всплывающее окно», «Перейти по ссылке», «Позвонить»)
• любые другие встроенные эффекты

При ошибке отправки формы

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

Код:

formApi.on('requestError', (error) => {
  // Ошибка сети, отсутствующие товары и т.п.
});

Атрибуты полей ввода

HTML-поле поддерживает встроенный функционал форм Flexbe: валидацию полей, применение масок ввода и работу служебных атрибутов.
Вы можете управлять поведением поля с помощью атрибутов required, data-check, data-mask, type, data-type и др., и форма будет корректно применять эти атрибуты при вводе значений и их отправке.

Атрибут name

name — это текст, который попадёт в заявку в качестве названия поля.

Пример

Код:

<input type="text" name="Pet Name" />

Если посетитель на сайте в форме впишет в поле ввода значение Barsik, то в заявку попадёт поле:

Pet Name: Barsik

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

Атрибуты type и data-type

type влияет на нативное поведение браузера
data-type влияет на то, как поле будет выглядеть в разделе «Заявки», интеграциях и письмах клиентам

Типы полностью совпадают с поддерживаемыми типами нативных и HTML-полей:

• text — обычная текстовая строка
• email — email-адрес
• tel — номер телефона (в заявке отображается с иконкой «телефонной трубочки»)
• number — числовые значения
• date — дата
• datetime — дата и время. Для этого типа используйте type="datetime-local", а data-type="datetime" для отображения в заявке”. Валидатор не применяется, так как в системе отдельный календарный формат.

Если data-type не указан, по умолчанию используется type.
Если type не указан, по умолчанию используется text.

Примеры:

Текстовое поле, которое в заявке считается именем:

<input type="text" data-type="name" name="Как вас зовут?" />

В форме это текстовое поле с кастомной валидацией цифр, но в заявке это номер:

<input type="text" data-type="number" name="Ваш рост" />

Нестандартное поле контактов. В форме это текстовое поле, но в заявке это контакт:

<input type="text" data-type="contacts" name="Ваши контакты" />

С полным списком стандартных типов для атрибута type, поддерживаемых в html-полях формы можете ознакомиться здесь.

Атрибут required

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

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

Пример:

<input 
  type="text"
  name="Ваше имя"
  required
/>

<div class="error">
  <span class="error-text"></span>
</div>

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

Пример:

<input 
  type="text"
  name="Ваше имя"
  required
/>

<div class="error">
  Вы можете вывести здесь свой уникальный текст ошибки
</div>

Атрибут disabled

Если поле помечено как disabled, то оно не будет отправлено (стандартное поведение HTML форм)

Атрибут data-check

data-check включает встроенные валидации форм Flexbe.
В зависимости от указанного значения, система автоматически проверяет корректность введённых данных.

Доступные типы валидаций

• email - базовая проверка email-адреса
• phone - проверяет, что введены только цифры и выполнена минимальная длина
• file - проверяет обязательность файла и завершение его загрузки
• date - проверяет корректность выбранной даты через подключённый календарь
• datetime - проверяет корректность выбранных даты и времени через календарь

Примеры:

<input 
  class="form-field-text__input"
  type="email"
  data-check="email"
  placeholder="example@gmail.com"
  name="Email адрес"
/>

<input 
  class="form-field-text__input"
  type="text"
  data-check="phone"
  placeholder="+7 911 123 4567"
  name="Телефон"
/>

<input
  type="text"
  data-check="date"
  name="Дата визита"
/>

<input
  type="file"
  data-check="file"
  name="Документ"
/>

Атрибут data-mask

Позволяет добавлять простые маски ввода:

* — любой символ  
# — цифра  
@ — буква

Пример:

<input
  class="form-field-text__input"
  type="text"
  name="Номер автомобиля"
  data-mask="@###@@ ###"
/>

Рекомендуемая HTML-структура поля

Использование системных классов позволяет HTML-полям наследовать стили, заданные на вкладке «Стиль» настроек формы.

Пример использования системных классов:

<div class="form-field-text">
  <div class="form-field-text__wrap">
    <div class="form-field-title">Enter your SSN</div>
    <div class="form-field-input__wrap">
      <input 
        class="form-field-text__input" 
        type="text"
        name="User data"
        data-mask="###-##-####"
      />
    </div>
  </div>

  <div class="error">
    <span class="error-text"></span>
  </div>
</div>

Пример простого HTML-поля

Для поля в примере ниже задана проверка вводимого значения на соответствие типу email адреса. Поле наследует стандартные стили полей формы.

А так будет выглядеть код

Код

<div class="form-field-text">
  <div class="form-field-text__wrap">
    <div class="form-field-title">Email для уведомлений</div>

    <div class="form-field-input__wrap">
      <input
        class="form-field-text__input"
        type="email"
        name="Email для уведомлений"
        data-check="email"
        required
        placeholder="example@gmail.com"
      />
    </div>
  </div>

  <div class="error">
    <span class="error-text"></span>
  </div>
</div>

Пример HTML-поля на React

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

Так заявка будет отображаться в разделе «Заявки».

Значение выбранных тегов собирается в строку и передаётся в заявку через formApi.setFields().

index.tsx

import { createRoot } from 'react-dom/client';
import App from './App';

declare const formApi: any;

createRoot(formApi.field).render(<App />);

App.tsx

import React, { useState, useEffect } from 'react';
import styles from './App.module.css';

declare const formApi: any;

const ALL_TAGS = ['Собаки', 'Кошки', 'Птицы', 'Грызуны'];

export default function App() {
  const [selected, setSelected] = useState<string[]>([]);

  // Передаём поле в заявку
  useEffect(() => {
    formApi.setFields([
      {
        name: 'Интересы клиента',
        value: selected.join(', '),
        type: 'text'
      }
    ]);
  }, [selected]);

  const toggle = (tag: string) => {
    setSelected((prev) =>
      prev.includes(tag)
        ? prev.filter((x) => x !== tag)
        : [...prev, tag]
    );
  };

  return (
    <div className={styles.wrapper}>
      <div className={styles.title}>Выберите интересы:</div>

      <div className={styles.tags}>
        {ALL_TAGS.map((tag) => (
          <button
            key={tag}
            type="button"
            className={
              selected.includes(tag)
                ? styles.tagSelected
                : styles.tag
            }
            onClick={() => toggle(tag)}
          >
            {tag}
          </button>
        ))}
      </div>
    </div>
  );
}

App.module.css

.wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.title {
  font-size: 14px;
  color: #444;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid #ccc;
  background: #fff;
  color: #000;
}

.tagSelected {
  background: #333;
  color: #fff;
  border-color: #333;
}

Написать код HTML-поля через ИИ

Не умеете писать код? Это не проблема!
Искусственный интелект отлично справляется с созданием любых HTML-полей.

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

Скопировать инструкцию для нейросети

Пошаговый алгоритм

• 1 Нажмите кнопку «Скопировать инструкцию для нейросети»
• 2 Вставьте скопированный текст в любую нейросеть
• 3 Допишите к нему простое описание: какое поле вы хотите получить и как оно должно работать

Пример

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

• 4 Получите сгенерированный код поля от нейросети
• 5 Вставьте код в редактор HTML-поля на Flexbe
• Наслаждайтесь!

Примечание

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

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