Jekyll

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

1. Ajoutez les réglages à _config.yml

   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.

2. Créez l'include

   {%- 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>

3. Utilisez-le

   ---
   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.

4. Ajoutez la page de remerciement

   ---
   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.

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é.

• 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

Voir aussi

• HugoUn partial et un shortcode pour les fichiers de contenu.
• 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.