Eleventy

Eleventy menghasilkan HTML statis, jadi formulir mengirim tanpa JavaScript client apa pun. Shortcode menyimpan markup di satu tempat dan bekerja sama persis di file Nunjucks, Liquid, dan Markdown.

Penyiapan

1. Tambahkan shortcode

   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"),
     );
   }

   • Baris-barisnya sengaja digabung tanpa baris kosong. Di Markdown, baris kosong mengakhiri blok HTML, dan sisa formulir akan diperlakukan sebagai teks.
   • Ini memakai sintaks ES module. Jika package.json Anda tidak punya "type": "module", beri nama file eleventy.config.mjs.

2. Simpan ID formulir di global data

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

   Global data tersedia di setiap template sebagai ikiform. URL terima kasih harus absolut dan https:, karena Ikiform mengabaikan redirect lain.

3. Gunakan

   ---
   title: Contact
   ---
   
   Questions about pricing? Write to us.
   
   {% ikiform ikiform.formId, ikiform.thanks, "Pricing question" %}

   File Markdown diproses dengan Liquid secara default, jadi tag-nya berfungsi di sana apa adanya. Taruh di barisnya sendiri dan jangan beri indentasi empat spasi, atau Markdown akan merendernya sebagai code block. Tag yang sama berfungsi di file .njk dan .liquid.

_redirect hanya diikuti jika formulir punya domain yang diizinkan yang mencakup situs Anda. Lihat Aturan untuk _redirect.

Domain yang diizinkan

Cantumkan domain produksi dan setiap host pratinjau. Situs Eleventy biasanya di-deploy ke Netlify atau Cloudflare Pages, yang menangani pratinjau secara berbeda.

• Jangan pernah menambahkan netlify.app atau pages.dev saja. Setiap situs di host itu akan cocok, termasuk milik orang lain.

Daftar periksa pengujian

1. Jalankan dev server dan lihat source halamannya. Formulir seharusnya berupa HTML biasa, bukan di dalam blok <pre><code>.
2. Kirim secara lokal dengan localhost di domain yang diizinkan dan pastikan kirimannya tercantum di Ikiform.
3. Deploy pratinjau dan kirim lagi dari host pratinjau.
4. Kirim di produksi dan pastikan Anda mendarat di halaman terima kasih Anda.

Pemecahan masalah

Terkait

• HugoPartial dan shortcode untuk file konten.
• JekyllInclude, dan penyiapan GitHub Pages.
• Formulir HTMLRedirect, field reserved, dan honeypot.
• Domain yang diizinkanCara origin dicocokkan, dan apa akibat ketidakcocokan.