Руководство

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

Eleventy рендерит в статический HTML на этапе сборки, так что контактная форма Eleventy - это просто обычная HTML-форма в Nunjucks (или Liquid, или чистом HTML) шаблоне. Form action указывает на Formhook, и больше ничего делать не нужно.

Сниппет

contact.Eleventy

{# src/contact.njk - Nunjucks template, plain HTML form #}
<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="{{ site.url }}{{ '/thanks' | url }}" />
  <button type="submit">Send</button>
</form>

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

Сниппет работает в любом языке шаблонов Eleventy - Nunjucks (показано), Liquid, Handlebars, чистый HTML, JSX. Фильтр {{ '/thanks' | url }} применяет URL-трансформацию Eleventy, чтобы _redirect корректно работал с pathPrefix. Вставьте форму в шаблон страницы или include - не важно, куда.

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

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

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

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

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

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

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

Работает ли это со стандартным build-пайплайном Eleventy?

Да. Форма - это обычный markup, который переживает трансформации шаблонов Eleventy. Никаких data-файлов, плагинов или shortcode'ов не требуется.

Можно ли использовать это из шаблона JSX или Liquid?

Да. HTML не меняется между языками шаблонов - меняется только способ встраивания динамических кусков вроде redirect-URL в зависимости от синтаксиса шаблона.

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

Защита от спама на стороне Formhook: honeypot тихо отбрасывает ботов, а Cloudflare Turnstile - переключатель на форму. Ничего подключать в сборку Eleventy не нужно.

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

Migrating from Formspree? See how Formhook compares.