Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
You can build the visitor-facing form in your React app and send its submissions to Strapi’s Content API; a hosted form widget is not required. First define the submission data in Strapi, then configure the access your chosen submission flow needs, and connect the React form to the project’s API. If visitors will submit without signing in, the relevant content type needs appropriately limited create access.
How the form and Strapi work together
In this setup, React renders the form for site visitors. Strapi provides the content structure and API that the frontend can send requests to. The form is part of your site’s frontend, not an input embedded from a hosted form service.
Keep the two responsibilities distinct: React handles the visitor experience, while Strapi stores the submitted content. The exact API host, content type endpoint, payload, and access configuration depend on your project.
Define the submission fields in Strapi
Use Strapi’s Content-type Builder in the development environment to create a collection type for submissions, or another suitable content structure for your use case. Add fields that correspond to what the form collects—for example, a name, email address, and message—then decide which fields are required and what data they accept.
#1 Best Overall
Plan the schema before wiring up the form. The Content-type Builder supports collection types, single types, and components; a collection type is a natural fit when each submission should be stored as its own entry.
Allow only the API access the form needs
Strapi role permissions control access to API operations. The official quick start demonstrates public read permissions for find and findOne; those permissions do not, by themselves, allow anonymous visitors to create entries. For a public form that does not require sign-in, configure an appropriately limited create permission for the selected content type and verify the effective behavior in your own project.
- Grant only the operation and content-type access needed for the submission flow.
- Validate and constrain submitted values on the server. Frontend validation improves usability but is not a substitute for server-side checks.
- Consider how the endpoint will handle unwanted or excessive submissions. The available Strapi guidance cited here does not establish a complete spam-control or anonymous-submission security recipe, so choose and verify protections for your deployment.
- Check the project’s deployed configuration rather than assuming a tutorial’s public-read example also enables public creation.
Connect the React form to the Content API
Use the API endpoint for the content type you created. Strapi’s quick start illustrates collection access at /api/<plural-api-id>; the actual plural API ID must match your content type. The following is an integration shape, not a drop-in example: adapt the endpoint and request body to your project’s schema and Strapi v5 configuration.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
async function submitMessage(values) {
const response = await fetch(`${STRAPI_BASE_URL}/api/${CONTENT_TYPE_API_ID}`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ data: values }),
});
if (!response.ok) {
throw new Error(`Submission failed (${response.status})`);
}
return response.json();
}STRAPI_BASE_URL and CONTENT_TYPE_API_ID above are illustrative JavaScript constants, not Strapi-provided variables. Set them to the API base URL and plural API ID used by your application. Confirm the accepted payload and any authentication or permission requirements against the target project before deployment.
In the component, connect the submit handler to the form’s onSubmit, prevent the browser’s default navigation, and pass the current field values to the request function. Represent the request’s state in the interface: prevent accidental duplicate submissions while it is pending, show a clear success confirmation, and present useful feedback if validation, network access, or the API request fails.
Upload files separately when the form includes them
Strapi’s REST Upload API accepts uploads at /api/upload with a multipart FormData request body. Do not set the request’s Content-Type header manually when sending browser FormData; the browser supplies the multipart boundary.
const formData = new FormData();
formData.append("files", file);
const response = await fetch(`${STRAPI_BASE_URL}/api/upload`, {
method: "POST",
body: formData,
});This shows the multipart request shape, not a complete upload-and-save workflow. To upload and attach a file to an entry, Strapi documents the ref, refId, and field parameters. Depending on the flow, create the entry and upload/link the file as separate operations, and handle the possibility that one operation succeeds while the other fails.
Strapi’s GraphQL API does not support media uploads. If your form needs to transfer files, use the REST Upload endpoint for that part even if other content operations use GraphQL.
Best Value
Choose the right kind of form input
| Approach | Audience | Where it appears | How data is saved |
|---|---|---|---|
| React form in your frontend | Site visitors | Your separate React application | The frontend submits through the Content API |
| Strapi custom field | Content editors | Strapi’s Content Manager | The editor saves through the Content Manager |
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 for extending the editor’s input experience, not a prerequisite for collecting visitor submissions through an external React frontend.
What to verify before launch
- The content type and its fields match the values the frontend sends.
- The endpoint uses the correct plural API ID for the project.
- The intended role can perform the required operation, especially create access for an unauthenticated submission flow.
- The server validates submitted data and the form displays pending, success, and failure states.
- If files are included, the REST Upload API and file-to-entry linking flow are configured for the project.
Strapi’s official documentation cited for these capabilities was accessed October 7, 2026; documentation pages are mutable. Confirm version-specific setup and permissions against the Strapi v5 version and configuration you deploy.
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.
