Formularz kontaktowy dla Hugo

Formgong team ·

Wklej to do Hugo. Zgłoszenia idą do Formgong. Bez bazy i bez Resend.

300 zgłoszeń miesięcznie za darmo

Jak działają formularze w Hugo

Hugo generuje statyczny HTML. W zwykłym deploju na GitHub Pages, Netlify lub Cloudflare Pages nie ma serwerowej obsługi formularza.

Dodaj partial formularza w layoucie, ustaw action na Formgong i buduj jak zwykle. To jak każda statyczna strona; zobacz też /for/html i artykuł o GitHub Pages.

Konfiguracja w Hugo

  1. Utwórz formularz w Formgong i skopiuj klucz dostępu.
  2. Dodaj partial (np. layouts/partials/contact-form.html) z formularzem HTML, access_key, _lang i botcheck.
  3. Dołącz partial na stronie kontaktu. W _redirect daj absolutny URL podziękowania ({{ site.BaseURL }}…), jeśli chcesz.
  4. Zbuduj i wdróż, wyślij test z żywej URL, podłącz Telegram w Formgong.
Hugo
<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>

Formgong czy funkcja serverless przy Hugo?

Dodaj funkcję Netlify/Cloudflare, gdy przy submit potrzebujesz własnej logiki serwerowej.

Użyj Formgong, gdy wystarczy dostawa i skrzynka bez pisania tej funkcji.

Pytania i odpowiedzi

Czy Hugo potrzebuje wtyczki formularzy?

Nie. Hugo oddaje HTML; przeglądarka wysyła do Formgong.

Czy mogę użyć shortcode?

Tak. Shortcode z tą samą znacznikami formularza działa; klucz dostępu lepiej trzymać poza publicznym repo przy buildzie z env.

Czy to to samo co GitHub Pages?

Ta sama idea. Artykuł o GitHub Pages ma notatki o hoście; ta strona jest pod Hugo.

Zacznij za darmo