Get email submissions from your Google AI Studio form.
minus the backend detour.

Google AI Studio Build mode can generate a full-stack app with a React client and a Node.js server. It can also add Firebase services when the app genuinely needs authentication or persistent application data. A contact form is narrower: the browser can send FormData straight to a public Form Plume endpoint, while Form Plume handles storage, email, spam filtering, and downstream delivery.

1. 1
   Create your Form Plume accountStart free and give your Google AI Studio form a hosted endpoint for email, submissions, spam filtering, uploads, integrations, and webhooks.Start free
2. 2
   Create the form and copy the endpointCopy the endpoint URL from Form Plume. It looks like https://api.formplume.com/f/your-slug
3. 3
   Connect it inside Google AI StudioAsk Build mode to update the generated React form so it posts FormData directly to your public Form Plume endpoint, then test it from the preview and the deployed app. Send one test submission from the real Google AI Studio app or preview environment and confirm it reaches Form Plume.

Give Build mode a precise prompt

Paste this after AI Studio has generated the page. Replace the placeholder only with the public endpoint copied from Form Plume.

Update the existing contact form in this Google AI Studio app.
 
FORM_PLUME_ENDPOINT="https://api.formplume.com/f/your-public-slug"
 
Requirements:
1. Keep the existing React layout and styles.
2. On submit, prevent the default navigation and send FormData to
   FORM_PLUME_ENDPOINT with fetch, method POST, and Accept: application/json.
3. Every submitted input must have a name attribute. Include name, email,
   and message.
4. Disable the submit button while the request is pending.
5. Show an accessible success message for a 2xx response and an error message
   for any other response. Keep the entered values after an error.
6. Do not create a database, Firebase collection, server route, SMTP client,
   or Gemini API call for this form.
7. Treat the Form Plume endpoint as public configuration. Do not expose a
   Gemini API key, Firebase Admin credential, webhook secret, or Form Plume
   access key in browser code.
8. Tell me which file changed and how to test the preview and deployed app.

The generated React implementation

Build mode normally gives you a React client, so this component fits the generated app without making the Node runtime part of the submission path.

import { useState, type FormEvent } from "react";
 
const FORM_PLUME_ENDPOINT =
  "https://api.formplume.com/f/your-public-slug";
 
export function ContactForm() {
  const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">(
    "idle",
  );
 
  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = event.currentTarget;
    setStatus("sending");
 
    try {
      const response = await fetch(FORM_PLUME_ENDPOINT, {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(form),
      });
 
      if (!response.ok) throw new Error("Submission failed");
      form.reset();
      setStatus("sent");
    } catch {
      setStatus("error");
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name</label>
      <input id="name" name="name" autoComplete="name" required />
 
      <label htmlFor="email">Email</label>
      <input
        id="email"
        name="email"
        type="email"
        autoComplete="email"
        required
      />
 
      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" rows={5} required />
 
      <button disabled={status === "sending"}>
        {status === "sending" ? "Sending..." : "Send message"}
      </button>
 
      {status === "sent" && <p role="status">Thanks. Your message was sent.</p>}
      {status === "error" && (
        <p role="alert">We could not send that. Please try again.</p>
      )}
    </form>
  );
}

The important detail is event.currentTarget. Capture the form before the await; React's event target should not be your long-lived reference after asynchronous work. The example also resets only after a successful response, so a temporary failure does not erase the visitor's message.

Public endpoint, private credentials

The Form Plume URL contains a public form slug. It is designed to appear in browser HTML and network requests, just like a normal form action. Keep spam controls and allowed-domain settings in Form Plume rather than trying to hide the slug.

Do not put protected-form access keys, webhook signing secrets, Gemini API keys, or Firebase Admin credentials in the React bundle. If the app needs any of those for another feature, keep that work in AI Studio's server-side runtime and use its secrets management path. A public contact form does not need those credentials.

When Firebase is the right choice

AI Studio can provision Firebase for authentication and database-backed product features. Use it when the submission is part of application state, such as an authenticated support thread that users revisit, edit, or query inside the app.

For a public contact, lead, or waitlist form, adding a collection also means defining security rules, operating notification delivery, deciding retention, and handling abuse. A direct Form Plume submission keeps that operational work out of the generated app. This is a scope decision, not a claim that AI Studio or Firebase lacks backend capability.

Preview, Cloud Run, and GitHub behavior

Test once inside the AI Studio preview, then test again from the deployed origin. AI Studio deploys generated apps to Cloud Run, where the hostname and browser origin differ from the preview. Confirm the request reaches Form Plume and that any allowed-domain rule includes the production hostname.

AI Studio can create a GitHub repository and commit its latest generated changes to it, but it cannot pull remote GitHub changes back into AI Studio. Treat this as a one-way commit workflow rather than two-way synchronization. Review every generated commit before merging it into the durable codebase, and do not expect repository edits to appear in the AI Studio workspace.

For a generated Vite-based client, see the Vite contact form guide. For a hand-maintained component, the React contact form guide covers the same request with more state-management options.

Migrating from Firebase Studio

Google stopped allowing new Firebase Studio workspaces on June 22, 2026 and plans to shut Firebase Studio down on March 22, 2027. Existing users should follow Google's migration guidance and move source code and services deliberately. Do not create a second form implementation during the move: keep the Form Plume endpoint in the exported client, verify its production origin, and send a fresh test submission after deployment.

Verify the generated change

Before shipping, inspect the diff instead of trusting the preview alone:

1. Search for FORM_PLUME_ENDPOINT and confirm the public URL appears only where expected.
2. Confirm the generated form has name attributes and sends FormData, not a JSON object that silently drops files.
3. Check that no new Firebase collection, Express route, SMTP package, or Gemini call was added just for the form.
4. Submit valid data and confirm the success state, Form Plume dashboard record, and notification.
5. Temporarily use an invalid endpoint and confirm the error state preserves the typed values.
6. Deploy to Cloud Run and repeat the valid submission from the production URL.

Primary sources

• Google AI Studio Build mode documentation
• Firebase Studio migration guidance