Kirimkan Form Google di Situs Web Hugo
Terkadang Anda perlu menambahkan formulir pengiriman ke situs web berbasis Hugo Anda.
Tidak setiap hari Jumat kedua, tetapi tetap… Kami memiliki dua pendekatan utama
Opsi umum untuk layanan pengiriman formulir
-
Gunakan jenis layanan pengiriman formulir web, seperti https://getform.io ($15.83/bulan untuk rencana Start) atau https://kwesforms.com (19/bulan), atau https://form-data.com ($10/1k pengiriman). Ada beberapa alternatif dengan seperti gratis 100 pengiriman per bulan. Tetapi tetap - perlukan melindungi diri Anda dari spam. Lihat beberapa reCapcha yang mengganggu.
-
Google Forms. Mudah dan nyaman.
Berikut adalah daftar langkah cara mengonfigurasi mengirimkan formulir dari situs web Hugo ke Google Forms.
Mengatur formulir di Google
Buka halaman konfigurasi google form: https://docs.google.com/forms/u/0/
Buat webform dengan beberapa bidang seperti
- Email kontak
- Nama
- Pesan
Kemudian di sudut kanan atas layar terdapat tombol vertical tripledots round
.
Salin HTML Embed, seharusnya terlihat seperti ini:
<iframe src="https://docs.google.com/forms/d/e/qwesomenumbersandlettersqwe/viewform?embedded=true"
width="640" height="1142" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
Konfigurasi situs web Hugo
rawhtml
Pastikan Anda memiliki shortcode rawhtml
.
Dalam file layouts/shortcodes/rawhtml.html
<!-- raw html -->
{{ .Inner }}
Membuat halaman kontak
Anda dapat menambahkan ini ke halaman mana pun, tetapi mari coba terlebih dahulu pada halaman kontak-kami:
hugo new contact-us.md
Tambahkan ke akhir halaman ini HTML yang telah Anda salin dari Google:
Uji halaman kontak situs web Hugo Anda
Untuk menguji situs web Hugo secara lokal:
hugo server -D
Setelah Hugo mengatakan standar
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
pergi ke: http://localhost:1313/contact-us
dan lihat apakah pengiriman bekerja atau tidak.
Ada juga pengaturan formulir yang membatasi 1 pengiriman per pengirim. Yang memerlukan login Google. Dan pengaturan ini aktif secara default.
Jadi Anda mungkin ingin mematikan pengaturan tersebut.
Lihat data formulir yang telah dikirim di Google Forms atau spreadsheet
Setelah Anda mengklik submit - pergi ke Google Forms
dan lihat detail yang telah dikirim.
atau di spreadsheet Google:
Halaman kontak saya di situs web saya menggunakan metode ini secara eksak.
Tautan yang berguna
- Mendeploy situs web yang dihasilkan Hugo ke AWS S3
- Menambahkan markup data terstruktur ke Hugo
- Hugo Cheat Sheet
- Pengelolaan gambar di Mainroad Hugo Theme: Pengelolaan gambar Mainroad theme
- Tema paling populer untuk Hugo
- Menggunakan Gitea Actions untuk mendeploy situs web Hugo ke AWS S3
- Cara menyimpan gambar thumbnail di folder bundel halaman untuk situs Hugo dengan tema Mainroad