Enviar formulário do Google em site Hugo

Às vezes, você precisa adicionar uma submissão de formulário ao seu site baseado em Hugo.

Conteúdo da página

Não todos os quintos de segunda-feira, mas ainda assim… Temos duas abordagens principais

‘postman entregando correio’

Opções comuns para serviços de envio de formulários

  1. Utilize algum tipo de serviço de envio de formulários web, como https://getform.io ($15.83/mês para o plano Start) ou https://kwesforms.com (19/mês), ou https://form-data.com ($10/1k envios). Existem algumas alternativas com algo como 100 envios gratuitos por mês. Mas ainda assim - é necessário proteger-se do spam. Veja o incômodo reCapcha.

  2. Formulários do Google. Simples e fácil.

Aqui está a lista de passos para configurar envio de formulários de um site Hugo para formulários do Google.

Configurar o formulário no Google

Vá para a página de configuração do formulário do Google: https://docs.google.com/forms/u/0/

Crie um formulário web com alguns campos como

  • Email de contato
  • Nome
  • Mensagem

Configuração do formulário do Google para envio de um site gerado por Hugo

Em seguida, no canto superior direito da tela, há um botão vertical tripledots redondo. Copie o HTML de incorporação, ele deve parecer algo assim:

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

Menu de contexto dos formulários do Google

Configuração do site Hugo

rawhtml

Certifique-se de ter o shortcode rawhtml.

No arquivo layouts/shortcodes/rawhtml.html

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

Criar a página de contato

Você pode adicionar isso a qualquer página, mas vamos tentar primeiro na página de contato:

hugo new contact-us.md

Adicione no final desta página o HTML incorporado que você copiou do Google:

rawhtml no site Hugo

Testar sua página de contato do site Hugo

Para testar o site Hugo localmente:

hugo server -D

Após o Hugo dizer o seguinte:

Ambiente: "desenvolvimento"
Servindo páginas do disco
Executando no modo de renderização rápida. Para reconstruir totalmente com mudanças: hugo server --disableFastRender
Servidor web disponível em http://localhost:1313/ (endereço de vinculação 127.0.0.1)
Pressione Ctrl+C para parar

vá para: http://localhost:1313/contact-us

e veja se o formulário de envio funciona ou não.

texto alternativo

Existe também uma configuração do formulário que limita 1 envio por remetente. Isso exige um login do Google. E essa configuração está ATIVA por padrão.

Portanto, você pode querer desativá-la.

Veja os dados dos formulários enviados no Google Forms ou planilhas

Após clicar em “Enviar” - vá para os formulários do Google

e veja os detalhes enviados.

texto alternativo

ou nas planilhas do Google:

texto alternativo

Uma página contato no meu site está usando exatamente este método.