>_Building AppsWithout Code
Forms & inputs / DETAILED TASK GUIDE

Connect a contact form

A contact form needs a destination and a response path. A button that displays a success message without delivering the submission is not a connected form. Decide where submissions should go before asking the assistant to wire it up.

BY BUILDING APPS WITHOUT CODEUPDATED OCT 14, 2026AI-ASSISTED TASK

Before you start

  • An existing form and an authorized submission endpoint or backend.
  • The required fields and a clear success state.
  • Server-side validation and a way to test without sending unwanted messages.

How to do it

  1. Identify the actual submission endpoint and required data shape. Keep secrets on the server.
  2. Ask the assistant to connect the form, validate inputs, and show submitting, success, and error states.
  3. Use a test destination or sandbox to verify one valid submission and one failure.
  4. Confirm the backend received the data before treating the UI success state as proof.

Before & after

ILLUSTRATIVE EXAMPLE
const response = await fetch("/api/contact", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(values)
});
if (!response.ok) throw new Error("Submission failed");
setStatus("sent");

The form reports success only after the configured endpoint accepts the request. The example assumes that endpoint is implemented.

MAKE IT YOURS

Use with an AI coding tool

1 Describe your change

Use your own words. You do not need a file name. The prompt asks the AI to preserve unrelated work.

We remember this choice on this device. Choosing a tool does not connect it to this website.

2 Copy your prompt

Read the complete prompt below, then copy it.

3 Paste into your AI coding tool

Open your website or app project in your AI coding tool. Paste this into its AI chat box and send it. The tool needs access to your project files to make changes.

A website address alone does not give an AI permission or access to edit it. This prompt goes into an AI chat, not a regular terminal window.

4 Check the result

Check valid submission, validation errors, failed delivery, and duplicate submission behavior.

Open your project preview and try the change. Review what changed before publishing. If it is wrong, use your tool’s undo or restore your saved project version.

If the result is not what you expected

Success appears but no message arrives

Check server logs and the delivery provider. HTTP acceptance and final email delivery are different events.

API credentials appear in browser code

Move secret-bearing calls to the backend before shipping.

Undo the change

Revert the form integration and clearly disable submission until a working destination exists.

References & testing

The examples above explain the expected behavior; they are not a claim that this prompt has been tested in every framework or AI model. Test the proposed change in your actual project before publishing.

MDN: Using Fetch ↗ · Our review approach