# Hugo

> Un partial et un shortcode Hugo qui affichent un formulaire Ikiform à partir des paramètres du site, dans les layouts et dans le contenu Markdown.

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

### Étape 1 : Ajoutez l'id du formulaire à votre config

`hugo.toml`:

```toml
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:`.

### Étape 2 : Créez le partial

`layouts/_partials/ikiform-form.html`:

```html
{{ $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.

### Étape 3 : Enveloppez-le dans un shortcode

`layouts/_shortcodes/ikiform.html`:

```html
{{ 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`.

### Étape 4 : Utilisez-le

Dans n'importe quel fichier de contenu :

`content/contact.md`:

```text
---
title: Contact
---

Questions about pricing? Write to us.

{{< ikiform subject="Pricing question" >}}
```

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

`layouts/_partials/footer.html`:

```html
<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](https://ikiform.com/fr/docs/html.md#redirect-rules).

## Domaines autorisés

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

| Où tourne le formulaire | À ajouter aux domaines autorisés |
| --- | --- |
| `hugo server` | `localhost`. Correspond à `http://localhost:1313` : Ikiform compare uniquement le nom d'hôte, jamais le port. |
| Votre domaine | `example.com`, qui couvre aussi `www.example.com` |
| Netlify | `your-site.netlify.app`. Les deploy previews (`deploy-preview-12--your-site.netlify.app`) et les branch deploys (`branch--your-site.netlify.app`) n'en sont pas des sous-domaines : ajoutez l'hôte de prévisualisation exact le temps de le tester. |
| Cloudflare Pages | `your-project.pages.dev`. Les URL de prévisualisation comme `abc123.your-project.pages.dev` en sont des sous-domaines, donc elles correspondent déjà. |
| GitHub Pages | `username.github.io`. Les sites de projet à `username.github.io/repo` utilisent le même hôte, donc une seule entrée les couvre tous. |

- 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

| Ce que vous voyez | Pourquoi | Solution |
| --- | --- | --- |
| `<!-- raw HTML omitted -->` à la place du formulaire | Le formulaire a été collé directement dans le Markdown | Utilisez le shortcode. |
| Hugo échoue avec `template for shortcode "ikiform" not found` | Le fichier du shortcode est dans un dossier que votre version de Hugo ne lit pas | Utilisez `layouts/_shortcodes` à partir de 0.146, `layouts/shortcodes` avant. |
| La page de remerciement d'Ikiform au lieu de `/thanks/` en production | Aucun domaine autorisé, ou `baseURL` est en `http:` | Ajoutez votre domaine et réglez `baseURL` sur votre adresse `https:`. |
| `404 not_found` après l'envoi | `params.ikiform.formId` est absent, donc l'action se termine par `/f/` | Définissez l'id du formulaire dans `hugo.toml`. |
| Les soumissions arrivent dans le filtre spam avec `origin_mismatch` | La page qui a envoyé ne fait pas partie des domaines autorisés du formulaire | Ajoutez l'hôte du tableau ci-dessus. Avec **Reject**, les mêmes envois reçoivent plutôt `403 origin_not_allowed`. |

## Voir aussi

- [Jekyll](https://ikiform.com/fr/docs/guides/jekyll.md): Un include, et la configuration GitHub Pages.
- [Eleventy](https://ikiform.com/fr/docs/guides/eleventy.md): Un shortcode pour Nunjucks, Liquid et Markdown.
- [Formulaires HTML](https://ikiform.com/fr/docs/html.md): Redirections, champs réservés et honeypot.
- [Domaines autorisés](https://ikiform.com/fr/docs/spam.md#allowed-domains): Comment les origines sont comparées, et ce qui se passe en cas de non-correspondance.