# Jekyll

> Un include Jekyll qui affiche un formulaire Ikiform à partir de _config.yml, avec des redirections qui fonctionnent sur GitHub Pages et sur les domaines personnalisés.

Les sites Jekyll sont statiques, ce qui convient parfaitement à un envoi de formulaire classique. Gardez le formulaire dans un include pour que chaque page utilise le même markup et que l'id du formulaire soit défini à un seul endroit.

## Mise en place

### Étape 1 : Ajoutez les réglages à _config.yml

`_config.yml`:

```yaml
url: "https://example.com"
ikiform:
  form_id: frm_xxxxxxxxxxxxxxxx
  thanks: /thanks/
```

L'include construit la redirection avec `absolute_url`, qui a besoin de `url`. Sans lui, la redirection n'est qu'un chemin, et Ikiform ignore tout ce qui n'est pas une URL `https:` complète. Sur un site de projet GitHub Pages, définissez aussi `baseurl: /repo` ; `absolute_url` l'ajoute pour vous.

### Étape 2 : Créez l'include

`_includes/ikiform-form.html`:

```liquid
{%- assign form_id = include.form_id | default: site.ikiform.form_id -%}
{%- assign thanks = include.thanks | default: site.ikiform.thanks -%}
<form class="ikiform" action="https://ikiform.com/f/{{ form_id }}" method="post">
  <label>Email <input name="email" type="email" autocomplete="email" required></label>
  <label>Message <textarea name="message" rows="5"></textarea></label>
  {%- if include.subject %}
  <input type="hidden" name="_subject" value="{{ include.subject | escape }}">
  {%- endif %}
  {%- if thanks %}
  <input type="hidden" name="_redirect" value="{{ thanks | absolute_url }}">
  {%- endif %}
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <button type="submit">{{ include.button | default: "Send" }}</button>
</form>
```

### Étape 3 : Utilisez-le

`contact.md`:

```liquid
---
layout: page
title: Contact
---

Questions about pricing? Write to us.

{% include ikiform-form.html subject="Pricing question" %}
```

L'include fonctionne dans les pages, les articles et les layouts. Passez `form_id` pour utiliser un autre formulaire, `thanks` pour une autre redirection et `button` pour le texte du bouton.

### Étape 4 : Ajoutez la page de remerciement

`thanks.md`:

```liquid
---
layout: page
title: Thanks
permalink: /thanks/
---

Thanks, we got your message.
```

`_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

GitHub Pages est l'hébergeur habituel de Jekyll, il vous faudra donc souvent deux entrées : l'hôte `github.io` et votre domaine personnalisé.

| Où tourne le formulaire | À ajouter aux domaines autorisés |
| --- | --- |
| `bundle exec jekyll serve` | `localhost`. Correspond à `http://localhost:4000` : Ikiform compare uniquement le nom d'hôte, jamais le port. |
| 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. |
| Domaine personnalisé sur GitHub Pages | `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. |

- N'ajoutez jamais `github.io` seul. Tous les sites de cet hébergeur correspondraient, y compris ceux des autres.

## Checklist de test

1. Lancez `bundle exec jekyll serve` et affichez le code source de la page. L'`action` doit se terminer par l'id de votre formulaire.
2. Envoyez en local. Vous arriverez sur la page de remerciement d'Ikiform : `jekyll serve` règle `url` sur `http://localhost:4000`, et les redirections `http:` ne sont pas suivies.
3. Faites un push, attendez le build Pages et envoyez depuis `username.github.io`. Vérifiez que la soumission n'est pas marquée comme spam.
4. Envoyez sur votre domaine personnalisé et vérifiez que vous arrivez sur `/thanks/`.

## Dépannage

| Ce que vous voyez | Pourquoi | Solution |
| --- | --- | --- |
| `Could not locate the included file 'ikiform-form.html'` | Le fichier n'est pas dans `_includes`, ou son nom diffère | Déplacez-le dans `_includes/ikiform-form.html`. |
| La page de remerciement d'Ikiform au lieu de `/thanks/` sur le site en ligne | `url` manque dans `_config.yml`, ou le formulaire n'a aucun domaine autorisé | Réglez `url` sur votre adresse `https:` et ajoutez votre domaine. |
| `404 not_found` après l'envoi | `site.ikiform.form_id` est vide, donc l'action se termine par `/f/` | Vérifiez l'indentation sous `ikiform:` dans `_config.yml`. |
| 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.
- [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.