Redirect ke halaman terima kasih setelah submit formulir

Formulir tidak bisa me-redirect dirinya sendiri; server yang menerima post menjawab 303 See Other dengan header Location, dan browser memuat halaman itu. Dengan Ikiform, atur Redirect after submit di pengaturan formulir, atau tambahkan input _redirect tersembunyi dengan URL https: di salah satu Allowed domains formulir. Tanpa keduanya, pengunjung mendarat di halaman terima kasih hosted milik Ikiform.

Contohnya adalah formulir permintaan demo yang halaman terima kasihnya sebenarnya langkah berikutnya: halaman itu meminta pengunjung memilih waktu. Itu membuat tujuan redirect lebih penting dari biasanya, dan memunculkan pertanyaan yang menjadi inti halaman ini: siapa yang boleh menentukan ke mana formulir mengirim orang.

Apa yang berbeda di sini

HTML tidak punya atribut untuk "pergi ke sini setelah submit". action adalah tujuan data, dan halaman sesudahnya adalah apa pun yang dijawab server. Jadi redirect selalu menjadi keputusan server penerima. Saat server itu adalah Ikiform, ada tepat dua cara untuk memengaruhinya, dan tingkat kepercayaannya tidak sama.

Aturan ketat pada _redirect ada karena nilainya datang bersama post. Tanpa aturan itu, siapa pun bisa menaruh URL formulir Anda di tautan yang mengirim lalu melempar pengunjung ke halaman phishing, itulah yang disebut open redirect.

Formulirnya

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <label for="email">Work email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />

  <label for="company">Company</label>
  <input id="company" name="company" autocomplete="organization" required />

  <label for="team_size">Team size</label>
  <select id="team_size" name="team_size">
    <option value="1-10">1 to 10</option>
    <option value="11-50">11 to 50</option>
    <option value="51+">51 or more</option>
  </select>

  <input type="hidden" name="_redirect" value="https://example.com/demo/next-step" />
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Request a demo</button>
</form>

Tambahkan example.com di Allowed domains formulir dan formulir ini mengirim, mendapat 303, dan mendarat di /demo/next-step. Halaman terima kasih adalah HTML biasa di situs Anda:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="robots" content="noindex" />
    <title>Thanks, pick a time</title>
  </head>
  <body>
    <h1>Thanks. One more step.</h1>
    <p>Pick a time for your demo. You'll get a calendar invite right away.</p>
    <p><a href="https://cal.example.com/acme/demo">Choose a time</a></p>
  </body>
</html>

• noindex menjauhkannya dari hasil pencarian. Tidak ada yang seharusnya mendarat di sana dari Google, dan halaman terima kasih yang muncul sebagai halaman masuk di analytics adalah tanda ada yang menautkannya.
• Refresh aman. Karena Ikiform menjawab dengan 303, browser memuat halaman ini dengan GET, dan memuat ulangnya tidak mengirim apa pun lagi.
• Jika Anda menghitung konversi di halaman ini, hitung sekali per sesi. Refresh atau bookmark memuatnya ulang, dan dashboard Ikiform adalah hitungan yang sebenarnya.

Redirect ke situs lain

Misalkan Anda ingin melewati halaman Anda sendiri dan langsung mengirim orang ke alat booking di domain lain, seperti cal.example.com atau domain layanan penjadwalan. Dengan _redirect, domain itu harus ada di Allowed domains, dan daftar itu punya tugas kedua: menentukan situs mana yang boleh mengirim ke formulir. Menambahkan domain layanan penjadwalan berarti halaman di domain itu juga bisa mengirim ke formulir Anda.

Gunakan Redirect after submit di pengaturan formulir. Pengaturan ini menerima URL apa pun, karena hanya workspace Anda yang bisa mengaturnya, dan membuat Allowed domains hanya mencantumkan situs Anda sendiri.

Halaman berbeda untuk formulir berbeda

Pengaturan dashboard berupa satu URL per formulir. Saat satu formulir muncul di beberapa halaman yang butuh halaman terima kasih berbeda, kosongkan pengaturan itu dan beri setiap halaman _redirect-nya sendiri. Halaman berbahasa Jerman mengirim pengunjung ke halaman terima kasih berbahasa Jerman:

<input type="hidden" name="_redirect" value="https://example.com/de/demo/danke" />

Menambahkan nilai ke redirect

Query string di _redirect dipertahankan, jadi Anda bisa meneruskan pilihan pengunjung ke halaman terima kasih. Atur nilainya di listener submit, yang berjalan setelah validasi browser dan sebelum formulir di-encode:

const form = document.querySelector("form");
const redirect = form.elements.namedItem("_redirect");

form.addEventListener("submit", () => {
  const size = form.elements.namedItem("team_size").value;
  const next = new URL("https://example.com/demo/next-step");
  next.searchParams.set("size", size);
  redirect.value = next.href;
});

Pengunjung tiba di /demo/next-step?size=11-50, dan halaman bisa menampilkan tautan booking yang tepat untuk ukuran tim itu. Batasi pada nilai yang tidak bersifat pribadi: query string tersimpan di riwayat browser, log server, dan analytics.

Redirect setelah submit dengan fetch

Panggilan fetch mendapat JSON, bukan redirect, jadi aturan redirect Ikiform tidak berlaku. Navigasikan sendiri saat jawabannya ok:

const response = await fetch(form.action, {
  method: "POST",
  headers: { Accept: "application/json" },
  body: new FormData(form),
});
const result = await response.json();
if (result.ok) location.assign("/demo/next-step");

Gunakan location.assign alih-alih location.replace jika tombol back seharusnya kembali ke formulir. Panduan tanpa reload berisi handler lengkap dengan error dan status loading.

Pastikan berfungsi

1. Di Allowed domains formulir, tambahkan domain situs Anda, ditambah localhost selama pengembangan. Biarkan kosong untuk menerima kiriman dari mana saja.
2. Kirim formulir dari halaman live Anda. Address bar menampilkan halaman terima kasih Anda, dan panel Network menunjukkan post dijawab dengan 303.
3. Tekan refresh di halaman terima kasih. Browser tidak meminta kirim ulang, dan dashboard tetap menampilkan satu kiriman.
4. Ubah _redirect ke alamat di domain yang tidak diizinkan lalu kirim. Anda mendarat di halaman terima kasih hosted milik Ikiform, tanpa error.
5. Buka Submissions di dashboard. Kiriman baru ada di sana dengan setiap field yang Anda kirim.

Hal yang sering menjebak

Aturan persisnya, dengan contoh URL yang lolos dan gagal, ada di formulir HTML. Ringkasan menjelaskan mengapa jawabannya 303 dan bukan 302 atau 200.

Pertanyaan