Enviar Formulário do Google no Site Hugo

Às vezes, você precisa adicionar um envio de formulário ao seu site baseado em Hugo.

Conteúdo da página

Nem toda sexta-feira, mas ainda assim… Temos duas abordagens principais

‘carteiro entregando correspondência’

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

  1. Utilizar 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 cerca de 100 envios gratuitos por mês. Mas ainda assim - precisam se proteger contra spam. Vejam o reCaptcha irritante.

  2. Google Forms. Simples e fácil.

Aqui está uma lista de passos sobre como configurar envio de formulários de um site Hugo para o Google Forms.

Configuração do formulário no Google

Acesse a página de configuração do Google Forms: https://docs.google.com/forms/u/0/

Crie um formulário web com alguns campos como:

  • E-mail de contato
  • Nome
  • Mensagem

Configuração do Google Forms para envio a partir de um site gerado pelo Hugo

Em seguida, no canto superior direito da tela, há um botão redondo com três pontos verticais. Copie o HTML incorporado (Embed HTML), que deve parecer semelhante a este:

<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 do Google Forms

Configuração do site Hugo

rawhtml

Certifique-se de ter o shortcode rawhtml.

No arquivo layouts/shortcodes/rawhtml.html

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

Criar página de contato

Você pode adicionar isso a qualquer página, mas vamos tentar primeiro na página contact-us

hugo new contact-us.md

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

rawhtml em site Hugo

Testar sua página de contato do site Hugo

Para testar o site Hugo localmente:

hugo server -D

Após o Hugo exibir o padrão:

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

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

e veja se o envio funciona ou não.

texto alternativo

Também existe uma configuração de formulário que limita a 1 envio por remetente. O que exige um login no Google. E essa configuração está ATIVADA por padrão.

Portanto, você pode querer desativá-la.

Ver seus dados de formulários enviados no Google Forms ou Planilhas

Após clicar em enviar - vá para o Google Forms

e veja os detalhes enviados.

texto alternativo

ou na planilha do Google:

texto alternativo

Uma página Contate-me no meu site usa exatamente este método.