Formularz w Base44

Base44 potrafi zapisywać dane formularza we własnych encjach i wysyłać maile wbudowaną integracją. Z Formgong strona wysyła zgłoszenie prosto do backendu formularzy, a e-mail, Telegram, filtr spamu i eksport CSV są gotowe.

1. Weź access key na stronie głównej.
2. Wklej prompt do czatu Base44.
3. Sprawdź, że formularz wysyła na /submit i nie powstała dla niego encja.
4. Wyślij test z opublikowanej aplikacji.

Prompt

Dodaj do aplikacji formularz kontaktowy. Strona wysyła dane prosto do Formgong.
- POST https://formgong.com/submit
- Ukryte pole access_key: fk_your_access_key (klucz jest publiczny)
- Pola name, email, message; etykiety po polsku
- Ukryte pole honeypot botcheck
- Nie twórz encji (entity) na zgłoszenia i nie używaj wbudowanej integracji wysyłki e-maili
- Dla fetch: Accept: application/json; sukces to json.success === true

Dodatkowo:
- Ukryte pole _lang o wartości pl (język strony): komunikaty błędów, strona z podziękowaniem i autoodpowiedź będą po polsku.
- Opcjonalnie: ukryte pole _redirect z pełnym adresem https Twojej strony z podziękowaniem. Bez niego Formgong pokaże własną stronę z podziękowaniem.
- Opcjonalnie: <script src="https://formgong.com/fg.js" async></script> raz na stronie. Uzupełnia _lang z <html lang> i liczy wyświetlenia formularza bez cookies.
- Turnstile dodaj tylko wtedy, gdy podam site key.

Minimalny kod

Komponent React

"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: "pl", ...fields, access_key: "fk_your_access_key" }),
    });
    const result = await response.json();
    setStatus(result.message || (result.success ? "Wysłano. Dziękujemy!" : "Nie udało się wysłać. Spróbuj ponownie."));
  }

  return (
    <form onSubmit={onSubmit}>
      <label>Imię <input name="name" placeholder="Twoje imię" required /></label>
      <label>E-mail <input name="email" type="email" placeholder="ty@example.com" required /></label>
      <label>Wiadomość <textarea name="message" placeholder="W czym możemy pomóc?" required /></label>
      <div aria-hidden="true" style={{ position: "absolute", left: "-10000px" }}>
        <input name="botcheck" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit">Wyślij</button>
      <p role="status">{status}</p>
    </form>
  );
}

Przed publikacją

• Formularz wysyła na https://formgong.com/submit (action formularza albo URL w fetch).
• W access_key jest Twój klucz z panelu Formgong, a nie fk_your_access_key.
• Jest ukryte, puste pole botcheck.
• _lang zgadza się z językiem strony.
• Dla formularza nie powstała trasa API, funkcja serwerowa, tabela w bazie ani sekret.
• Testowe zgłoszenie widać w skrzynce Formgong i w Twojej poczcie.

Pobierz klucz