Руководство

Контактная форма Astro (без бэкенда)

Astro по умолчанию рендерит в статический HTML, что значит: контактная форма Astro - это просто обычная HTML-форма с правильным атрибутом action. Вам не нужен серверный эндпоинт или интеграция Astro - вставьте сниппет в .astro-страницу и готово.

Сниппет

contact.Astro

---
// src/pages/contact.astro
---

<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
  <label>
    Email
    <input type="email" name="email" required />
  </label>

  <label>
    Message
    <textarea name="message" required></textarea>
  </label>

  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden />
  <input type="hidden" name="_redirect" value="https://example.com/thanks" />

  <button type="submit">Send</button>
</form>

Как это работает

Поскольку Astro по умолчанию отдаёт статический HTML, на клиенте ничего подключать не нужно. action формы POST'ит напрямую в formhook.app/f/YOUR_API_KEY, где YOUR_API_KEY берётся из настроек формы в панели Formhook. Поле _gotcha - honeypot: боты его заполняют, люди не видят, и всё с содержимым там тихо отбрасывается. Поле _redirect отправляет пользователей на страницу благодарности после успешного POST'а, и URL валидируется против вашего списка разрешённых origins.

Страница благодарности после отправки

Статическая форма Astro при отправке уходит со страницы, поэтому создайте страницу вроде src/pages/thanks.astro и направьте на неё скрытое поле _redirect. Используйте полный URL, например https://example.com/thanks. Значение должно быть абсолютным URL, источник которого есть в разрешённых источниках формы; иначе Formhook его игнорирует, и посетитель видит JSON-ответ. Если в astro.config.mjs задан site, значение можно собрать так: new URL("/thanks", Astro.site).

Показать результат, не уходя со страницы

Чтобы оставить посетителя на странице, добавьте в компонент небольшой <script>, который перехватывает событие submit, отправляет поля через fetch в виде JSON и выводит сообщение в элемент статуса. Astro отдаёт этот скрипт браузеру как есть, поэтому ни фреймворк, ни island не нужны. Образец показан в руководстве по Next.js, а с доступными сообщениями о статусе объяснён в статье AJAX-отправка формы. JSON-запросы _redirect не используют.

Разрешённые источники для разработки, превью и продакшена

Добавьте в Разрешённые источники каждый источник, с которого отдаётся форма, с точной схемой, хостом и портом: http://localhost:4321 для astro dev, продакшен-домен с https:// и превью-домен вашего хостинга, если тестируете там. Если отправка падает с origin_not_allowed, первым делом проверьте этот список.

Та же схема работает на Cloudflare Pages, GitHub Pages, Netlify и Vercel: браузер отправляет данные прямо в Formhook, и ваш хостинг отправку не видит.

Использование из эндпоинта Astro

Для статических страниц больше ничего не нужно. Если сайт работает в серверном или гибридном режиме и вы хотите отправлять данные из эндпоинта или action Astro, вызывайте Formhook из серверного кода с заголовком X-Auth-Token, созданным в настройках формы и хранящимся в серверной переменной окружения. Серверные запросы не несут заголовка Origin и без этого токена отклоняются. Подробности - в документации.

Спам и конфиденциальность

Оставьте скрытое поле _gotcha: боты его заполняют, и такие отправки молча отбрасываются. Лимиты запросов действуют по IP и по форме, а Cloudflare Turnstile включается для каждой формы в дашборде; это руководство сравнивает варианты. Для посетителей из ЕС добавьте под формой короткое уведомление. В руководстве по форме, соответствующей GDPR есть формулировки, которые можно адаптировать.

Что происходит дальше

Отправка появляется в вашей панели Formhook в течение секунды.
Push-уведомление срабатывает на каждом устройстве, где вы его включили.
Отвечайте прямо из панели (Pro и выше), не раскрывая свой настоящий email-адрес.

Запустите вашу контактную форму на Astro сегодня.

Зарегистрируйтесь бесплатно, создайте форму, вставьте API-ключ. Пять минут.

Начать бесплатно

Бесплатный тариф: 5 форм · 250 отправок/мес · Без банковской карты.

Контактная форма Astro - FAQ

Нужна ли мне интеграция Astro или серверный адаптер?

Нет. Форма POST'ит напрямую в Formhook, так что работает с дефолтным статическим выводом Astro. Режим SSR не нужен, адаптер @astrojs/node не требуется.

Можно ли иметь несколько контактных форм на разных страницах Astro?

Да. Создайте по одной форме Formhook на каждый случай - контакты, вакансии, рассылка - и вставьте action каждой в нужную .astro-страницу. Бесплатный тариф включает пять форм.

Как показать страницу благодарности после отправки?

Добавьте скрытое поле _redirect, указывающее на ваш Astro-маршрут благодарности. URL должен быть в списке разрешённых origins формы. Или, если вы предпочитаете показать inline-успех без перезагрузки, используйте паттерн fetch из руководств Next.js или SvelteKit.

Руководства для других фреймворков

Migrating from Formspree? See how Formhook compares.