Replit'te form

Replit Agent iletişim formu için sık sık Express route ve veritabanı ekler. Prompt formu frontend'de tutar ve Formgong'a gönderir.

1. Ana sayfadan access key alın.
2. Replit uygulamasını açın ve promptu Agent'a yapıştırın.
3. Form için yeni sunucu route'u, veritabanı veya secret eklenmediğini kontrol edin.
4. Yayınlayın, test başvurusu gönderin ve Formgong gelen kutusunda açın.

Prompt

Uygulamaya kendi backend'i olmayan bir iletişim formu ekle. Başvuruları Formgong alır.
- POST https://formgong.com/submit (düz HTML form veya fetch)
- Değeri fk_your_access_key olan gizli access_key alanı (anahtar herkese açıktır)
- Alanlar name, email, message; etiketler Türkçe
- Ekran dışında gizli honeypot alanı botcheck
- Bu form için Express veya Flask route, veritabanı, Replit Secrets ya da nodemailer ekleme
- fetch için: Accept: application/json; başarı: json.success === true

Ayrıca:
- Değeri tr olan gizli _lang alanı (sayfanın dili): hata mesajları, teşekkür sayfası ve otomatik yanıt Türkçe olur.
- İsteğe bağlı: teşekkür sayfanızın tam https adresini taşıyan gizli _redirect alanı. Yoksa Formgong kendi teşekkür sayfasını gösterir.
- İsteğe bağlı: sayfaya bir kez <script src="https://formgong.com/fg.js" async></script>. _lang alanını <html lang> değerinden doldurur ve form görüntülemelerini çerezsiz sayar.
- Turnstile'ı yalnızca site key verirsem ekle.

En kısa kod

React bileşeni

"use client";
import { useState } from "react";

export function ContactForm() {
  const [status, setStatus] = useState("");
  async function onSubmit(event) {
    event.preventDefault();
    const fields = Object.fromEntries(new FormData(event.currentTarget));
    const response = await fetch("https://formgong.com/submit", {
      method: "POST",
      headers: { "Content-Type": "application/json", Accept: "application/json" },
      body: JSON.stringify({ _lang: "tr", ...fields, access_key: "fk_your_access_key" }),
    });
    const result = await response.json();
    setStatus(result.message || (result.success ? "Gönderildi. Teşekkürler!" : "Gönderilemedi. Lütfen tekrar deneyin."));
  }

  return (
    <form onSubmit={onSubmit}>
      <label>Ad <input name="name" placeholder="Adınız" required /></label>
      <label>E-posta <input name="email" type="email" placeholder="siz@ornek.com" required /></label>
      <label>Mesaj <textarea name="message" placeholder="Size nasıl yardımcı olabiliriz?" required /></label>
      <div aria-hidden="true" style={{ position: "absolute", left: "-10000px" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit">Gönder</button>
      <p role="status">{status}</p>
    </form>
  );
}

Yayınlamadan önce

• Form https://formgong.com/submit adresine gönderiyor (form action'ı veya fetch URL'si).
• access_key alanında fk_your_access_key değil, Formgong panelindeki anahtarınız var.
• Gizli ve boş bir botcheck alanı var.
• _lang sayfanın diliyle aynı.
• Form için API route, sunucu fonksiyonu, veritabanı tablosu veya secret eklenmedi.
• Test başvurusu Formgong gelen kutusunda ve e-postanızda görünüyor.

Anahtar al