Component architecture

Larger, self-contained components that represent complete UI sections or features. They’re ideal when you want to maintain consistency between your Webflow site and React app for entire sections of your interface.

Use these for components that need to look and behave identically across both platforms, such as these examples:

• Navigation bars (with all their states and interactions)
• Complete pricing tables (with all cells and styling)
• Full footers (with all links and sections)
• Entire page sections (like hero sections or feature blocks)

Smaller, reusable building blocks that form the foundation of your design system. They’re perfect for creating a consistent look and feel across your application.

Use these for basic UI elements that you’ll combine in different ways, such as these examples:

• Buttons (with different variants)
• Headings (with different sizes)
• Links (with different styles)
• Cards (with different layouts)

Export a whole Webflow form for simple, lightweight flows when you don’t need controlled inputs or complex validation.

Add an Attributes prop to the form in Webflow so apps can pass handlers like onSubmit.

In React, treat the exported form as an uncontrolled form: prevent default, read values via FormData, and post to your endpoint. If your handler throws, render the form’s Error state; otherwise show Success and map these directly to Webflow’s built-in states.

Example

This example uses a whole Webflow form exported as one React component. The form stays visually identical to your Webflow design, but in your React code you pass it an Attributes prop called formAttributes. That prop lets you hook into the form’s submit event.

1
import { NewsletterSignupForm } from "webflow/NewsletterSignupForm";
2
3
export function FooterSignup() {
4
  return (
5
    <NewsletterSignupForm
6
      // Attributes prop
7
      formAttributes={{
8
        onSubmit: async (e: React.FormEvent<HTMLFormElement>) => {
9
          e.preventDefault();
10
          const res = await fetch("/newsletter-signup", {
11
            method: "POST",
12
            body: new FormData(e.currentTarget),
13
          });
14
          if (!res.ok) throw new Error("Submit failed"); // triggers Error state
15
        },
16
      }}
17
    />
18
  );
19
}

• NewsletterSignupForm is your exported Webflow form, now usable as a React component. It already includes the fields, labels, success message, and error message you styled in Webflow.
• formAttributes is an Attributes prop that lets you pass an object that can include handlers like onSubmit.
• onSubmit function
  • The handler prevents the browser’s default form submission.
  • It collects the field values with new FormData(e.currentTarget).
  • It posts that data to your app’s backend (here: /newsletter-signup).
  • If the request fails, it throws an error. That error tells the form to switch to its Error state. If the request succeeds, the form automatically shows its Success state.
• Success/Error states These are the states you set up visually in Webflow. The exported component just switches between them depending on whether your submit handler finishes or throws.

Instead of exporting a whole form, you can export individual inputs and buttons and build your own <form> element in React. This gives you full control over:

• Validation (for example, with react-hook-form + Zod)
• Error messages (announced with aria-invalid and aria-describedby)
• Submission state (disable the button while sending, show a spinner)
• Success handling (show a toast, banner, or redirect)

This approach keeps the Webflow design but lets you manage all behavior in React.

1
import { useForm } from "react-hook-form";
2
import { EmailInput } from "webflow/EmailInput";
3
import { SubmitButton } from "webflow/SubmitButton";
4
5
export function SignupForm() {
6
  const { register, handleSubmit, formState } = useForm<{ email: string }>();
7
8
  const onSubmit = async (data: { email: string }) => {
9
    await fetch("/newsletter-signup", {
10
      method: "POST",
11
      body: new URLSearchParams(data),
12
    });
13
    // Show your own success UI here
14
  };
15
16
  return (
17
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
18
      <EmailInput
19
        inputAttributes={{
20
          ...register("email", { required: true }),
21
          type: "email",
22
          placeholder: "you@example.com",
23
          "aria-invalid": formState.errors.email ? true : undefined,
24
        }}
25
      />
26
27
      {formState.errors.email && (
28
        <p role="alert">Please enter a valid email.</p>
29
      )}
30
31
      <SubmitButton />
32
    </form>
33
  );
34
}

In this example, you export the EmailInput and SubmitButton elements from Webflow. You then assemble them in your own <form> in React. You use react-hook-form to handle the form’s state and validation.

• React manages validation and errors with react-hook-form.
• An error message is displayed and announced when validation fails.

Success handling is left to the developer (toast, banner, redirect, etc.).