Menambahkan formulir kontak ke situs GitHub Pages

GitHub Pages hanya menyajikan file statis, jadi formulir yang mengirim ke situs Anda sendiri mendapat 405 Not Allowed dan pesannya hilang. Atur action formulir ke endpoint Ikiform, tambahkan username.github.io dan domain kustom apa pun ke Allowed domains, lalu redirect ke halaman terima kasih yang menyertakan path project site Anda. Tidak ada yang berubah di repository atau pengaturan Pages, dan tidak ada rahasia yang masuk ke repo publik.

Apa yang berbeda di GitHub Pages

GitHub Pages menerbitkan apa yang dibangun repository atau workflow Actions Anda, tidak lebih. Jekyll berjalan saat build jika Anda memakainya, lalu hasilnya berupa file. Tidak ada request handler, jadi mail() PHP, skrip Node, atau formulir CGI Python tidak akan berjalan, apa pun yang Anda commit.

Anda bisa melihat kegagalannya dari terminal. POST ke halaman mana pun di situs Pages mendapat ini:

curl -i -X POST -d "message=hello" https://ada.github.io/notebook/contact.html

HTTP/2 405
server: Varnish
content-length: 131

<html>
<head><title>405 Not Allowed</title></head>

Empat hal lain membedakan Pages dari host statis lain, dan masing-masing menyentuh formulir kontak:

Formulirnya

Untuk situs yang ditulis manual, tambahkan contact.html di samping index.html. Contoh ini untuk project site di ada.github.io/notebook, jadi redirect-nya menyertakan /notebook/:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; form-action 'self' https://ikiform.com; connect-src 'self' https://ikiform.com"
    />
    <title>Contact</title>
  </head>
  <body>
    <h1>Get in touch</h1>
    <form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
      <label for="name">Name</label>
      <input id="name" name="name" autocomplete="name" required />

      <label for="email">Email</label>
      <input id="email" name="email" type="email" autocomplete="email" required />

      <label for="about">What is it about?</label>
      <select id="about" name="about">
        <option value="question">A question about the project</option>
        <option value="hire">Work together</option>
        <option value="other">Something else</option>
      </select>

      <label for="message">Message</label>
      <textarea id="message" name="message" rows="6" minlength="10" required></textarea>

      <input type="hidden" name="page" value="docs-home" />
      <input type="hidden" name="_redirect" value="https://ada.github.io/notebook/thanks.html" />
      <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
      <button type="submit">Send</button>
    </form>
  </body>
</html>

• Content-Security-Policy lewat <meta> bersifat opsional. Pertahankan jika Anda sudah punya, dan pastikan form-action dan connect-src menyertakan https://ikiform.com. Pages tidak bisa mengirim header itu untuk Anda.
• Select about memberi tahu alasan seseorang menulis sebelum Anda membuka pesannya. Ubah opsinya sesuai hal yang benar-benar sering ditanyakan orang kepada Anda.
• Input tersembunyi page mencatat di halaman mana formulir berada, yang berguna jika formulir yang sama ada di beberapa halaman dokumentasi.
• Pertahankan email sebagai nama field. Email notifikasi memakainya sebagai alamat reply-to.

Jika HTML yang sama di-deploy di beberapa path, atau Anda belum yakin path akhirnya, buat redirect di browser dari alamat halaman itu sendiri. Taruh ini setelah formulir:

<script>
  document.querySelectorAll('input[name="_redirect"]').forEach((input) => {
    input.value = new URL("thanks.html", document.baseURI).href;
  });
</script>

Memakai Jekyll? Jangan tulis URL secara hard-code sama sekali. Panduan Jekyll punya include yang membuatnya dengan absolute_url, yang menambahkan baseurl Anda untuk project site. Build dengan Astro, Vite, atau Hugo lewat workflow Actions? Atur base path framework ke /repo/ agar aset formulir termuat, dan pakai panduan Hugo atau framework Anda untuk formulirnya.

Domain yang diizinkan di github.io

Tambahkan ada.github.io, dengan username Anda sendiri. Domain ini mencakup user site dan setiap project site Anda, karena project site berbagi host yang sama. Tambahkan juga domain kustom jika Anda memakainya; example.com juga mencakup www.example.com.

Jangan pernah menambahkan github.io begitu saja. Setiap situs Pages akan cocok, termasuk salinan formulir Anda di situs orang lain. Dengan domain yang diizinkan diatur, _redirect ke https://ada.github.io/notebook/thanks.html diikuti; tanpanya, Ikiform mengabaikannya dan menampilkan halaman terima kasih hosted.

Mengganti link mailto:

Banyak situs Pages berawal dengan link mailto: di footer. Menggantinya dengan formulir mencegah scraper baru membaca alamat Anda dari halaman, dan pengunjung tanpa aplikasi email akhirnya bisa menghubungi Anda. Dua hal yang perlu diketahui sebelum menghapusnya:

• Alamat itu tetap ada di riwayat repository, dan di fork atau arsip halaman lama mana pun. Formulir membantu mulai sekarang; ia tidak membuat alamat yang sudah publik bertahun-tahun kembali privat.
• Balasan dikirim dari inbox Anda sendiri. Email notifikasi menjadikan pengirim sebagai alamat reply-to, jadi menekan Reply bekerja seperti link mailto:, hanya dari arah sebaliknya.

Ikiform tidak pernah mengirim email ke pengunjung, jadi sebutkan di halaman terima kasih kapan mereka bisa mengharapkan jawaban. Jika pesan yang masuk lebih banyak dari yang bisa Anda jawab lewat email, webhook bisa memasukkan setiap pesan ke Slack atau Discord.

Pastikan berfungsi

Jalankan ini di alamat github.io yang live. Pages tidak punya deploy preview, jadi uji dulu secara lokal dengan server lokal.

1. Tambahkan localhost dan username.github.io di Allowed domains, ditambah domain kustom Anda jika ada.
2. Commit contact.html dan thanks.html, tunggu deployment Pages selesai di tab Actions repository, lalu buka halaman live.
3. Kirim formulirnya. Anda seharusnya mendarat di thanks.html milik Anda, dengan path project di address bar.
4. Buka Submissions di dashboard. Kiriman baru ada di sana dengan setiap field yang Anda kirim.
5. Cek inbox setiap penerima notifikasi. Masing-masing mendapat email berisi field, dan Reply terkirim ke pengirim formulir jika formulir punya field email.
6. Tidak ada yang masuk? Ubah filter status di dashboard ke Spam. Spam mendapat jawaban sukses yang sama dengan kiriman asli.

Hal yang sering menjebak

Pertanyaan