Руководство

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

Hugo - это генератор статических сайтов без runtime, так что контактная форма Hugo - это просто обычная HTML-форма, встроенная в Hugo-шаблон. Вставьте сниппет в layout или partial, подставьте свой API-ключ Formhook, и готово.

Сниппет

contact.Hugo

{{/* layouts/contact.html - plain HTML inside Hugo's template syntax */}}
<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden />
  <input type="hidden" name="_redirect" value="{{ "/thanks" | absURL }}" />
  <button type="submit">Send</button>
</form>

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

Сниппет работает в любом шаблоне Hugo - layout, partial или single-page-шаблоне. Hugo прокидывает сырой HTML на этапе сборки, так что атрибут action в опубликованном HTML указывает на formhook.app/f/YOUR_API_KEY. Кусок {{ "/thanks" | absURL }} - это шаблонизация Hugo: на этапе сборки он раскрывается в абсолютный URL внутри вашего сайта, что и нужно Formhook для валидации _redirect.

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

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

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

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

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

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

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

Работает ли это со статической сборкой `hugo` и `hugo deploy`?

Да. Форма - это обычный HTML в собранном выводе. Hugo не работает на серверной стороне, так что форма POST'ит напрямую в Formhook из браузера.

Можно ли использовать i18n-функции Hugo с контактной формой?

Да - сама форма - это markup, так что локализованные подписи работают как в любом другом шаблоне Hugo. Используйте i18n-функции Hugo на placeholder-тексте и подписях полей.

Как избежать жёсткой записи API-ключа в каждом шаблоне?

Положите ключ в params вашего сайта (config.toml или hugo.yaml) и ссылайтесь на него как {{ .Site.Params.formhookKey }} в шаблоне. Относитесь к нему как к публичному идентификатору эндпоинта - реальную защиту делают per-form rate limits Formhook и переключатель Turnstile.

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

Migrating from Formspree? See how Formhook compares.