Submit Forms

React Bricks Form Management lets teams configure form actions from the dashboard. In code, you create form bricks that collect values from visitors and submit them to React Bricks.

Use this page when you are implementing the developer side of Form Management.

Create the form in the dashboard

First, create a form from the React Bricks dashboard.

There you can configure what happens when the form is submitted:

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

Build a form brick

A form brick is a normal React Bricks brick that renders form fields and handles submission.

In practice, it should:

1. Render the form fields.
2. Collect the submitted values.
3. Call sendFormSubmission with the app data, token, form identifier, submitter email address, submitted data, and fetch options.
4. Show a success or error state to the visitor.

Submit the data

Inside the submit handler, call sendFormSubmission and use the returned success, statusCode, and message values to update the form UI.

try {
  const result = await sendFormSubmission({
    appId: rbContext.appId,
    appEnv: rbContext.environment,
    token,
    formId,
    emailAddress: 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.
}

See the sendFormSubmission reference for the full TypeScript signature.

Spam protection

React Bricks forms support Google reCAPTCHA v3 protection.

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

Related reference

• sendFormSubmission
• Form Management