> ## Documentation Index
> Fetch the complete documentation index at: https://docs.formbox.app/llms.txt
> Use this file to discover all available pages before exploring further.

# React

> Learn how to integrate your Formbox form with <a href="https://react.dev" target="_blank" rel="noopener noreferrer">React</a>.

## What is React?

React is a popular open-source JavaScript library used for building user interfaces.
It provides a declarative and component-based architecture that makes creating user
interfaces simple and intuitive.

In this guide, we'll show you how to integrate your Formbox form with React.

## Prerequisites

Before you begin, you'll need to have a Formbox form. If you don't have one yet, you can create a new form by following the steps in the [Introduction](/introduction#step-2-creating-a-form-in-formbox) guide. Once you have your form, make a note of the form's endpoint url in the setup tab of your form page, as you'll need it later.

## Creating a new React project

o get up and running quickly, let's use <a href="https://vitejs.dev/" target="_blank" rel="noopener noreferrer">Vite</a> to bootstrap a single-page React application. In your terminal, run the following command to create a new project:

```bash theme={null}
npm create vite@latest react-with-formbox -- --template react
```

Once everything is installed you will see a terminal message with instructions for navigating to your site and running it locally.

Go to the new directory for the new website:

```bash theme={null}
cd react-with-formbox
```

Start the development server:

```bash theme={null}
npm run dev
```

Open your browser and navigate to `http://localhost:5173`. You should see a new React application running.

<Frame>
  <img src="https://mintcdn.com/formbox/05sa9iZ1Da5XhrTY/images/react-vite.png?fit=max&auto=format&n=05sa9iZ1Da5XhrTY&q=85&s=d0b952c5468973b8a8678df13bb99064" style={{ borderRadius: "0.5rem" }} width="2594" height="1964" data-path="images/react-vite.png" />
</Frame>

## Adding your Formbox form to your React project

Now that we have a new React project set up, let's add our Formbox form to it.

For styling purposes, we'll use <a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">Tailwind CSS</a>. You can learn how to add Tailwind CSS to your project by following the React <a href="https://tailwindcss.com/docs/guides/vite#react" target="_blank" rel="noopener noreferrer">installation guide</a>.

Once you have Tailwind CSS set up, let's add our form.

Open up the `App.js` file within the `src` directory and replace everything in the file with the following code block:

```jsx App.js theme={null}
import "./App.css";

export default function App() {
  return (
    <div className="max-w-md mx-auto py-20 bg-white">
      <h2 className="text-2xl font-semibold mb-6">Get in Touch</h2>
      <form action="https://api.formbox.app/s/{your-form-id}" method="POST">
        <div className="mb-4">
          <label htmlFor="name" className="block text-gray-700 text-sm font-bold mb-2">
            Name
          </label>
          <input
            type="text"
            id="name"
            name="name"
            placeholder="John Doe"
            required
            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
          />
        </div>
        <div className="mb-4">
          <label htmlFor="email" className="block text-gray-700 text-sm font-bold mb-2">
            Email
          </label>
          <input
            type="email"
            id="email"
            name="email"
            placeholder="john@example.com"
            required
            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
          />
        </div>
        <div className="mb-6">
          <label htmlFor="message" className="block text-gray-700 text-sm font-bold mb-2">
            Message
          </label>
          <textarea
            id="message"
            name="message"
            rows={4}
            placeholder="How can we help you?"
            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
          ></textarea>
        </div>
        <button
          type="submit"
          className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue"
        >
          Send Message
        </button>
      </form>
    </div>
  );
}
```

Paste the form endpoint url you copied from Formbox into your form’s `action` attribute as shown in the code block above.

Save the file and navigate to `http://localhost:5173` in your browser. You should see a form that you can fill out and submit.

<Frame>
  <img src="https://mintcdn.com/formbox/27_5fcxY_YavrIb7/images/tailwind-form.png?fit=max&auto=format&n=27_5fcxY_YavrIb7&q=85&s=eef3bd6f1e5754e78cbf34a5fc4ff64c" style={{ borderRadius: "0.5rem" }} width="2166" height="1524" data-path="images/tailwind-form.png" />
</Frame>

**And that's it!** Now after filling out and submitting the form you should see the default submission success page displayed.

<Frame>
  <img src="https://mintcdn.com/formbox/27_5fcxY_YavrIb7/images/success-page.png?fit=max&auto=format&n=27_5fcxY_YavrIb7&q=85&s=edcf9974c15138f25a71dd8545dbefd9" style={{ borderRadius: "0.5rem" }} width="2034" height="1382" data-path="images/success-page.png" />
</Frame>
