Creating A Form In React

Gatsby is built on top of React. So anything that is possible with a React form is possible in Gatsby. Additional details about how to create React forms can be found in the React forms documentation (which happens to be built with Gatsby!)

Start with the following page.

This Gatsby page is a React component. When you want to create a form, you need to store the state of the form - what the user has entered. Convert your function (stateless) component to a class (stateful) component.

Now that you have created a class component, you can add state to the component.

And now you can add a few input fields:

When a user types into an input box, the state should update. Add an onChange prop to update state and add a value prop to keep the input up to date with the new state:

Now that your inputs are working, you want something to happen when you submit the form. Add onSubmit props to the form element and add handleSubmit to show an alert when the user submits the form:

This form isn’t doing anything besides showing the user information that they just entered. At this point, you may want to move this form to a component, send the form state to a Function (see the form example), or add robust validation. You can also use fantastic React form libraries like Formik or Final Form to speed up your development process.

All of this is possible and more by leveraging the power of Gatsby and the React ecosystem!