Hugo

Hugo génère du HTML simple, et un envoi de formulaire classique est tout ce dont Ikiform a besoin : il n'y a donc aucun JavaScript à ajouter. Le seul piège propre à Hugo, c'est le Markdown : le moteur de rendu de Hugo supprime le HTML brut des fichiers de contenu sauf si vous activez markup.goldmark.renderer.unsafe, et un formulaire collé devient <!-- raw HTML omitted -->. Un shortcode garde plutôt le HTML dans un template.

Mise en place

1. Ajoutez l'id du formulaire à votre config

   baseURL = "https://example.com/"
   
   [params.ikiform]
   formId = "frm_xxxxxxxxxxxxxxxx"
   thanks = "/thanks/"

   baseURL doit être votre vraie adresse https:. Le partial s'en sert pour transformer thanks en URL absolue, et Ikiform ne suit que les redirections https:.

2. Créez le partial

   {{ $id := .id | default site.Params.ikiform.formId }}
   {{ $thanks := .thanks | default site.Params.ikiform.thanks }}
   <form class="ikiform" action="https://ikiform.com/f/{{ $id }}" method="post">
     <label>Email <input name="email" type="email" autocomplete="email" required></label>
     <label>Message <textarea name="message" rows="5"></textarea></label>
     {{ with .subject }}<input type="hidden" name="_subject" value="{{ . }}">{{ end }}
     {{ with $thanks }}<input type="hidden" name="_redirect" value="{{ . | absURL }}">{{ end }}
     <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
     <button type="submit">{{ .button | default "Send" }}</button>
   </form>

   Appelez-le toujours avec un dict, même vide. Chaque clé est facultative et se rabat sur les paramètres du site.

3. Enveloppez-le dans un shortcode

   {{ partial "ikiform-form.html" (dict "id" (.Get "id") "subject" (.Get "subject") "button" (.Get "button")) }}

   Hugo 0.146 a déplacé les templates dans layouts/_partials et layouts/_shortcodes. Sur les versions plus anciennes, utilisez layouts/partials et layouts/shortcodes.

4. Utilisez-le

   Dans n'importe quel fichier de contenu :

   ---
   title: Contact
   ---
   
   Questions about pricing? Write to us.
   
   {{< ikiform subject="Pricing question" >}}

   Ou dans un layout, pour un formulaire sur chaque page :

   <footer>
     {{ partial "ikiform-form.html" (dict "subject" "Footer enquiry") }}
   </footer>

Ajoutez une page content/thanks.md pour la redirection. Ikiform ne suit _redirect que si le formulaire a des domaines autorisés qui incluent votre site ; sans eux, les visiteurs voient la page de remerciement d'Ikiform. Voir Règles pour _redirect.

Domaines autorisés

Listez votre domaine de production ainsi que chaque endroit où vous prévisualisez le site généré.

• N'ajoutez jamais netlify.app, pages.dev ou github.io seul. Tous les sites de cet hébergeur correspondraient, y compris ceux des autres.

Checklist de test

1. Lancez hugo server, ouvrez la page et affichez le code source. Vous devez voir le <form>, pas <!-- raw HTML omitted -->.
2. Envoyez en local avec localhost dans les domaines autorisés. Vous arriverez sur la page de remerciement d'Ikiform, car absURL donne une adresse http://localhost et seules les redirections https: sont suivies.
3. Déployez une prévisualisation, envoyez depuis celle-ci et vérifiez que la soumission apparaît dans Ikiform sans être marquée comme spam.
4. Envoyez sur votre domaine de production et vérifiez que vous arrivez sur /thanks/.

Dépannage

Voir aussi

• JekyllUn include, et la configuration GitHub Pages.
• EleventyUn shortcode pour Nunjucks, Liquid et Markdown.
• Formulaires HTMLRedirections, champs réservés et honeypot.
• Domaines autorisésComment les origines sont comparées, et ce qui se passe en cas de non-correspondance.