Formularz kontaktowy Eleventy (11ty)

Formgong team ·

Formularz kontaktowy Eleventy to ta sama rzecz, której ludzie szukają jako formularza 11ty. Eleventy zapisuje statyczny HTML i nie trzyma serwera dla gości. Wyślij szablon do Formgong. Dostaniesz mail i Telegram bez wtyczki i bez funkcji. Strona zostaje zwykłym 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="pl">
  <label>Imię <input type="text" name="name" autocomplete="name" placeholder="Twoje imię" required></label>
  <label>E-mail <input type="email" name="email" autocomplete="email" placeholder="ty@example.com" required></label>
  <label>Wiadomość <textarea name="message" placeholder="W czym możemy pomóc?" 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>Pozostaw to pole puste<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  
  <button type="submit">Wyślij</button>
</form>

Jak działają formularze w Eleventy

Eleventy (11ty) kompiluje szablony do plików statycznych. Działają Nunjucks, Liquid, HTML i Markdown. Strona startowa, sprawdzona 6 października 2026, mówi, że v3.1.6 potrzebuje Node 18 albo nowszego.

Domyślny folder wyniku to _site. Uruchom npx @11ty/eleventy, żeby go zbudować. Nic w tym folderze nie przyjmie POST. Formularz musi wołać adres w sieci.

Konfiguracja w Eleventy

  1. Utwórz formularz w Formgong i skopiuj klucz dostępu.
  2. Dodaj contact.njk z formularzem. Skieruj go na https://formgong.com/submit i dodaj access_key, _lang oraz botcheck.
  3. Użyj go ponownie przez {% include "contact-form.njk" %}. Pliki w _includes to fragmenty, nie strony.
  4. Uruchom npx @11ty/eleventy --serve i otwórz http://localhost:8080/. Wyślij test, potem wgraj _site albo podłącz repozytorium do hosta.
  5. Nie zostawiaj nawiasów szablonu w tekście, którego nie chcesz parsować. Eleventy traktuje .html jako Liquid, więc surowe {{ jest tagiem. Plik .njk robi ten wybór jasnym.

Formgong czy serwer Eleventy?

Dodaj funkcję hosta, gdy zgłoszenie ma uruchomić Twój kod albo zapisać bazę.

Weź Formgong, gdy potrzebujesz tylko dostarczenia wiadomości. Build 11ty zostaje folderem HTML.

Pytania i odpowiedzi

Czy Eleventy to to samo co 11ty?

Tak. Eleventy to nazwa projektu, a 11ty to skrót. Oba są w dokumentacji i w wyszukiwarce.

Gdzie trafiają pliki HTML?

Do _site, chyba że zmienisz katalog wyniku. Wdrażaj ten folder. Formularz wysyła dane z przeglądarki po załadowaniu strony.

Który język szablonów wybrać?

Dowolny. Nunjucks i Liquid są najczęstsze. Formularz i tak jest HTML. Składnia include musi pasować do typu pliku.

Czy 11ty ma wbudowaną obsługę formularzy?

Nie. Dokumentacja opisuje szablony, dane i hosting. Nie ma tam skrzynki formularzy. POST musi przyjąć backend formularzy albo Twój serwer.

Zacznij za darmo