ID del formulario

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

  1. Añade los ajustes a _config.yml

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

  2. Crea el include

    _includes/ikiform-form.html
    {%- 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>

  3. Úsalo

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

  4. Añade la página de agradecimiento

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

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 formularioAñadir a Allowed domains
bundle exec jekyll servelocalhost. Coincide con http://localhost:4000: Ikiform solo compara el nombre de host, nunca el puerto.
GitHub Pagesusername.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 Pagesexample.com, que también cubre www.example.com
Netlifyyour-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é vesPor quéSolución
Could not locate the included file 'ikiform-form.html'El archivo no está en _includes, o el nombre es distintoMuévelo a _includes/ikiform-form.html.
La página de agradecimiento de Ikiform en lugar de /thanks/ en el sitio en producciónFalta url en _config.yml, o el formulario no tiene dominios permitidosPon tu dirección https: en url y añade tu dominio.
404 not_found después de enviarsite.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_mismatchLa página que envió no está entre los dominios permitidos del formularioAñade el host de la tabla de arriba. Si eliges Reject, esos mismos envíos reciben 403 origin_not_allowed.

Relacionado