Soumettre un formulaire Google sur un site Hugo

Parfois, vous avez besoin d'ajouter un formulaire de soumission à votre site web basé sur Hugo.

Sommaire

Pas tous les deuxième vendredi, mais tout de même…
Nous avons deux approches principales

‘postman livrant du courrier’

Options courantes pour les services de soumission de formulaires

  1. Utiliser un service de soumission de formulaires web,
    comme https://getform.io ($15,83/mois pour le plan Start)
    ou https://kwesforms.com (19/mois),
    ou https://form-data.com ($10/1000 soumissions).
    Il existe également quelques alternatives avec des offres gratuites de 100 soumissions par mois.
    Mais tout de même, il faut se protéger du spam. Voyez ce désagréable reCapcha.

  2. Les formulaires Google. Faciles et rapides.

Voici la liste des étapes pour configurer
la soumission de formulaires depuis un site Hugo vers Google Forms.

Configurer le formulaire sur Google

Allez sur la page de configuration de Google Forms:
https://docs.google.com/forms/u/0/

Créez un formulaire web avec quelques champs comme

  • Email de contact
  • Nom
  • Message

Configuration du formulaire Google pour la soumission depuis un site Hugo généré

En haut à droite de l’écran, il y a un bouton vertical tripledots round.
Copiez le code HTML d’incrustation, il devrait ressembler à ceci :

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

Menu contextuel de Google Forms

Configuration du site Hugo

rawhtml

Assurez-vous d’avoir le raccourci rawhtml.

Dans le fichier layouts/shortcodes/rawhtml.html

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

Créer la page de contact

Vous pouvez l’ajouter à n’importe quelle page, mais commençons par la page contact-us :

hugo new contact-us.md

Ajoutez à la fin de cette page le code HTML incrusté que vous avez copié depuis Google :

rawhtml sur le site Hugo

Tester votre page de contact du site Hugo

Pour tester localement votre site Hugo :

hugo server -D

Après que Hugo affiche :

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

allez à : http://localhost:1313/contact-us

et voyez si la soumission fonctionne ou non.

texte alternatif

Il existe également un paramètre de formulaire limitant à 1 soumission par utilisateur.
Ce paramètre exige une connexion Google.
Et ce paramètre est activé par défaut.

Vous pourriez donc souhaiter le désactiver.

Voir vos formulaires soumis sur Google Forms ou les tableaux de Google

Après avoir cliqué sur “Soumettre”, allez sur Google Forms

et consultez les détails soumis.

texte alternatif

ou sur le tableau de Google :

texte alternatif

La page me contacter sur mon site utilise exactement cette méthode.

Liens utiles