Framer

Formulir Framer tidak bisa mengirim ke URL action eksternal, tetapi bisa mengirim setiap kiriman ke webhook. Itu memberi dua jalan: pertahankan formulir Framer dan tambahkan Ikiform sebagai webhook-nya, atau pasang code component kecil yang mengirim dari browser pengunjung.

Formulir Framer dengan webhook

1. Beri nama input

   Framer mengirim JSON dengan nama setiap input sebagai key, jadi nama yang Anda berikan ke input menjadi nama field di Ikiform. Gunakan ID huruf kecil seperti email dan message, dan samakan dengan definisi field Anda jika ada.

2. Tambahkan Ikiform sebagai webhook

   Pilih formulir di kanvas. Di samping Send To di sidebar kanan, pilih Add… > Webhook dan tempel endpoint Anda. Framer mewajibkan URL https://, dan endpoint Anda sudah memakainya.

   https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx

   Framer bisa menandatangani request dengan secret. Ikiform tidak memeriksa header Framer-Signature, jadi secret bersifat opsional di sini.

3. Sesuaikan pengaturan formulir Ikiform

   • Biarkan Allowed domains kosong. Framer mengirim dari servernya tanpa header Origin, jadi jika domain diatur, setiap kiriman ditandai spam dengan origin_mismatch, atau ditolak dengan Reject.
   • Biarkan pemeriksaan spam mati. Kiriman JSON tanpa token mendapat 403 challenge_required, dan Framer tidak punya cara untuk menjalankan pemeriksaan.
   • Pilih rate limit Relaxed. Ikiform menghitung kiriman per alamat IP dan formulir, dan setiap kiriman berasal dari server Framer, bukan dari pengunjung Anda.

Framer menganggap respons apa pun selain 2xx sebagai kegagalan dan mencoba ulang hingga 5 kali. Ikiform menjawab 201 begitu kiriman disimpan. Kiriman yang ditolak Ikiform, seperti 422 validation_failed, akan gagal dengan cara yang sama di setiap percobaan ulang, jadi perbaiki penyebabnya alih-alih menunggu.

Code component

Code component merender formulir sungguhan di halaman Anda, jadi browser yang mengirimnya dan Ikiform melihat situs Anda sebagai origin. Di panel Assets, buka Code, buat file kode, lalu tempel:

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

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

export default function IkiformContact({ formId, successText }: { formId: string; successText: string }) {
  const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">("idle");
  const [message, setMessage] = useState("");

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setStatus("sending");
    try {
      const response = await fetch(`https://ikiform.com/f/${formId}`, {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(event.currentTarget),
      });
      const result = await response.json();
      if (result.ok) return setStatus("sent");
      setMessage(result.error.message);
    } catch {
      setMessage("Couldn't reach the server. Try again.");
    }
    setStatus("error");
  }

  if (status === "sent") return <p>{successText}</p>;

  return (
    <form onSubmit={onSubmit} style={{ display: "grid", gap: 12, width: "100%" }}>
      <input name="email" type="email" placeholder="Email" autoComplete="email" required style={field} />
      <textarea name="message" placeholder="Message" rows={4} style={field} />
      <input name="_gotcha" type="text" tabIndex={-1} autoComplete="off" hidden />
      {status === "error" ? <p role="alert">{message}</p> : null}
      <button type="submit" disabled={status === "sending"} style={field}>
        {status === "sending" ? "Sending" : "Send"}
      </button>
    </form>
  );
}

addPropertyControls(IkiformContact, {
  formId: { type: ControlType.String, title: "Form ID", defaultValue: "frm_xxxxxxxxxxxxxxxx" },
  successText: { type: ControlType.String, title: "Success text", defaultValue: "Thanks, we got it." },
});

• Seret komponen ke halaman dan atur Form ID di panel properti. Ubah gaya input dengan mengedit field, atau ganti elemennya dengan milik Anda sendiri.
• Accept: application/json membuat Ikiform menjawab dengan JSON, jadi komponen bisa menampilkan hasilnya di tempat.
• Komponen mengirim dengan fetch, jadi biarkan pemeriksaan spam formulir mati. Honeypot dan penilaian spam tetap berjalan.

Domain yang diizinkan

Ini hanya berlaku untuk code component dan embed. Biarkan domain yang diizinkan kosong untuk webhook.

• Jangan pernah menambahkan framer.app atau framer.website saja. Setiap situs di host itu akan cocok, termasuk milik orang lain.

Daftar periksa pengujian

1. Publikasikan situs. Framer hanya mengirim webhook untuk formulir di situs yang sudah dipublikasikan.
2. Kirim formulir dan periksa kirimannya di Ikiform. Dengan webhook, field-nya seharusnya sama persis dengan nama input Anda.
3. Untuk code component, aktifkan domain yang diizinkan, kirim dari domain yang sudah dipublikasikan, dan pastikan tidak ditandai spam.

Pemecahan masalah

Terkait

• ReactState pending, error, dan sukses.
• Pembuat situsEmbed yang berfungsi di pembuat situs mana pun.
• Rate limitPreset dan cara pengisiannya kembali.
• Perlindungan spamHoneypot, penilaian, dan pemeriksaan manusia.