# Jekyll

> Um include do Jekyll que renderiza um formulário do Ikiform a partir do _config.yml, com redirecionamentos que funcionam no GitHub Pages e em domínios próprios.

Sites Jekyll são estáticos, o que combina com um envio de formulário comum. Mantenha o formulário em um include para que todas as páginas usem o mesmo markup e o id do formulário fique em um só lugar.

## Configuração

### Passo 1: Adicione as configurações ao _config.yml

`_config.yml`:

```yaml
url: "https://example.com"
ikiform:
  form_id: frm_xxxxxxxxxxxxxxxx
  thanks: /thanks/
```

O include monta o redirecionamento com `absolute_url`, que precisa de `url`. Sem ele, o redirecionamento é só um caminho, e o Ikiform ignora qualquer coisa que não seja uma URL `https:` completa. Em um site de projeto do GitHub Pages, defina também `baseurl: /repo`; o `absolute_url` o adiciona para você.

### Passo 2: Crie o include

`_includes/ikiform-form.html`:

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

### Passo 3: Use

`contact.md`:

```liquid
---
layout: page
title: Contact
---

Questions about pricing? Write to us.

{% include ikiform-form.html subject="Pricing question" %}
```

O include funciona em páginas, posts e layouts. Passe `form_id` para usar outro formulário, `thanks` para outro redirecionamento e `button` para o texto do botão.

### Passo 4: Adicione a página de agradecimento

`thanks.md`:

```liquid
---
layout: page
title: Thanks
permalink: /thanks/
---

Thanks, we got your message.
```

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

O GitHub Pages é o host mais comum para Jekyll, então muitas vezes você vai precisar de duas entradas: o host `github.io` e o seu domínio próprio.

| Onde o formulário roda | Adicione em Allowed domains |
| --- | --- |
| `bundle exec jekyll serve` | `localhost`. Ele corresponde a `http://localhost:4000`: o Ikiform compara só o nome do host, nunca a porta. |
| GitHub Pages | `username.github.io`. Sites de projeto em `username.github.io/repo` usam o mesmo host, então uma entrada cobre todos. |
| Domínio próprio no GitHub Pages | `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. |

- Nunca adicione `github.io` sozinho. Todo site naquele host corresponderia, inclusive os de outras pessoas.

## Checklist de teste

1. Rode `bundle exec jekyll serve` e veja o código-fonte da página. O `action` deve terminar no id do seu formulário.
2. Envie localmente. Você vai cair na página de agradecimento do Ikiform: o `jekyll serve` define `url` como `http://localhost:4000`, e redirecionamentos `http:` não são seguidos.
3. Faça push, espere o build do Pages e envie a partir de `username.github.io`. Confirme que o envio não está marcado como spam.
4. Envie no seu domínio próprio e confirme que você chega a `/thanks/`.

## Solução de problemas

| O que você vê | Por quê | Correção |
| --- | --- | --- |
| `Could not locate the included file 'ikiform-form.html'` | O arquivo não está em `_includes`, ou o nome é diferente | Mova-o para `_includes/ikiform-form.html`. |
| A página de agradecimento do Ikiform em vez de `/thanks/` no site publicado | Falta `url` no `_config.yml`, ou o formulário não tem domínios permitidos | Defina `url` como o seu endereço `https:` e adicione o seu domínio. |
| `404 not_found` depois do envio | `site.ikiform.form_id` está vazio, então o action termina em `/f/` | Confira a indentação abaixo de `ikiform:` no `_config.yml`. |
| 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.
- [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.