Base44のフォーム

Base44では、フォームデータを独自のエンティティに保存したり、組み込みの連携機能を通じてメールを送信したりすることができます。Formgongでは、ページからフォームバックエンドへ直接データを送信でき、メール、Telegram、スパムフィルタリング、CSVエクスポートの機能はすでに設定済みです。

ホームページからアクセスキーを取得してください。
プロンプトをBase44のチャットに貼り付けてください。
フォームが /submit に送信され、そのフォームに対してエンティティが作成されていないことを確認してください。
公開済みのアプリからテスト送信を行ってください。

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: "ja", ...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.

キーを取得