Squarespace

Form block Squarespace menyimpan kiriman di Squarespace dan mengirimnya ke koneksi yang didukungnya. Tidak ada pengaturan untuk URL action eksternal. Code block dalam mode HTML merender formulir Anda sendiri di halaman, jadi bisa mengirim langsung ke Ikiform.

Tambahkan code block

1. Sisipkan Code block

   Edit halaman, tambahkan blok, dan pilih Code. Atur Mode ke HTML dan matikan Display Source; jika tidak, formulir tampil sebagai teks.

2. Tempel formulir

   <form id="contact" class="ikiform" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
     <label>Name <input name="name" autocomplete="name" required></label>
     <label>Email <input name="email" type="email" autocomplete="email" required></label>
     <label>Message <textarea name="message" rows="5"></textarea></label>
     <input type="hidden" name="_redirect" value="https://example.com/thank-you">
     <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
     <button type="submit" class="sqs-block-button-element">Send</button>
     <p role="status" data-status></p>
   </form>
   
   <style>
     .ikiform { display: grid; gap: 12px; max-width: 480px; }
     .ikiform label { display: grid; gap: 4px; }
     .ikiform input, .ikiform textarea { font: inherit; padding: 10px 12px; border: 1px solid currentColor; }
   </style>

   sqs-block-button-element memakai ulang gaya tombol situs Anda. font: inherit dan currentColor mengambil font dan warna teks bagian tersebut, jadi formulir cocok di bagian terang maupun gelap.

3. Buat halaman terima kasih

   Tambahkan halaman di bawah Not linked agar tidak muncul di navigasi Anda, dan gunakan URL lengkapnya sebagai _redirect. Atau atur sebagai Redirect after submit di pengaturan formulir dan hapus input tersembunyinya.

_redirect hanya diikuti jika formulir punya domain yang diizinkan yang mencakup domain halaman tersebut. Tanpanya, pengunjung melihat halaman terima kasih hosted milik Ikiform.

Tetap di halaman (Core ke atas)

Untuk menampilkan hasil tanpa meninggalkan halaman, tempel skrip ini di bawah formulir di code block yang sama. Skrip mengirim dengan fetch, menulis pesan Ikiform ke baris status di bawah tombol, dan mengabaikan _redirect. Formulir tetap mengirim secara normal jika skrip gagal dimuat.

<script>
  const form = document.querySelector("#contact");
  const button = form.querySelector("button");
  const status = form.querySelector("[data-status]");

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    button.disabled = true;
    status.textContent = "Sending";
    try {
      const response = await fetch(form.action, {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(form),
      });
      const result = await response.json();
      const fields = Object.entries(result.ok ? {} : result.error.fields ?? {});
      const problems = fields.map(([name, messages]) => name + ": " + messages[0]).join(". ");
      status.textContent = result.ok ? "Thanks, we got it." : problems || result.error.message;
      if (result.ok) form.reset();
    } catch {
      status.textContent = "Couldn't reach the server. Try again.";
    } finally {
      button.disabled = false;
    }
  });
</script>

Error field ditulis di baris yang sama dengan nama field di depannya, seperti email: This field is required. Untuk pesan di bawah setiap field, gunakan slot dari JavaScript biasa. Formulir yang pemeriksaan spamnya Ikiform sebaiknya tetap memakai versi biasa, karena kiriman fetch mendapat 403 challenge_required alih-alih halaman pemeriksaan.

Domain yang diizinkan

Squarespace menyajikan setiap situs di domain bawaan serta domain apa pun yang Anda hubungkan.

• Jangan pernah menambahkan squarespace.com saja. Setiap situs di host itu akan cocok, termasuk milik orang lain.

Daftar periksa pengujian

1. Buka halaman di jendela privat. Code block mungkin tidak dirender saat Anda masuk, meskipun pengunjung melihatnya.
2. Kirim formulir di domain bawaan dan di domain yang terhubung, lalu pastikan kedua kiriman tercantum di Ikiform.
3. Pastikan Anda mendarat di halaman terima kasih Not linked milik Anda, bukan milik Ikiform.
4. Di Basic, pastikan formulir tetap mengirim. Formulir ini tidak butuh skrip apa pun.

Pemecahan masalah

Terkait

• Formulir HTMLRedirect, field reserved, dan honeypot.
• JavaScript biasafetch dengan error inline.
• Pembuat situsEmbed yang berfungsi di pembuat situs mana pun.
• Domain yang diizinkanCara origin dicocokkan, dan apa akibat ketidakcocokan.