Cara menambahkan daftar tunggu ke situs Framer

Formulir Framer tidak bisa mengirim ke URL luar, tetapi bisa mengirim setiap kiriman ke webhook, jadi jalur tanpa kode adalah formulir Framer dengan endpoint Ikiform Anda sebagai webhook. Untuk peluncuran publik, gunakan code component kecil: browser mengirim langsung, jadi rate limit per pengunjung, domain yang diizinkan, dan honeypot dari Ikiform tetap berfungsi.

Banyak halaman pra-peluncuran dibangun di Framer, karena halamannya sendiri bisa selesai dalam satu sore. Formulir daftar tunggu adalah bagian yang kurang jelas. Blok formulir Framer tidak bisa mengubah action-nya, jadi Anda memilih antara dua jalur yang berperilaku berbeda begitu trafik sungguhan datang.

Apa bedanya di Framer

• Tidak ada action kustom. Formulir Framer mengirim ke tujuan milik Framer: penyimpanannya sendiri, email, atau Webhook. Webhook adalah satu-satunya cara menjangkau backend luar tanpa kode.
• Webhook datang dari server Framer, bukan dari pengunjung. Ikiform melihat alamat IP Framer dan tidak ada header Origin. Itu mematikan tiga perlindungan: domain yang diizinkan, rate limit per pengunjung, dan pemeriksaan manusia.
• Percobaan ulang. Framer menganggap apa pun selain 2xx sebagai kegagalan dan mencoba ulang hingga lima kali. Framer tidak mengikuti redirect. Ikiform menjawab kiriman JSON dengan 201, jadi pendaftaran yang tersimpan langsung dianggap sukses sejak percobaan pertama.
• Code component adalah React sungguhan. Komponen ini berjalan di browser pengunjung di situs yang sudah dipublikasikan, jadi formulir di dalamnya mengirim seperti halaman web lain.

Pilih jalur

Jalur webhook sudah cukup untuk halaman yang Anda bagikan ke beberapa ratus orang. Jika Anda akan membagikan halaman di tempat besar, gunakan code component: lonjakan pendaftaran bot lewat server Framer hanya bisa dihentikan oleh penilaian spam.

Jalur 1: formulir Framer dengan webhook

1. Tambahkan formulir ke halaman dengan satu input Email. Di pengaturan input, atur namanya ke email. Framer mengirim nama setiap input sebagai key JSON, dan Ikiform memakai email untuk reply-to dan pemeriksaan domain sekali pakai.
2. Pilih formulirnya. Di samping Send To, pilih Add… › Webhook dan tempel endpoint Anda, https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx. Signing secret bersifat opsional; Ikiform tidak memeriksa tanda tangan Framer.
3. Di Ikiform, biarkan Allowed domains kosong dan spam check mati. Jika salah satunya aktif, setiap kiriman Framer akan ditandai atau ditolak, karena tidak membawa origin dan tidak bisa menjalankan pemeriksaan browser.
4. Atur rate limit ke Relaxed, atau Custom di hari peluncuran. Standard menghitung semua kiriman Framer sebagai satu pengunjung, dan seluruh formulir dibatasi 300 per menit.
5. Atur gaya state sukses formulir di Framer. State ini muncul saat Ikiform menjawab 201.

Jalur 2: code component

Di panel Assets, buka Code, buat file kode bernama WaitlistSignup, lalu tempel ini. Seret ke halaman dan atur Form ID di panel properti.

import { addPropertyControls, ControlType } from "framer";
import { type CSSProperties, type FormEvent, useRef, useState } from "react";

const box: CSSProperties = {
  font: "inherit",
  padding: "12px 14px",
  borderRadius: 10,
  border: "1px solid rgba(0, 0, 0, 0.15)",
};

interface Props {
  formId: string;
  buttonLabel: string;
  joinedText: string;
  source: string;
}

