formhunt.Подключить форму
Подключение по стеку

Форма в Next.js с access_key

Готовый компонент Next.js: обычный POST на общий endpoint с access_key. Подключение без Server Action и лишнего клиентского кода.

С чего начать

Скопируйте access_key в кабинете, вставьте его в блок ниже и возьмите код для своего стека. Адрес отправки уже указан.

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

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

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

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

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

Промпт

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

HTML

contact.html
<form action="https://api.formhunt.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://api.formhunt.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://api.formhunt.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://api.formhunt.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://api.formhunt.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://api.formhunt.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>

В Next.js обычный form может отправлять POST на внешний адрес Formhunt. Для такого подключения не нужны Server Action, Route Handler или почтовый SDK.

Добавьте компонент на страницу

Сохраните пример в компоненте проекта и импортируйте его в страницу контактов. В action указан общий адрес приёма, а в hidden input — ваш access_key. Нативная разметка не требует директивы use client.

Сохраните границу сервера

Публичный access_key можно передавать в браузер. Пароли, session и management token в поля формы не добавляются. Не создавайте серверный proxy, если форма отправляется прямо на общий endpoint.

Когда нужен клиентский обработчик

Если хотите оставить посетителя на той же странице, используйте клиентский компонент и fetch. Сначала проверьте поля, затем отправьте FormData с access_key и обработайте HTTP ответ. Обычный POST и fetch должны быть альтернативами, а не двумя параллельными отправками.

Источники и дата проверки

Редакционная сверка: 2026-10-27. Учитывайте версию инструментов в своём проекте.

Обновлено

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

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

Ваш стек

Форма обратной связи на React

Вставить компонент React и подставить access_key.

Руководство

Ошибка CORS у формы: как разобраться

Найти ошибку на уровне запроса и разрешений origin.

Руководство

Повторная отправка: кнопка и идемпотентность

Спланировать безопасную повторную попытку.

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

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

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

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