Hugo

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

1. Adicione o id do formulário à sua configuração

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

2. Crie o 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>

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

3. Envolva em um shortcode

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

4. Use

   Em qualquer arquivo de conteúdo:

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

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

Domínios permitidos

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

• 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

Relacionados

• JekyllUm include e a configuração do GitHub Pages.
• EleventyUm shortcode para Nunjucks, Liquid e Markdown.
• Formulários HTMLRedirecionamentos, campos reservados e o honeypot.
• Domínios permitidosComo as origens são comparadas e o que acontece quando não correspondem.