Logo for FormBackend
« back to blog
guides

How to create a React form

FormBackend is perfect for static sites. Let’s take a look at how you’d hook up a simple HTML form with React.

In this guide we aim to show you how to add a contact form to React and send emails when a new submissions is received.

Create a new React app

We’ll start with the basics and assume you don’t have an existing React app. If you do, you can proceed to the next section.

The recommended way to start a new React project is with Vite. Run the following in your terminal:

npm create vite@latest formbackend-react -- --template react

formbackend-react is the directory of the app and can of course be whatever you’d like.

Let’s go to the directory and install dependencies:

cd formbackend-react
npm install

Start the development server:

npm run dev

Your browser should open with http://localhost:5173 loaded, which is the development server.

Create a new form in FormBackend

Log in to your FormBackend account and visit the forms index page. Go ahead and create a new form and give it a name you can remember it by.

After your form has been created, you’ll see the “Submissions” page which is where new submissions will appear. If you navigate to the “Set up” page you can see the unique URL for your form. We’ll copy that!

Create your react form

Now that we have our endpoint in FormBackend we can go ahead and hook it up to a form in React.

Open the file src/App.js and replace it with

import './App.css';

function App() {
  return (
    <form action="https://www.formbackend.com/f/664decaabbf1c319" method="POST">
      <div class="fieldset">
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" required/>
      </div>

      <div class="fieldset">
        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" required/>
      </div>

      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

If you go back to the browser it should look like this

The unstyled HTML form

Let’s add some simple styling by replacing the content of src/App.css with this

body { font-family: Arial, Helvetica, sans-serif; }

.fieldset + .fieldset,
form + form {
  margin-top: 8px;
}

label {
  color: #334155;
  display: block;
  font-size: 87.5%;
  font-weight: bold;
  text-transform: uppercase;
}

input,
textarea,
select {
  border: 1px solid #ddd;
  color: #475569;
  font-size: 100%;
  padding: 5px;
  border-radius: 4px;
}

button[ type="submit"] {
  background: purple;
  background: #14b8a6;
  border: none;
  box-shadow: none;
  color: white;
  border-radius: 2px;
  font-size: .8rem;
  text-transform: uppercase;
  font-weight: 500;
  padding: 8px 12px;
  margin-top: 16px;
}

You should now have a form that looks a litlte nicer

The styled React contact form

After filling it out and hitting the submit button, you’ll be taken to FormBackend’s submission success page and if you navigate to the Submissions page for the form you created in FormBackend you should see the submission you just added.

Submit without a page refresh

The form above works but redirects the user to FormBackend’s thank-you page. For a smoother experience in a React app, you can submit using JavaScript with FormBackend’s AJAX support. Check the Next.js guide for a full walkthrough of handling form state with useState and submitting via fetch — the pattern is identical in any React project.

What to set up next

Now that your React form is collecting submissions, here are a few things worth configuring in FormBackend:

Looking for other frameworks? See our guides for Next.js, Vue.js, Gatsby, Svelte, and more.