Implement Form Management

React Bricks Form Management lets teams create forms from the dashboard and decide what should happen when a visitor submits them.

With a flexible form builder brick, content and marketing teams can create forms autonomously, without asking backend or frontend developers to implement every new form or submission workflow.

In code, you create the form builder brick that renders the fields, collects visitor input, and sends the submitted values to the form configured in React Bricks.

Docs reference: Form Management

Create the form in the dashboard

Open the React Bricks Dashboard and create a form.

From the form configuration, choose what should happen when the form is submitted.

React Bricks forms can run one or more actions:

• save submitted data
• send an email with the submitted data
• subscribe the visitor to an Email Sending Provider list
• call a Zapier webhook

This keeps common form workflows configurable in the dashboard, without hard-coding every recipient, webhook, or subscription action in the frontend.

Build a form brick

A form brick is a normal React Bricks brick.

The brick owns the frontend experience:

• render the form fields
• validate user input
• collect the submitted values
• call sendFormSubmission
• show loading, success, and error states

The most flexible approach is to build a form builder brick, so editors can choose and configure fields visually instead of requiring a new brick for every form.

You can use the React Bricks UI FormBuilder as an implementation reference: FormBuilder example

The exact fields depend on the form experience you want to build. For example, a contact form might collect name, email, and message, while a newsletter form may only collect email.

Submit form data

Inside the submit handler, call sendFormSubmission with the React Bricks app data, reCAPTCHA token, form ID, submitter email address, submitted values, and fetch options.

import { sendFormSubmission } from 'react-bricks/frontend'
 
async function handleSubmit(data: Record<string, any>) {
  try {
    const result = await sendFormSubmission({
      appId: rbContext.appId,
      appEnv: rbContext.environment,
      token,
      formId,
      emailAddress: data.email,
      data,
      fetchOptions: { apiPrefix: rbContext.apiPrefix },
    })
 
    if (result.success) {
      // Show a success state.
    } else {
      // Show result.message or a fallback error.
    }
  } catch (err) {
    // Handle network or unexpected errors.
  }
}

The token value is the token returned by Google reCAPTCHA v3 for the current form submission.

The returned object tells you whether the submission was accepted:

type SendFormSubmissionResult = {
  success: boolean
  statusCode: number
  message: string
}

Use success, statusCode, and message to update the form UI.

Docs reference: sendFormSubmission

Understand what happens after submission

The frontend brick only submits the data to React Bricks.

The form configuration in the dashboard decides what happens next:

• if submitted data is saved
• which email is sent
• which Email Sending Provider list receives the contact
• which Zapier webhook is called

This separation lets editors and marketers adjust form actions without changing the form brick code.

Add spam protection

React Bricks forms support Google reCAPTCHA v3 protection.

Use reCAPTCHA for public forms where you need protection against automated submissions.

For reCAPTCHA to work, provide the Form reCAPTCHA V3 secret in the React Bricks Dashboard.

When you add spam protection, keep the visitor-facing flow the same: validate the form, get the reCAPTCHA token, submit the values with sendFormSubmission, and show a success or error state.

Check the result

After wiring Form Management:

• create a form in the React Bricks Dashboard
• configure at least one form action
• render the form brick on a page
• submit valid data from the frontend
• confirm the visitor sees the success state
• confirm the configured dashboard actions run
• submit invalid or incomplete data and confirm the error state is clear

Related docs

• Form Management
• Submit Forms
• sendFormSubmission