Google-Formular in Hugo-Website einreichen

Manchmal muss man einen Formularabschluss zu seiner hugo-basierten Website hinzufügen.

Inhaltsverzeichnis

Nicht jeder zweite Freitag, aber dennoch… Wir haben zwei Hauptansätze

‘Postbote, der Briefe ausliefert’

Häufige Optionen für Formulareinreichungsdienste

  1. Verwenden Sie einen Webformular-Einreichungsdienst, wie https://getform.io ($15,83/Monat für Start-Plan) oder https://kwesforms.com (19/Monat), oder https://form-data.com ($10/1000 Einreichungen). Es gibt einige Alternativen mit etwa 100 Einreichungen pro Monat kostenlos. Aber dennoch – Sie müssen sich vor Spam schützen. Siehe den lästigen reCapcha.

  2. Google-Formulare. Einfach und bequem.

Hier ist eine Liste der Schritte, um Formulare von einer Hugo-Website an Google-Formulare zu übermitteln.

Formular auf Google einrichten

Gehen Sie zur Google-Formular Konfigurationsseite: https://docs.google.com/forms/u/0/

Erstellen Sie ein Webformular mit einigen Feldern wie

  • Kontakt-E-Mail
  • Name
  • Nachricht

Google-Formular-Konfiguration für die Übermittlung von einer Hugo-generierten Website

Dann finden Sie oben rechts auf dem Bildschirm einen vertikalen Dreipunkt-Button. Kopieren Sie den Einbettungs-HTML-Code, er sollte ungefähr so aussehen:

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

Google-Formular-Kontextmenü

Hugo-Website-Konfiguration

rawhtml

Stellen Sie sicher, dass Sie den rawhtml-Shortcode haben.

In der Datei layouts/shortcodes/rawhtml.html

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

Kontaktseite erstellen

Sie können dies auf jede Seite hinzufügen, aber probieren wir es zunächst auf der kontakt-uns-Seite aus

hugo new contact-us.md

Fügen Sie am Ende dieser Seite den eingebetteten HTML-Code hinzu, den Sie von Google kopiert haben:

rawhtml auf Hugo-Website

Testen Sie Ihre Hugo-Website-Kontaktseite

Um die Hugo-Website lokal zu testen:

hugo server -D

Nachdem Hugo folgendes ausgibt:

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

Gehen Sie zu: http://localhost:1313/contact-us

und sehen Sie, ob die Übermittlung funktioniert oder nicht

alternativer Text

Es gibt auch eine Formulareinstellung, die 1 Übermittlung pro Übermittler beschränkt. Dies erfordert eine Google-Anmeldung. Diese Einstellung ist standardmäßig aktiviert.

Sie möchten sie daher möglicherweise deaktivieren.

Sehen Sie Ihre übermittelten Formulardaten in Google-Formularen oder Tabellen

Nachdem Sie auf „Übermitteln“ geklickt haben, gehen Sie zu Google-Formularen

und sehen Sie die übermittelten Details.

alternativer Text

oder in Google-Tabellen:

alternativer Text

Eine Kontaktseite auf meiner Website verwendet genau diese Methode.