Hugo

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

1. Añade el id del formulario a tu configuración

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

2. Crea el partial

   {{ $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.

3. Envuélvelo en un shortcode

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

4. Úsalo

   En cualquier archivo de contenido:

   ---
   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:

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

Dominios permitidos

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

• 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

Relacionado

• JekyllUn include y la configuración de GitHub Pages.
• EleventyUn shortcode para Nunjucks, Liquid y Markdown.
• Formularios HTMLRedirecciones, campos reservados y el honeypot.
• Dominios permitidosCómo se comparan los orígenes y qué pasa cuando no coinciden.