The generated React component is ready to use without modifications. The component renders one input per field, matching the control to the field type. A single select becomes a dropdown, a multiple select becomes a checkbox group, a date becomes a date input, and a file upload becomes a drag-and-drop dropzone. It submits through the useCanvasForm hook, imported canvas_forms/useCanvasForm.
The component uses the browser's built-in validation for instant feedback and then shows the server's per-field messages next to each input after submission. It also includes the anti-spam scaffolding every submission needs: a hidden honeypot field and a freshly fetched challenge token. Finally, it exposes title, description, submitLabel, and successMessage properties so you can set the heading, intro text, button label, and confirmation message without editing the markup.
If you add fields to the form later, regenerate the component or copy the new field lines from the updated starter code on the Connect view.
The useCanvasForm hook manages the full submission lifecycle. When a visitor submits the form, the component fetches a single-use challenge token from GET /canvas-forms/api/token/{machine_name}, collects the field values, adds the honeypot and challenge-token fields, and posts everything as JSON to POST /canvas-forms/api/submit/{machine_name}. If a challenge token is rejected, for example because it was already used, the hook fetches a fresh token and retries once automatically.
The hook reflects the outcome through a status value that the component renders:
Status | Meaning |
|---|---|
| The submission was accepted and stored. |
| Validation failed, in which case per-field messages are shown, or the server returned an unexpected error. |
| Too many submissions from this visitor or site-wide within the rate-limit window. |
| An additional spam check, such as a captcha, rejected the submission. |
If this content did not answer your questions, try searching or contacting our support team for further assistance.
If this content did not answer your questions, try searching or contacting our support team for further assistance.