Build the form in your React site and send its submissions to Strapi’s Content API. Strapi stores the data; you do not need a hosted form widget or a Strapi custom field for the visitor-facing interface.
How the React-to-Strapi form works
Strapi separates the backend that handles requests from the frontend visitors use. In this setup, React renders and manages the form, while Strapi defines the submission data and exposes an API for your frontend to call. The Content-type Builder supports collection types, single types, and components in the development environment. For repeatable visitor submissions, a collection type is usually the natural place to model each submission.
As an Amazon Associate I earn from qualifying purchases.
Strapi’s documentation describes collection endpoints in the form /api/<plural-api-id>. Confirm the actual API ID for your content type in your project rather than assuming its plural form.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesDefine the submission fields in Strapi
-
In the Strapi development environment, open the Content-type Builder and create a collection type for the submissions you want to receive.
#1 Best Overall
-
Add fields that match the information the React form will collect, such as a name, email address, or message. Choose field types appropriate to the data and the validation your application needs.
-
Save the content type and use its API ID when addressing the Content API. Strapi’s quick-start documentation demonstrates accessing collection data through
/api/<plural-api-id>.
Keep the public form’s fields limited to the data you actually need. Treat incoming values as untrusted: client-side checks improve the form experience, but the server must validate submitted data too.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Allow submissions without opening more access than needed
Strapi role permissions control which API actions a role can perform. A visitor form that submits without a login needs an appropriately configured create permission for the submission content type. Configure only the access required for this flow, and verify the exact behavior in your deployed Strapi v5 project.
Do not infer anonymous submission access from a public-read example. Strapi’s quick start shows enabling find and findOne for the Public role; that read example does not itself grant permission to create records. Nor is it a complete guide to anonymous form security. Validate values on the server and add suitable abuse controls for your application before exposing a public submission endpoint.
Submit the form from React
Use your project’s Strapi API URL and the collection type’s API ID. The example below shows the basic request shape for a JSON submission; it assumes the project allows this request and that its cross-origin configuration, if applicable, is set appropriately. Adapt the URL, field names, and error handling to your project.
async function submitContactForm(values) {
const response = await fetch(`${STRAPI_URL}/api/contact-submissions`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ data: values }),
});
const result = await response.json().catch(() => null);
if (!response.ok) {
throw new Error(result?.error?.message || 'Submission failed');
}
return result;
}Replace contact-submissions with the actual plural API ID of your collection type. Strapi’s REST content API uses a data object for the submitted fields. Do not put a private API token in browser code: anything sent to a visitor’s browser can be inspected. For an anonymous form, configure the intended public role access rather than exposing a secret.
Make the request part of a usable form
In your component, prevent the browser’s default form submission, collect the controlled input values, and call your submit function. Track submission state so the visitor receives a clear result:
Best Value
- While sending: disable repeat submission or otherwise prevent accidental duplicates, and show that the form is working.
- On success: show a confirmation only after the API call succeeds.
- On failure: preserve the visitor’s entered values where possible and show an actionable error. Distinguish a server validation response from a network failure if your UI can do so.
A browser request may also require your Strapi deployment’s cross-origin settings to allow the React site’s origin. Configure that for the actual frontend origin; the required setting depends on how the two applications are deployed.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Upload a file with a React form
Strapi’s REST Upload API accepts files at /api/upload using a multipart FormData body. The REST endpoint is also the required route for media uploads when a project uses GraphQL for other content operations: Strapi’s GraphQL API does not support media uploads.
For a file input, append the selected file to FormData and send it to the upload endpoint. Do not manually set the Content-Type header; the browser supplies the multipart boundary.
Free tools Windows power users keep installed
One-click scans. No signup required.
const formData = new FormData();
formData.append('files', file);
const response = await fetch(`${STRAPI_URL}/api/upload`, {
method: 'POST',
body: formData,
});To upload and attach media to an entry, Strapi’s upload documentation shows the ref, refId, and field parameters. One workable flow is to create the entry, then upload the file with the entry reference and media field so Strapi can associate it. Confirm the correct reference values and permissions for the target content type in your project.
Visitor form or Strapi custom field?
| Choice | Audience and location | Where the data goes |
|---|---|---|
| React form | Site visitors; rendered in your separate frontend | Submitted to the Strapi Content API |
| Strapi custom field | Content editors; rendered in Strapi’s Content Manager | Saved through the Content Manager editing experience |
A Strapi custom field registers a React component for use in the Content Manager, and its value must use an existing built-in Strapi data type. It is not required to build an external React form. Choose it when editors need a specialized input in the admin panel, not as a substitute for a visitor-facing form.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
