Подключите форму без переделки сайта

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

Вариант 1. Готовая форма Ontik

1. Создайте проект.
2. Откройте «API и интеграция» → «Публичная форма».
3. Укажите заголовок события, например «Новая заявка».
4. Добавьте поля: name, email, phone, message.
5. Скопируйте ссылку вида https://app.ontik.ru/f/ВАШ_КОД.

Ссылка открывает готовую форму с серверной проверкой и создаёт событие после отправки. Поля можно назвать по-русски; подписи задаются отдельно, например phone = Телефон. Отправка раньше трёх секунд после открытия не проходит антиспам-проверку.

Вариант 2. Своя HTML-форма + сниппет

Добавьте на свою страницу форму с атрибутами подключения и заголовком события:

<form data-ontik-form data-ontik-event="Запрос консультации">
  <input name="name" placeholder="Ваше имя">
  <input name="email" type="email" placeholder="Email">
  <textarea name="message" placeholder="Сообщение"></textarea>
  <button type="submit">Отправить</button>
  <p data-ontik-status></p>
</form>

1. Скопируйте JavaScript-сниппет из кабинета проекта.
2. Вставьте его перед закрывающим </body>.
3. Убедитесь, что сниппет подключён на той же странице, где находится форма.
4. Отправьте тестовую форму и проверьте ленту.

Несколько форм на одной странице

Все формы на одной странице должны отправляться в один выбранный проект. У каждой формы может быть свой data-ontik-event; например, «Запрос цены» и «Заказать звонок». Для разных проектов используйте разные страницы или прямой REST API.

Что проверить

В браузере не должно быть ошибок CORS. Если запрос блокируется, добавьте домен страницы в разрешённые Origins проекта. В событии должны появиться ключи из атрибутов name, а не подписи, которые видит посетитель.

Для разработчика: собственный обработчик

Сначала вставьте скопированный из кабинета сниппет. Затем выполните свой код после него. Сниппет предоставляет Ontik.send(meta, eventName), который возвращает Promise с объектом Response.

Если форму обрабатывает ваш JS, не добавляйте к ней data-ontik-form: иначе будут работать два обработчика отправки.

<form id="custom-form">
  <input name="email" type="email" required placeholder="Email">
  <button>Отправить</button>
  <p id="custom-result" role="status"></p>
</form>
<!-- Здесь вставьте сниппет проекта из кабинета -->
<script>
document.querySelector('#custom-form').addEventListener('submit', async e => {
  e.preventDefault();
  const result = document.querySelector('#custom-result');
  result.textContent = 'Отправка…';
  try {
    if (!window.Ontik) throw new Error('Вставьте сниппет проекта');
    const meta = Object.fromEntries(new FormData(e.currentTarget).entries());
    const response = await Ontik.send(meta, 'Запрос консультации');
    if (!response.ok) throw new Error(await response.text());
    result.textContent = 'Сообщение принято';
  } catch (error) {
    result.textContent = 'Ошибка: ' + error.message;
  }
});
</script>

Ограничения сбора полей

Передаются успешные поля формы с атрибутом name. Отключённые поля и невыбранные чекбоксы не входят в FormData. При повторяющихся именах базовый сниппет сохраняет последнее значение. Файлы, массивы и вложенные объекты текущий контракт meta не поддерживает — преобразуйте выбор в строку или число собственным JS.