Eleventy

O Eleventy gera HTML estático, então o formulário envia sem nenhum JavaScript no cliente. Um shortcode mantém o markup em um só lugar e funciona igual em arquivos Nunjucks, Liquid e Markdown.

Configuração

1. Adicione o 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"),
     );
   }

   • As linhas são unidas sem linhas em branco de propósito. No Markdown, uma linha em branco encerra um bloco HTML, e o resto do formulário seria tratado como texto.
   • Isto usa a sintaxe de ES modules. Se o seu package.json não tem "type": "module", chame o arquivo de eleventy.config.mjs.

2. Guarde o id do formulário nos dados globais

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

   Os dados globais ficam disponíveis em todo template como ikiform. A URL de agradecimento precisa ser absoluta e https:, porque o Ikiform ignora outros redirecionamentos.

3. Use

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

   Arquivos Markdown são processados com Liquid por padrão, então a tag funciona ali como está escrita. Mantenha-a em uma linha própria e não a indente com quatro espaços, ou o Markdown a renderiza como bloco de código. A mesma tag funciona em arquivos .njk e .liquid.

_redirect só é seguido quando o formulário tem domínios permitidos que incluem o seu site. Veja Regras para _redirect.

Domínios permitidos

Liste a produção e cada host de preview. Sites Eleventy costumam ser publicados na Netlify ou no Cloudflare Pages, que tratam previews de formas diferentes.

• Nunca adicione netlify.app ou pages.dev sozinhos. Todo site naquele host corresponderia, inclusive os de outras pessoas.

Checklist de teste

1. Rode o servidor de desenvolvimento e veja o código-fonte da página. O formulário deve ser HTML puro, não dentro de um bloco <pre><code>.
2. Envie localmente com localhost nos domínios permitidos e confirme que o envio aparece no Ikiform.
3. Faça deploy de um preview e envie de novo a partir do host de preview.
4. Envie em produção e confirme que você chega à sua página de agradecimento.

Solução de problemas

Relacionados

• HugoUm partial e um shortcode para arquivos de conteúdo.
• JekyllUm include e a configuração do GitHub Pages.
• Formulários HTMLRedirecionamentos, campos reservados e o honeypot.
• Domínios permitidosComo as origens são comparadas e o que acontece quando não correspondem.