export default function WaitlistSignup({ formId, buttonLabel, joinedText, source }: Props) {
  const [status, setStatus] = useState<"idle" | "sending" | "joined">("idle");
  const [error, setError] = useState("");
  const key = useRef("");

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const body = new FormData(event.currentTarget);
    const ref = new URLSearchParams(window.location.search).get("ref");
    body.set("ref", (ref || source).slice(0, 40));
    key.current ||= crypto.randomUUID();
    setStatus("sending");
    setError("");
    try {
      const response = await fetch(`https://ikiform.com/f/${formId}`, {
        method: "POST",
        headers: { Accept: "application/json", "Idempotency-Key": key.current },
        body,
      });
      const result = await response.json();
      if (result.ok) return setStatus("joined");
      setError(result.error.fields?.email?.[0] ?? result.error.message);
    } catch {
      setError("Couldn't reach the server. Try again.");
    }
    setStatus("idle");
  }

  if (status === "joined") return <p role="status" style={{ margin: 0 }}>{joinedText}</p>;

  return (
    <form onSubmit={onSubmit} style={{ display: "flex", flexWrap: "wrap", gap: 8, width: "100%" }}>
      <input
        name="email"
        type="email"
        placeholder="you@company.com"
        aria-label="Email"
        autoComplete="email"
        required
        style={{ ...box, flex: "1 1 220px" }}
      />
      <input name="_gotcha" type="text" tabIndex={-1} autoComplete="off" hidden />
      <button type="submit" disabled={status === "sending"} style={{ ...box, cursor: "pointer" }}>
        {status === "sending" ? "Joining" : buttonLabel}
      </button>
      {error ? <p role="alert" style={{ flexBasis: "100%", margin: 0 }}>{error}</p> : null}
    </form>
  );
}

addPropertyControls(WaitlistSignup, {
  formId: { type: ControlType.String, title: "Form ID", defaultValue: "frm_xxxxxxxxxxxxxxxx" },
  buttonLabel: { type: ControlType.String, title: "Button", defaultValue: "Join the waitlist" },
  joinedText: { type: ControlType.String, title: "Joined text", defaultValue: "You're on the list." },
  source: { type: ControlType.String, title: "Source", defaultValue: "framer" },
});

• Panel properti menampilkan label tombol, teks setelah bergabung, dan Source default. Taruh satu instance di hero dengan hero dan satu lagi di footer dengan footer, dan Anda akan melihat mana yang lebih banyak menghasilkan pendaftaran.
• ?ref= di URL halaman lebih diutamakan daripada default, jadi link kampanye menandai dirinya sendiri.
• Idempotency key dibuat saat pengiriman pertama dan dipakai ulang pada percobaan ulang dari kunjungan yang sama, jadi ketukan ganda di ponsel hanya menyimpan satu pendaftaran.
• window hanya dibaca di dalam submit handler. Framer merender komponen di server lebih dulu, dan menyentuh window saat render akan merusaknya.

Pengaturan Ikiform untuk komponen

Tambahkan ini di tab Fields formulir, agar email wajib diisi dan ref diizinkan:

{
  "version": 1,
  "title": "Waitlist",
  "fields": [
    { "id": "email", "type": "email", "label": "Email", "required": true },
    { "id": "ref", "type": "text", "label": "Source", "validation": { "max_length": 40 } }
  ]
}

• Di Allowed domains, tambahkan your-project.framer.app dan domain kustom Anda. Jangan pernah menambahkan framer.app saja; setiap situs Framer akan cocok.
• Biarkan spam check mati. Komponen mengirim dengan fetch dan tidak mengambil token, jadi formulir dengan pemeriksaan aktif akan menjawab 403 challenge_required.
• Pertahankan rate limit Standard. Setiap pengunjung kini dihitung masing-masing.

Pastikan berfungsi

1. Publikasikan situsnya. Webhook dan code component hanya mengirim dari situs yang sudah dipublikasikan, bukan dari preview editor.
2. Kirim formulir di domain framer.app Anda, lalu lagi di domain kustom Anda.
3. Buka Submissions di dashboard. Kiriman baru ada di sana dengan setiap field yang Anda kirim.
4. Untuk komponen, buka halaman dengan ?ref=test dan pastikan pendaftaran menampilkan ref sebagai test.
5. Periksa inbox setiap penerima notifikasi. Masing-masing mendapat email berisi field-field tersebut, dan Reply ditujukan ke pengirim 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.

Jebakan

Setup Framer lengkap, termasuk versi formulir kontak, ada di panduan dokumentasi Framer. Ekspor daftar dan pengiriman email peluncuran ada di panduan utama.

Pertanyaan