# Jekyll

> Un include de Jekyll que renderiza un formulario de Ikiform a partir de _config.yml, con redirecciones que funcionan en GitHub Pages y en dominios propios.

Los sitios de Jekyll son estáticos, lo que encaja con un envío de formulario normal. Guarda el formulario en un include para que todas las páginas usen el mismo markup y el id del formulario esté en un solo lugar.

## Configúralo

### Paso 1: Añade los ajustes a _config.yml

`_config.yml`:

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

El include construye la redirección con `absolute_url`, que necesita `url`. Sin él, la redirección es solo una ruta, e Ikiform ignora todo lo que no sea una URL `https:` completa. En un sitio de proyecto de GitHub Pages, define también `baseurl: /repo`; `absolute_url` lo añade por ti.

### Paso 2: Crea el 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>
```

### Paso 3: Úsalo

`contact.md`:

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

Questions about pricing? Write to us.

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

El include funciona en páginas, entradas y layouts. Pasa `form_id` para usar otro formulario, `thanks` para otra redirección y `button` para el texto del botón.

### Paso 4: Añade la página de agradecimiento

`thanks.md`:

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

Thanks, we got your message.
```

`_redirect` solo se sigue cuando el formulario tiene dominios permitidos que incluyen tu sitio. Consulta [Reglas de _redirect](https://ikiform.com/es/docs/html.md#redirect-rules).

## Dominios permitidos

GitHub Pages es el hosting habitual de Jekyll, así que a menudo necesitarás dos entradas: el host `github.io` y tu dominio propio.

| Dónde funciona el formulario | Añadir a Allowed domains |
| --- | --- |
| `bundle exec jekyll serve` | `localhost`. Coincide con `http://localhost:4000`: Ikiform solo compara el nombre de host, nunca el puerto. |
| GitHub Pages | `username.github.io`. Los sitios de proyecto en `username.github.io/repo` usan el mismo host, así que una sola entrada los cubre todos. |
| Dominio propio en GitHub Pages | `example.com`, que también cubre `www.example.com` |
| Netlify | `your-site.netlify.app`. Los deploy previews (`deploy-preview-12--your-site.netlify.app`) y los branch deploys (`branch--your-site.netlify.app`) no son subdominios suyos, así que añade el host exacto de la vista previa mientras la pruebas. |

- Nunca añadas `github.io` solo. Coincidiría cualquier sitio de ese host, incluidos los de otras personas.

## Lista de pruebas

1. Ejecuta `bundle exec jekyll serve` y mira el código fuente de la página. El `action` debería terminar en el id de tu formulario.
2. Envía en local. Llegarás a la página de agradecimiento de Ikiform: `jekyll serve` pone `url` en `http://localhost:4000`, y las redirecciones `http:` no se siguen.
3. Haz push, espera al build de Pages y envía desde `username.github.io`. Confirma que el envío no se marca como spam.
4. Envía en tu dominio propio y confirma que llegas a `/thanks/`.

## Solución de problemas

| Qué ves | Por qué | Solución |
| --- | --- | --- |
| `Could not locate the included file 'ikiform-form.html'` | El archivo no está en `_includes`, o el nombre es distinto | Muévelo a `_includes/ikiform-form.html`. |
| La página de agradecimiento de Ikiform en lugar de `/thanks/` en el sitio en producción | Falta `url` en `_config.yml`, o el formulario no tiene dominios permitidos | Pon tu dirección `https:` en `url` y añade tu dominio. |
| `404 not_found` después de enviar | `site.ikiform.form_id` está vacío, así que el action termina en `/f/` | Revisa la sangría bajo `ikiform:` en `_config.yml`. |
| Los envíos llegan al filtro de spam con `origin_mismatch` | La página que envió no está entre los dominios permitidos del formulario | Añade el host de la tabla de arriba. Si eliges **Reject**, esos mismos envíos reciben `403 origin_not_allowed`. |

## Relacionado

- [Hugo](https://ikiform.com/es/docs/guides/hugo.md): Un partial y un shortcode para los archivos de contenido.
- [Eleventy](https://ikiform.com/es/docs/guides/eleventy.md): Un shortcode para Nunjucks, Liquid y Markdown.
- [Formularios HTML](https://ikiform.com/es/docs/html.md): Redirecciones, campos reservados y el honeypot.
- [Dominios permitidos](https://ikiform.com/es/docs/spam.md#allowed-domains): Cómo se comparan los orígenes y qué pasa cuando no coinciden.