After an administrator builds a form, Drupal Canvas Forms generates the code for a form component from configured fields. Developers add that component to the site through the Drupal Canvas code editor. The component submits to Drupal Canvas Forms through a public JSON API. This page provides information on the component generation process, the component contents, and the submission method.

Prerequisites

• Ensure that you configure a form with at least one field.
• Ensure that you have the Administer Drupal Canvas Forms permission to generate the component. For more information, visit Managing permissions

Generating and adding the form component

To generate and add the form component:

1. Open Drupal Canvas forms.
2. Open the form and select Connect.

3. In the Example code, select the code format. 

   For example:

   • React component: Generates a complete React form component. This format is recommended for Drupal Canvas sites.
   • JavaScript (fetch): Displays a minimal fetch example.
   • : Displays a command-line tool example.

After an administrator builds a form, Drupal Canvas Forms generates the code for a form component from configured fields. Developers add that component to the site through the Drupal Canvas code editor. The component submits to Drupal Canvas Forms through a public JSON API. This page provides information on the component generation process, the component contents, and the submission method.

Prerequisites

• Ensure that you configure a form with at least one field.
• Ensure that you have the Administer Drupal Canvas Forms permission to generate the component. For more information, visit Managing permissions

Generating and adding the form component

To generate and add the form component:

1. Open Drupal Canvas forms.
2. Open the form and select Connect.

3. In the Example code, select the code format. 

   For example:

   • React component: Generates a complete React form component. This format is recommended for Drupal Canvas sites.
   • JavaScript (fetch): Displays a minimal fetch example.
   • cURL: Displays a command-line tool example.
4. For the React component format, select Styled or Unstyled. Both styles contain identical fields and submission wiring.
   • Styled (default): Produces polished markup using Tailwind utility classes that the Drupal Canvas editor compiles automatically. All visual choices are in one styles object; rebrand the form by editing two accent-color values.
   • Unstyled: Produces the same fields and behavior with semantic, class-free markup that you style through the theme CSS.
5. On the code block, select Copy.
6. In the Drupal Canvas code editor, create a new Code Component and paste the copied code.

Component architecture and properties 

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.

Submission execution lifecycle 

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: