Отправить Google Форму на сайте Hugo

Иногда вам нужно добавить отправку формы на ваш сайт, основанный на Hugo.

Содержимое страницы

Не каждый второй пятницу, но всё равно… У нас есть два основных подхода

‘почтальон, доставляющий почту’

Общие варианты для сервисов отправки форм

  1. Использовать какой-то сервис отправки веб-форм, например https://getform.io ($15.83/месяц для плана Start) или https://kwesforms.com (19/месяц), или https://form-data.com ($10/1000 отправок). Существуют также альтернативы с бесплатными 100 отправками в месяц. Но всё равно - нужно защищаться от спама. Посмотрите раздражающий reCapcha.

  2. Формы Google. Просто и удобно.

Вот список шагов по настройке отправки форм с сайта Hugo в Google формы.

Настройка формы на Google

Перейдите на страницу настройки Google формы: https://docs.google.com/forms/u/0/

Создайте веб-форму с полями, например:

  • Контактная почта
  • Имя
  • Сообщение

Настройка Google формы для отправки с сайта, сгенерированного Hugo

Затем в правом верхнем углу экрана есть кнопка вертикальных троеточий в круге. Скопируйте встроенный HTML, он должен выглядеть примерно так:

<iframe src="https://docs.google.com/forms/d/e/qwesomenumbersandlettersqwe/viewform?embedded=true"
width="640" height="1142" frameborder="0" marginheight="0" marginwidth="0">Загрузка…</iframe>

Контекстное меню Google форм

Настройка сайта Hugo

rawhtml

Убедитесь, что у вас есть короткая запись rawhtml.

В файле layouts/shortcodes/rawhtml.html

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

Создание страницы контактов

Вы можете добавить это на любую страницу, но сначала попробуем на странице contuct-us

hugo new contact-us.md

Добавьте в конец этой страницы встроенный HTML, скопированный с Google:

rawhtml на сайте Hugo

Тестирование страницы контактов сайта Hugo

Чтобы протестировать сайт Hugo локально:

hugo server -D

После того, как Hugo выведет стандартное сообщение:

Среда: "разработка"
Страницы обслуживаются с диска
Работает в режиме быстрой отрисовки. Для полного перестроения при изменении: hugo server --disableFastRender
Веб-сервер доступен по адресу http://localhost:1313/ (адрес привязки 127.0.0.1)
Нажмите Ctrl+C, чтобы остановить

перейдите по адресу: http://localhost:1313/contact-us

и увидите, работает ли отправка. или нет

альтернативный текст

Также есть настройка формы, ограничивающая 1 отправку на отправителя. Это требует входа в Google. И эта настройка включена по умолчанию.

Возможно, вы захотите выключить её.

Просмотр данных отправленных форм на Google формах или таблицах

После того, как вы нажмете “Отправить”, перейдите на Google формы

и увидите подробности отправленной формы.

альтернативный текст

или в Google таблице:

альтернативный текст

Страница свяжитесь со мной на моем сайте использует именно этот метод.

Полезные ссылки