# Eleventy

> Um shortcode do Eleventy que renderiza um formulário do Ikiform em templates Nunjucks, Liquid e Markdown, com o id do formulário guardado nos dados globais.

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

### Passo 1: Adicione o 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"),
  );
}
```

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

### Passo 2: Guarde o id do formulário nos dados globais

`_data/ikiform.js`:

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

### Passo 3: Use

`contact.md`:

```text
---
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](https://ikiform.com/pt-br/docs/html.md#redirect-rules).

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

| Onde o formulário roda | Adicione em Allowed domains |
| --- | --- |
| `npx @11ty/eleventy --serve` | `localhost`. Ele corresponde a `http://localhost:8080`: o Ikiform compara só o nome do host, nunca a porta. |
| Seu domínio | `example.com`, que também cobre `www.example.com` |
| Netlify | `your-site.netlify.app`. Deploy previews (`deploy-preview-12--your-site.netlify.app`) e branch deploys (`branch--your-site.netlify.app`) não são subdomínios dele, então adicione o host exato do preview enquanto testa um. |
| Cloudflare Pages | `your-project.pages.dev`. URLs de preview como `abc123.your-project.pages.dev` são subdomínios dele, então já correspondem. |

- 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

| O que você vê | Por quê | Correção |
| --- | --- | --- |
| O formulário aparece como código na página | O shortcode está indentado com quatro espaços em um arquivo Markdown | Mova a tag para o início da linha. |
| Metade do formulário é renderizada como parágrafos | A saída do shortcode contém uma linha em branco, que encerra o bloco HTML do Markdown | Una as linhas sem linhas em branco, como na configuração acima. |
| `SyntaxError: Unexpected token 'export'` quando o Eleventy inicia | A configuração usa sintaxe de ES modules em um projeto CommonJS | Renomeie para `eleventy.config.mjs`, ou adicione `"type": "module"` ao `package.json`. |
| O Nunjucks ou o Liquid não encontra a tag `ikiform` | O Eleventy não carregou o arquivo de configuração | Confira se o arquivo está na raiz do projeto e se chama `eleventy.config.js` ou `.mjs`. |
| Os envios chegam no filtro de spam com `origin_mismatch` | A página que enviou não está nos domínios permitidos do formulário | Adicione o host da tabela acima. Com **Reject** escolhido, os mesmos envios recebem `403 origin_not_allowed`. |

## Relacionados

- [Hugo](https://ikiform.com/pt-br/docs/guides/hugo.md): Um partial e um shortcode para arquivos de conteúdo.
- [Jekyll](https://ikiform.com/pt-br/docs/guides/jekyll.md): Um include e a configuração do GitHub Pages.
- [Formulários HTML](https://ikiform.com/pt-br/docs/html.md): Redirecionamentos, campos reservados e o honeypot.
- [Domínios permitidos](https://ikiform.com/pt-br/docs/spam.md#allowed-domains): Como as origens são comparadas e o que acontece quando não correspondem.