Контактна форма Eleventy (11ty)

Formgong team ·

Контактна форма Eleventy — це те саме, що люди шукають як форму 11ty. Eleventy пише статичний HTML і не тримає сервер для відвідувачів. Надішліть шаблон у Formgong. Ви отримаєте пошту і Telegram без плагіна і без функції. Сайт лишається звичайним HTML.

Eleventy
<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="uk">
  <label>Ім’я <input type="text" name="name" autocomplete="name" placeholder="Ваше ім’я" required></label>
  <label>Email <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label>
  <label>Повідомлення <textarea name="message" placeholder="Чим ми можемо допомогти?" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>Залиште це поле порожнім<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  
  <button type="submit">Надіслати</button>
</form>

Як працюють форми в Eleventy

Eleventy (11ty) компілює шаблони у статичні файли. Працюють Nunjucks, Liquid, HTML і Markdown. Сторінка початку, перевірена 6 жовтня 2026, каже, що v3.1.6 потребує Node 18 або новіший.

Типова тека виводу — _site. Запустіть npx @11ty/eleventy, щоб зібрати її. Ніщо в тій теці не прийме POST. Форма має кликати кінцеву точку в мережі.

Налаштування в Eleventy

  1. Створіть форму у Formgong і скопіюйте ключ доступу.
  2. Додайте contact.njk з формою. Спрямуйте її на https://formgong.com/submit і додайте access_key, _lang та botcheck.
  3. Повторно використайте її через {% include "contact-form.njk" %}. Файли в _includes — це частини, не сторінки.
  4. Запустіть npx @11ty/eleventy --serve і відкрийте http://localhost:8080/. Надішліть тест, потім викладіть _site або підключіть репозиторій до хоста.
  5. Не залишайте дужки шаблону в тексті, який не треба розбирати. Eleventy трактує .html як Liquid, тож голий {{ — це тег. Файл .njk робить цей вибір явним.

Formgong чи сервер Eleventy?

Додайте функцію хоста, коли заявка має виконати ваш код або записати базу.

Беріть Formgong, коли потрібна лише доставка листа. Збірка 11ty лишається текою HTML.

Питання та відповіді

Eleventy і 11ty — це одне?

Так. Eleventy — назва проєкту, 11ty — коротка форма. Обидві є в документації і в пошуку.

Куди потрапляють HTML-файли?

У _site, якщо ви не змінили теку виводу. Деплойте її. Форма надсилає дані з браузера після завантаження сторінки.

Яку мову шаблонів обрати?

Будь-яку. Nunjucks і Liquid найчастіші. Форма в обох випадках — HTML. Синтаксис інклюду має відповідати типу файлу.

Чи є в 11ty вбудований обробник форм?

Ні. Документація про шаблони, дані і хостинг. Скриньки форм там немає. POST має прийняти бекенд форм або ваш сервер.

Почати безкоштовно