Wypełnij formularz Google na stronie Hugo

Czasami konieczne jest dodanie wysyłania formularza do swojej witryny opartej na Hugo.

Page content

Nie co drugi piątek, ale nadal… Mamy dwa główne podejścia

‘kurier przekazujący listy’

Powszechne opcje usług do wysyłania formularzy

  1. Użyj jakiegoś narzędzia do wysyłania formularzy przez internet, np. https://getform.io ($15.83/miesiąc za plan Start) lub https://kwesforms.com (19/miesiąc), lub https://form-data.com ($10/1000 wysyłek). Istnieją też alternatywy z darmowymi 100 wysyłkami miesięcznie. Ale nadal – trzeba chronić się przed spamem. Zobacz nieznośny reCapcha.

  2. Google Forms. Proste i łatwe.

Oto lista kroków, jak skonfigurować wysyłanie formularzy z witryny Hugo do Google Forms.

Skonfiguruj formularz w Google

Przejdź do Google Forms strony konfiguracji: https://docs.google.com/forms/u/0/

Utwórz formularz internetowy z kilkoma polami, np.

  • Adres e-mail kontaktowy
  • Imię
  • Wiadomość

Konfiguracja Google Forms do wysyłania z witryny wygenerowanej przez Hugo

Następnie, w prawym górnym rogu ekranu znajduje się przycisk vertical tripledots round button. Skopiuj kod HTML osadzenia, powinien wyglądać mniej więcej tak:

<iframe src="https://docs.google.com/forms/d/e/qwesomenumbersandlettersqwe/viewform?embedded=true"
width="640" height="1142" frameborder="0" marginheight="0" marginwidth="0">Ładowanie…</iframe>

Menu kontekstowe Google Forms

Konfiguracja witryny Hugo

rawhtml

Upewnij się, że masz shortcode rawhtml.

W pliku layouts/shortcodes/rawhtml.html

<!-- raw html -->
{{ .Inner }}

Utwórz stronę kontaktową

Możesz dodać to do dowolnej strony, ale spróbujmy najpierw na stronie kontakt-us:

hugo new contact-us.md

Dodaj na końcu tej strony skopiowany z Google kod HTML osadzenia:

rawhtml na witrynie Hugo

Przetestuj stronę kontaktową witryny Hugo

Aby przetestować witrynę Hugo lokalnie:

hugo server -D

Po tym, jak Hugo wyświetli standardowe komunikaty:

Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

przejdź do: http://localhost:1313/contact-us

i zobacz, czy formularz działa, czy też nie.

tekst alternatywny

Istnieje również ustawienie ograniczające 1 wysyłkę na użytkownika. Wymaga to logowania do Google. To ustawienie jest domyślnie włączone.

Może więc warto je wyłączyć.

Zobacz dane wysłanych formularzy w Google Forms lub arkuszach kalkulacyjnych

Po kliknięciu przycisku „Wyślij” – przejdź do Google Forms

i zobacz wysłane dane.

tekst alternatywny

lub w arkuszu Google:

tekst alternatywny

Strona skontaktuj się ze mną na mojej stronie internetowej korzysta dokładnie z tej metody.

Przydatne linki