---
title: "Adding a form to a site"
date: "2026-07-13T14:34:50+00:00"
summary: "Learn how to add a Drupal Canvas form to your site—generate, copy, and embed React form components with built-in validation and spam protection."
image:
type: "page"
url: "/source-cms/adding-form-site"
id: "b21fa9f0-fed0-42ad-8140-be97d3055e19"
---

Table of contents will be added

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](/source-cms/managing-permissions "Managing permissions")

Generating and adding the form component
----------------------------------------

To generate and add the form component:

1.  [Open Drupal Canvas forms](/source-cms/creating-and-managing-forms "Creating and managing 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.

Note

The Connect view displays the submission endpoint and a **Copy** option for manual form integration.

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:

Status

Meaning

`success`

The submission was accepted and stored.

`error`

Validation failed, in which case per-field messages are shown, or the server returned an unexpected error.

`rate_limited`

Too many submissions from this visitor or site-wide within the rate-limit window.

`blocked`

An additional spam check, such as a captcha, rejected the submission.