# Hugo

> Um partial e um shortcode do Hugo que renderizam um formulário do Ikiform a partir dos params do site, em layouts e em conteúdo Markdown.

O Hugo gera HTML puro, e um envio de formulário comum é tudo de que o Ikiform precisa, então não há JavaScript para adicionar. O único detalhe específico do Hugo é o Markdown: o renderizador do Hugo descarta HTML bruto dos arquivos de conteúdo, a menos que você ative `markup.goldmark.renderer.unsafe`, e um formulário colado vira `<!-- raw HTML omitted -->`. Um shortcode mantém o HTML em um template.

## Configuração

### Passo 1: Adicione o id do formulário à sua configuração

`hugo.toml`:

```toml
baseURL = "https://example.com/"

[params.ikiform]
formId = "frm_xxxxxxxxxxxxxxxx"
thanks = "/thanks/"
```

`baseURL` precisa ser o seu endereço `https:` real. O partial transforma `thanks` em uma URL absoluta com ele, e o Ikiform só segue redirecionamentos `https:`.

### Passo 2: Crie o partial

`layouts/_partials/ikiform-form.html`:

```html
{{ $id := .id | default site.Params.ikiform.formId }}
{{ $thanks := .thanks | default site.Params.ikiform.thanks }}
<form class="ikiform" action="https://ikiform.com/f/{{ $id }}" method="post">
  <label>Email <input name="email" type="email" autocomplete="email" required></label>
  <label>Message <textarea name="message" rows="5"></textarea></label>
  {{ with .subject }}<input type="hidden" name="_subject" value="{{ . }}">{{ end }}
  {{ with $thanks }}<input type="hidden" name="_redirect" value="{{ . | absURL }}">{{ end }}
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <button type="submit">{{ .button | default "Send" }}</button>
</form>
```

Sempre chame com um `dict`, mesmo que vazio. Todas as chaves são opcionais e usam os params do site como padrão.

### Passo 3: Envolva em um shortcode

`layouts/_shortcodes/ikiform.html`:

```html
{{ partial "ikiform-form.html" (dict "id" (.Get "id") "subject" (.Get "subject") "button" (.Get "button")) }}
```

O Hugo 0.146 moveu os templates para `layouts/_partials` e `layouts/_shortcodes`. Em versões anteriores, use `layouts/partials` e `layouts/shortcodes`.

### Passo 4: Use

Em qualquer arquivo de conteúdo:

`content/contact.md`:

```text
---
title: Contact
---

Questions about pricing? Write to us.

{{< ikiform subject="Pricing question" >}}
```

Ou em um layout, para ter um formulário em todas as páginas:

`layouts/_partials/footer.html`:

```html
<footer>
  {{ partial "ikiform-form.html" (dict "subject" "Footer enquiry") }}
</footer>
```

Adicione uma página `content/thanks.md` para o redirecionamento. O Ikiform só segue `_redirect` quando o formulário tem domínios permitidos que incluem o seu site; sem eles, os visitantes veem a página de agradecimento do Ikiform. Veja [Regras para _redirect](https://ikiform.com/pt-br/docs/html.md#redirect-rules).

## Domínios permitidos

Liste seu domínio de produção mais todos os lugares onde você faz preview do site gerado.

| Onde o formulário roda | Adicione em Allowed domains |
| --- | --- |
| `hugo server` | `localhost`. Ele corresponde a `http://localhost:1313`: 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. |
| GitHub Pages | `username.github.io`. Sites de projeto em `username.github.io/repo` usam o mesmo host, então uma entrada cobre todos. |

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

## Checklist de teste

1. Rode `hugo server`, abra a página e veja o código-fonte. Você deve ver o `<form>`, não `<!-- raw HTML omitted -->`.
2. Envie localmente com `localhost` nos domínios permitidos. Você vai cair na página de agradecimento do Ikiform, porque `absURL` gera um endereço `http://localhost` e só redirecionamentos `https:` são seguidos.
3. Faça deploy de um preview, envie a partir dele e confirme que o envio aparece no Ikiform e não está marcado como spam.
4. Envie no seu domínio de produção e confirme que você chega a `/thanks/`.

## Solução de problemas

| O que você vê | Por quê | Correção |
| --- | --- | --- |
| `<!-- raw HTML omitted -->` onde deveria estar o formulário | O formulário foi colado direto no Markdown | Use o shortcode. |
| O Hugo falha com `template for shortcode "ikiform" not found` | O arquivo do shortcode está em uma pasta que a sua versão do Hugo não lê | Use `layouts/_shortcodes` a partir da 0.146, e `layouts/shortcodes` antes dela. |
| A página de agradecimento do Ikiform em vez de `/thanks/` em produção | Sem domínios permitidos, ou `baseURL` é `http:` | Adicione seu domínio e defina `baseURL` como o seu endereço `https:`. |
| `404 not_found` depois do envio | Falta `params.ikiform.formId`, então o action termina em `/f/` | Defina o id do formulário em `hugo.toml`. |
| 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

- [Jekyll](https://ikiform.com/pt-br/docs/guides/jekyll.md): Um include e a configuração do GitHub Pages.
- [Eleventy](https://ikiform.com/pt-br/docs/guides/eleventy.md): Um shortcode para Nunjucks, Liquid e Markdown.
- [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.