Подключить форму
Начало работы

Документация Субмито

Три шага: получите access_key, скопируйте код и добавьте форму на сайт. Общий endpoint для HTML, React, Next.js, Astro, Vue и Svelte.

С чего начать

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

Открыть код подключения
Готовое подключение

Вставьте ключ.
Скопируйте код.

Все формы отправляются методом POST на один адрес. Поле access_key указывает, в какую форму попадёт заявка. Остальные поля остаются вашими.

Взять ключ в кабинете

Замените YOUR_ACCESS_KEY ключом своей формы. Для всех вариантов используется один адрес отправки.

Промпт

Задание вашему ИИ агенту
Подключи форму на моём сайте к Субмито.
Отправляй поля методом POST на https://app.submito.ru/v1/submit.
Добавь скрытое поле access_key со значением YOUR_ACCESS_KEY.
Поля формы: email (обязательно), message (обязательно).
Сохрани дизайн, компоненты и подписи полей.
Используй обычную HTML отправку без SDK и своей базы данных.
Проверь обязательные поля, email и работу на мобильном экране.

HTML

contact.html
<form action="https://app.submito.ru/v1/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <label for="email">Ваша почта</label>
  <input id="email" type="email" name="email" required>
  <label for="message">Сообщение</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">Отправить</button>
</form>

React

ContactForm.tsx
export default function ContactForm() {
  return (
    <form action="https://app.submito.ru/v1/submit" method="POST">
      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
      <label htmlFor="email">Ваша почта</label>
      <input id="email" type="email" name="email" required />
      <label htmlFor="message">Сообщение</label>
      <textarea id="message" name="message" required />
      <button type="submit">Отправить</button>
    </form>
  );
}

Next.js

app/components/ContactForm.tsx
export default function ContactForm() {
  return (
    <form action="https://app.submito.ru/v1/submit" method="POST">
      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
      <label htmlFor="email">Ваша почта</label>
      <input id="email" type="email" name="email" required />
      <label htmlFor="message">Сообщение</label>
      <textarea id="message" name="message" required />
      <button type="submit">Отправить</button>
    </form>
  );
}

Astro

src/components/ContactForm.astro
<form action="https://app.submito.ru/v1/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <label for="email">Ваша почта</label>
  <input id="email" type="email" name="email" required>
  <label for="message">Сообщение</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">Отправить</button>
</form>

Vue

ContactForm.vue
<template>
  <form action="https://app.submito.ru/v1/submit" method="POST">
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
    <label for="email">Ваша почта</label>
    <input id="email" type="email" name="email" required>
    <label for="message">Сообщение</label>
    <textarea id="message" name="message" required></textarea>
    <button type="submit">Отправить</button>
  </form>
</template>

Svelte

ContactForm.svelte
<form action="https://app.submito.ru/v1/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <label for="email">Ваша почта</label>
  <input id="email" type="email" name="email" required>
  <label for="message">Сообщение</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">Отправить</button>
</form>

JavaScript

submit.js
// Передайте поля формы и сохраните idempotencyKey для повтора тех же данных.
// Для новой заявки создайте новый crypto.randomUUID().
export async function submitForm(payload, idempotencyKey) {
  const response = await fetch("https://app.submito.ru/v1/submit", {
    method: "POST",
    credentials: "omit",
    headers: { "Content-Type": "application/json", "Idempotency-Key": idempotencyKey },
    body: JSON.stringify({ ...payload, access_key: "YOUR_ACCESS_KEY" })
  });
  const result = await response.json();
  if (!response.ok || result.success !== true || result.status !== "accepted" || !result.submission_id) {
    throw new Error("Сохранение не подтверждено. Сохраните ввод и повторите с тем же ключом идемпотентности.");
  }
  // Заявка сохранена. Доставка уведомлений проверяется отдельно.
  return result;
}
// Поля payload: email (обязательно), message (обязательно)

cURL

Терминал / HTTP клиент
# Сохраните один Idempotency-Key для повторов этой отправки.
# Для новой заявки используйте новый UUID.
curl 'https://app.submito.ru/v1/submit' \
  -H 'Accept: application/json' \
  -H 'Idempotency-Key: REPLACE_WITH_UUID' \
  --data-urlencode 'access_key=YOUR_ACCESS_KEY' \
  --data-urlencode 'email=synthetic@example.test' \
  --data-urlencode 'message=Пример значения'

1. Скопируйте access_key

Откройте личный кабинет и скопируйте публичный ключ своей формы. Он определяет, в какую форму попадёт заявка. Для каждой формы используется свой ключ, адрес отправки общий.

2. Вставьте готовый код

Выберите вкладку для вашего стека в блоке выше. Вставьте ключ и скопируйте код. Если интерфейс уже есть, достаточно сохранить его оформление, указать action и добавить скрытый input с name=“access_key”.

Предпочитаете работать с ИИ? Выберите вкладку «Промпт» и вставьте задание в чат проекта. В разделе агентов есть инструкции для Cursor, Claude Code, Codex и Lovable.

3. Проверьте отправку

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

Пример с сообщением о результате

Откройте быстрое подключение HTML, React и Astro: там есть обработка ошибок, повтор с Idempotency-Key и безопасная тестовая отправка. llms.txt содержит краткий контракт для coding агента.

Если нужен свой обработчик

Для отправки без перехода страницы откройте инструкцию FormData и fetch. Она использует тот же адрес и поле access_key. Для проверки результата используйте чеклист формы после ИИ.

Обновлено

Следующий шаг

Продолжите подключение

Руководство

Как устроена отправка веб-формы

Различать валидацию, сохранение заявки и уведомление.

Каталог

Подключите форму с вашим ИИ агентом

Выбрать агента и скопировать промпт подключения.

Каталог

Формы для вашего frontend-стека

Найти синтаксис и границу клиентского кода.

Начните с формы

Ваш сайт уже есть.
Подключим форму.

Откройте личный кабинет, затем передайте агенту промпт подключения.

Подключить форму