Base44 में फ़ॉर्म

Base44 अपने स्वयं के एंटिटीज़ में फ़ॉर्म डेटा संग्रहीत कर सकता है और एक अंतर्निहित इंटीग्रेशन के माध्यम से ईमेल भेज सकता है। Formgong के साथ पेज सीधे फ़ॉर्म बैकएंड पर पोस्ट होता है, और ईमेल, टेलीग्राम, स्पैम फ़िल्टरिंग, और CSV एक्सपोर्ट पहले से ही सेटअप हैं।

1. होमपेज पर एक एक्सेस की प्राप्त करें।
2. प्रॉम्प्ट को Base44 चैट में पेस्ट करें।
3. जाँचें कि फ़ॉर्म /submit पर पोस्ट हो रहा है और इसके लिए कोई एंटिटी नहीं बनाई गई है।
4. प्रकाशित ऐप से एक परीक्षण सबमिशन भेजें।

Prompt

Add a contact form to this app. The page posts straight to Formgong, a hosted form backend. Base44: do not create an entity for submissions and do not use the built-in email integration for this form.

Formgong spec (follow exactly):
- Plain HTML: <form action="https://formgong.com/submit" method="POST">. With JavaScript, POST the same fields to https://formgong.com/submit using fetch.
- Hidden field access_key with value fk_your_access_key. The key is public and belongs in frontend code. Do not move it to a server or a secret.
- Hidden field _lang with the page language code, e.g. "en" (on multilingual sites use document.documentElement.lang). Formgong uses it for error messages, the thank-you page, and the autoreply.
- Fields: name, email, message (required); phone is optional. Keep these field names.
- Honeypot: <input type="text" name="botcheck" tabindex="-1" autocomplete="off"> inside a wrapper with aria-hidden="true", moved off-screen with CSS (position:absolute; left:-10000px). Never fill it.
- Success, plain form POST: optionally add a hidden _redirect field with the absolute https URL of the site's thank-you page. Without it, Formgong shows its own thank-you page.
- Success, fetch: send Accept: application/json (and Content-Type: application/json for a JSON body; for FormData let the browser set it). If the response has success === true, show an inline thank-you message and reset the form; otherwise show the response's message.
- Turnstile: only if I give you a Cloudflare Turnstile site key, add <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> and <div class="cf-turnstile" data-sitekey="SITE_KEY"></div> inside the form. Otherwise leave it out.
- Optional: add <script src="https://formgong.com/fg.js" async></script> once per page. It fills _lang from <html lang>, sets the Turnstile language, and counts form views without cookies.
- Do not create a backend, API route, server function, database table, or email-sending code (Supabase, Resend, SendGrid, nodemailer), and do not add secrets. No file uploads.

Minimal code

React component

"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: "hi", ...fields, access_key: "fk_your_access_key" }),
    });
    const result = await response.json();
    setStatus(result.message || (result.success ? "भेज दिया गया। धन्यवाद!" : "भेजा नहीं जा सका। कृपया फिर से कोशिश करें।"));
  }

  return (
    <form onSubmit={onSubmit}>
      <label>नाम <input name="name" placeholder="आपका नाम" required /></label>
      <label>ईमेल <input name="email" type="email" placeholder="you@example.com" required /></label>
      <label>संदेश <textarea name="message" placeholder="हम आपकी कैसे मदद कर सकते हैं?" required /></label>
      <div aria-hidden="true" style={{ position: "absolute", left: "-10000px" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit">भेजें</button>
      <p role="status">{status}</p>
    </form>
  );
}

Before you publish

• The form posts to https://formgong.com/submit (form action or fetch URL).
• access_key holds your key from the Formgong dashboard, not fk_your_access_key.
• A hidden, empty botcheck field is present.
• _lang matches the page language.
• No API route, server function, database table, or secret was added for the form.
• A test submission shows up in the Formgong inbox and in your email.

कुंजी लें