# Eleventy

> Un shortcode Eleventy qui affiche un formulaire Ikiform dans les templates Nunjucks, Liquid et Markdown, avec l'id du formulaire dans les données globales.

Eleventy produit du HTML statique, donc le formulaire envoie sans aucun JavaScript côté client. Un shortcode garde le markup à un seul endroit et fonctionne de la même façon dans les fichiers Nunjucks, Liquid et Markdown.

## Mise en place

### Étape 1 : Ajoutez le shortcode

`eleventy.config.js`:

```js
const escape = (value) => String(value).replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);

export default function (eleventyConfig) {
  eleventyConfig.addShortcode("ikiform", (formId, thanks = "", subject = "") =>
    [
      `<form class="ikiform" action="https://ikiform.com/f/${encodeURIComponent(formId)}" method="post">`,
      '<label>Email <input name="email" type="email" autocomplete="email" required></label>',
      '<label>Message <textarea name="message" rows="5"></textarea></label>',
      thanks && `<input type="hidden" name="_redirect" value="${escape(thanks)}">`,
      subject && `<input type="hidden" name="_subject" value="${escape(subject)}">`,
      '<input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>',
      '<button type="submit">Send</button>',
      "</form>",
    ]
      .filter(Boolean)
      .join("\n"),
  );
}
```

- Les lignes sont jointes sans ligne vide, et c'est voulu. En Markdown, une ligne vide termine un bloc HTML, et le reste du formulaire serait traité comme du texte.
- Ceci utilise la syntaxe des modules ES. Si votre `package.json` n'a pas `"type": "module"`, nommez le fichier `eleventy.config.mjs`.

### Étape 2 : Gardez l'id du formulaire dans les données globales

`_data/ikiform.js`:

```js
export default {
  formId: process.env.IKIFORM_FORM_ID ?? "frm_xxxxxxxxxxxxxxxx",
  thanks: "https://example.com/thanks/",
};
```

Les données globales sont disponibles dans chaque template sous le nom `ikiform`. L'URL de remerciement doit être absolue et en `https:`, car Ikiform ignore les autres redirections.

### Étape 3 : Utilisez-le

`contact.md`:

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

Questions about pricing? Write to us.

{% ikiform ikiform.formId, ikiform.thanks, "Pricing question" %}
```

Les fichiers Markdown sont traités avec Liquid par défaut, donc la balise y fonctionne telle quelle. Gardez-la seule sur sa ligne et ne l'indentez pas de quatre espaces, sinon Markdown l'affiche comme un bloc de code. La même balise fonctionne dans les fichiers `.njk` et `.liquid`.

`_redirect` n'est suivi que si le formulaire a des domaines autorisés qui incluent votre site. Voir [Règles pour _redirect](https://ikiform.com/fr/docs/html.md#redirect-rules).

## Domaines autorisés

Listez la production et chaque hôte de prévisualisation. Les sites Eleventy sont souvent déployés sur Netlify ou Cloudflare Pages, qui gèrent les prévisualisations différemment.

| Où tourne le formulaire | À ajouter aux domaines autorisés |
| --- | --- |
| `npx @11ty/eleventy --serve` | `localhost`. Correspond à `http://localhost:8080` : 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à. |

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

## Checklist de test

1. Lancez le serveur de développement et affichez le code source de la page. Le formulaire doit être du HTML simple, pas à l'intérieur d'un bloc `<pre><code>`.
2. Envoyez en local avec `localhost` dans les domaines autorisés et vérifiez que la soumission apparaît dans Ikiform.
3. Déployez une prévisualisation et envoyez à nouveau depuis l'hôte de prévisualisation.
4. Envoyez en production et vérifiez que vous arrivez sur votre page de remerciement.

## Dépannage

| Ce que vous voyez | Pourquoi | Solution |
| --- | --- | --- |
| Le formulaire s'affiche comme du code sur la page | Le shortcode est indenté de quatre espaces dans un fichier Markdown | Placez la balise en début de ligne. |
| La moitié du formulaire s'affiche en paragraphes | La sortie du shortcode contient une ligne vide, qui termine le bloc HTML du Markdown | Joignez les lignes sans ligne vide, comme dans la config ci-dessus. |
| `SyntaxError: Unexpected token 'export'` au démarrage d'Eleventy | La config utilise la syntaxe des modules ES dans un projet CommonJS | Renommez-la en `eleventy.config.mjs`, ou ajoutez `"type": "module"` à `package.json`. |
| Nunjucks ou Liquid ne trouve pas la balise `ikiform` | Eleventy n'a pas chargé le fichier de config | Vérifiez que le fichier est à la racine du projet et s'appelle `eleventy.config.js` ou `.mjs`. |
| 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

- [Hugo](https://ikiform.com/fr/docs/guides/hugo.md): Un partial et un shortcode pour les fichiers de contenu.
- [Jekyll](https://ikiform.com/fr/docs/guides/jekyll.md): Un include, et la configuration GitHub Pages.
- [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.