Enviar un formulario de Google en un sitio web de Hugo

A veces es necesario agregar una solicitud de formulario a tu sitio web basado en Hugo.

Índice

No todos los segundos viernes, pero aún así… Tenemos dos enfoques principales

‘correo del cartero’

Opciones comunes para servicios de envío de formularios

  1. Usar algún tipo de servicio de envío de formularios web, como https://getform.io ($15.83/mes para el plan Start) o https://kwesforms.com (19/mes), o https://form-data.com ($10/1k envíos). Hay algunas alternativas con como 100 envíos gratuitos al mes. Pero aún así, necesitas protegerte del spam. Ver algún molesto reCapcha.

  2. Formularios de Google. Sencillo y fácil.

Aquí está la lista de pasos para configurar envío de formularios desde un sitio web de Hugo a Google Forms.

Configurar el formulario en Google

Ve a la página de configuración de formulario de Google: https://docs.google.com/forms/u/0/

Crea un formulario web con algunos campos como

  • Correo de contacto
  • Nombre
  • Mensaje

Configuración del formulario de Google para enviar desde un sitio web generado por Hugo

Luego, en la esquina superior derecha de la pantalla hay un botón vertical tripledots redondo. Copia el HTML de incrustación, debería verse algo así:

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

Menú contextual de formularios de Google

Configuración del sitio web de Hugo

rawhtml

Asegúrate de tener el shortcode rawhtml.

En el archivo layouts/shortcodes/rawhtml.html

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

Crear la página de contacto

Puedes agregar esto a cualquier página, pero intentemoslo primero en la página de contacto:

hugo new contact-us.md

Agrega al final de esta página el HTML incrustado que copiaste de Google:

rawhtml en el sitio web de Hugo

Probar tu página de contacto del sitio web de Hugo

Para probar el sitio web de Hugo localmente:

hugo server -D

Después de que Hugo diga lo estándar

Entorno: "desarrollo"
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

ve a: http://localhost:1313/contact-us

y ve si funciona el envío o no.

texto alternativo

También hay una configuración del formulario que limita 1 envío por remitente. Esto requiere un inicio de sesión en Google. Y esta configuración está activa por defecto.

Entonces, quizás quieras desactivarla.

Ver los datos de los formularios enviados en Google Forms o hojas de cálculo

Después de que hayas hecho clic en enviar, ve a Google Forms

y ve los detalles enviados.

texto alternativo

o en la hoja de cálculo de Google:

texto alternativo

Una página de contacto en mi sitio web está usando exactamente este método.

Enlaces útiles