ID formulir

Jekyll

Include Jekyll yang merender formulir Ikiform dari _config.yml, dengan redirect yang berfungsi di GitHub Pages dan domain kustom.

Situs Jekyll bersifat statis, cocok untuk kiriman formulir biasa. Simpan formulir di include agar setiap halaman memakai markup yang sama dan ID formulir ada di satu tempat.

Penyiapan

  1. Tambahkan pengaturan ke _config.yml

    _config.yml
    url: "https://example.com"
ikiform:
  form_id: frm_xxxxxxxxxxxxxxxx
  thanks: /thanks/

    Include membuat redirect dengan absolute_url, yang butuh url. Tanpanya, redirect hanya berupa path, dan Ikiform mengabaikan apa pun yang bukan URL https: lengkap. Di situs proyek GitHub Pages, atur juga baseurl: /repo; absolute_url akan menambahkannya untuk Anda.

  2. Buat 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. Gunakan

    contact.md
    ---
layout: page
title: Contact
---

Questions about pricing? Write to us.

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

    Include ini berfungsi di page, post, dan layout. Berikan form_id untuk memakai formulir lain, thanks untuk redirect lain, dan button untuk teks tombol.

  4. Tambahkan halaman terima kasih

    thanks.md
    ---
layout: page
title: Thanks
permalink: /thanks/
---

Thanks, we got your message.

_redirect hanya diikuti jika formulir punya domain yang diizinkan yang mencakup situs Anda. Lihat Aturan untuk _redirect.

Domain yang diizinkan

GitHub Pages adalah host yang umum untuk Jekyll, jadi Anda sering butuh dua entri: host github.io dan domain kustom Anda.

Tempat formulir berjalanTambahkan ke Domain yang diizinkan
bundle exec jekyll servelocalhost. Ini cocok dengan http://localhost:4000: Ikiform hanya membandingkan nama host, tidak pernah port.
GitHub Pagesusername.github.io. Situs proyek di username.github.io/repo memakai host yang sama, jadi satu entri mencakup semuanya.
Domain kustom di GitHub Pagesexample.com, yang juga mencakup www.example.com
Netlifyyour-site.netlify.app. Deploy preview (deploy-preview-12--your-site.netlify.app) dan branch deploy (branch--your-site.netlify.app) bukan subdomainnya, jadi tambahkan host pratinjau persisnya selama Anda menguji.
  • Jangan pernah menambahkan github.io saja. Setiap situs di host itu akan cocok, termasuk milik orang lain.

Daftar periksa pengujian

  1. Jalankan bundle exec jekyll serve dan lihat source halamannya. action seharusnya berakhir dengan ID formulir Anda.
  2. Kirim secara lokal. Anda akan mendarat di halaman terima kasih Ikiform: jekyll serve mengatur url ke http://localhost:4000, dan redirect http: tidak diikuti.
  3. Push, tunggu build Pages selesai, lalu kirim dari username.github.io. Pastikan kirimannya tidak ditandai spam.
  4. Kirim di domain kustom Anda dan pastikan Anda mendarat di /thanks/.

Pemecahan masalah

Yang Anda lihatAlasanSolusi
Could not locate the included file 'ikiform-form.html'File-nya tidak ada di _includes, atau namanya berbedaPindahkan ke _includes/ikiform-form.html.
Halaman terima kasih Ikiform, bukan /thanks/, di situs liveurl tidak ada di _config.yml, atau formulir tidak punya domain yang diizinkanAtur url ke alamat https: Anda dan tambahkan domain Anda.
404 not_found setelah dikirimsite.ikiform.form_id kosong, jadi action berakhir di /f/Periksa indentasi di bawah ikiform: di _config.yml.
Kiriman masuk ke filter spam dengan origin_mismatchHalaman yang mengirim tidak ada di domain yang diizinkan formulirTambahkan host dari tabel di atas. Jika Reject dipilih, kiriman yang sama mendapat 403 origin_not_allowed.

Terkait