# Hugo

> Un partial y un shortcode de Hugo que renderizan un formulario de Ikiform a partir de los params del sitio, en layouts y en contenido Markdown.

Hugo genera HTML, y un envío de formulario normal es todo lo que Ikiform necesita, así que no hay que añadir JavaScript. La única trampa propia de Hugo es Markdown: el renderizador de Hugo elimina el HTML de los archivos de contenido salvo que actives `markup.goldmark.renderer.unsafe`, y un formulario pegado se convierte en `<!-- raw HTML omitted -->`. Un shortcode mantiene el HTML en una plantilla.

## Configúralo

### Paso 1: Añade el id del formulario a tu configuración

`hugo.toml`:

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

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

`baseURL` debe ser tu dirección `https:` real. El partial la usa para convertir `thanks` en una URL absoluta, e Ikiform solo sigue redirecciones `https:`.

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

Llámalo siempre con un `dict`, aunque esté vacío. Todas las claves son opcionales y, si faltan, se usan los params del sitio.

### Paso 3: Envuélvelo en un shortcode

`layouts/_shortcodes/ikiform.html`:

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

Hugo 0.146 movió las plantillas a `layouts/_partials` y `layouts/_shortcodes`. En versiones anteriores, usa `layouts/partials` y `layouts/shortcodes`.

### Paso 4: Úsalo

En cualquier archivo de contenido:

`content/contact.md`:

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

Questions about pricing? Write to us.

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

O en un layout, para tener un formulario en todas las páginas:

`layouts/_partials/footer.html`:

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

Añade una página `content/thanks.md` para la redirección. Ikiform solo sigue `_redirect` cuando el formulario tiene dominios permitidos que incluyen tu sitio; sin ellos, los visitantes ven la página de agradecimiento de Ikiform. Consulta [Reglas de _redirect](https://ikiform.com/es/docs/html.md#redirect-rules).

## Dominios permitidos

Incluye tu dominio de producción y todos los lugares donde previsualizas el sitio generado.

| Dónde funciona el formulario | Añadir a Allowed domains |
| --- | --- |
| `hugo server` | `localhost`. Coincide con `http://localhost:1313`: Ikiform solo compara el nombre de host, nunca el puerto. |
| Tu dominio | `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. |
| Cloudflare Pages | `your-project.pages.dev`. Las URL de vista previa como `abc123.your-project.pages.dev` son subdominios suyos, así que ya coinciden. |
| 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. |

- Nunca añadas `netlify.app`, `pages.dev` ni `github.io` solos. Coincidiría cualquier sitio de ese host, incluidos los de otras personas.

## Lista de pruebas

1. Ejecuta `hugo server`, abre la página y mira el código fuente. Deberías ver el `<form>`, no `<!-- raw HTML omitted -->`.
2. Envía en local con `localhost` en los dominios permitidos. Llegarás a la página de agradecimiento de Ikiform, porque `absURL` da una dirección `http://localhost` y solo se siguen las redirecciones `https:`.
3. Despliega una vista previa, envía desde ella y confirma que el envío aparece en Ikiform sin marcarse como spam.
4. Envía en tu dominio de producción y confirma que llegas a `/thanks/`.

## Solución de problemas

| Qué ves | Por qué | Solución |
| --- | --- | --- |
| `<!-- raw HTML omitted -->` donde debería estar el formulario | El formulario se pegó directamente en Markdown | Usa el shortcode. |
| Hugo falla con `template for shortcode "ikiform" not found` | El archivo del shortcode está en una carpeta que tu versión de Hugo no lee | Usa `layouts/_shortcodes` en 0.146 y posteriores, y `layouts/shortcodes` en versiones anteriores. |
| La página de agradecimiento de Ikiform en lugar de `/thanks/` en producción | No hay dominios permitidos, o `baseURL` es `http:` | Añade tu dominio y pon tu dirección `https:` en `baseURL`. |
| `404 not_found` después de enviar | Falta `params.ikiform.formId`, así que el action termina en `/f/` | Define el id del formulario en `hugo.toml`. |
| 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

- [Jekyll](https://ikiform.com/es/docs/guides/jekyll.md): Un include y la configuración de GitHub Pages.
- [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.