Start collecting form submissions from your Jekyll form with formcarry in 2 minutes.
Create your form in formcarry and paste your unique URL inside your form.
Look the code examples below and get started.

Jekyll

Start collecting form submissions from your Gatsby form with formcarry in 2 minutes.
Create your form in formcarry and paste your unique URL inside your form.
Look the code examples below and get started.

Gatsby

Start collecting form submissions from your Gridsome form with formcarry in 2 minutes.
Create your form in formcarry and paste your unique URL inside your form.
Look the code examples below and get started.

Gridsome

Start collecting form submissions from your AlpineJS form with formcarry in 2 minutes.
Create your form in formcarry and paste your unique URL inside your form.
Look the code examples below and get started.

AlpineJS

Start collecting form submissions from your HTML form with formcarry in 2 minutes.
Create your form in formcarry and paste your unique URL inside your form.
Look the code examples below and get started.

HTML

Start collecting form submissions from your VueJS form with formcarry in 2 minutes.
Create your form in formcarry and paste your unique URL inside your form.
Look the code examples below and get started.

## What is React?
[React](https://reactjs.org/) is a JavaScript library for building user interfaces. It was developed by Facebook and is now used by many companies and organizations to build web and mobile applications. React allows developers to create reusable components that can be easily shared and modified, making it easier to build and maintain complex applications.

## What is Formcarry?
Formcarry is a tool that helps businesses process form data from their websites. It offers a simple way to add custom contact forms to a website and process the data through Formcarry's servers instead of through the website itself. With Formcarry, businesses can automatically receive email notifications for each new form submission, set up auto-responder messages for the sender, and have built-in spam protection for their forms.

## How to create a simple form in React
To create a simple form in React, you can use the form element and add form fields such as text inputs, email inputs, and textareas. Here is an example of a simple form component:

```jsx

import React from 'react';

const Form = () => {
  return (
    <form>
      <label htmlFor="name">Name:</label>
      <input type="text" id="name" />
      <br />
      <label htmlFor="email">Email:</label>
      <input type="email" id="email" />
      <br />
      <label htmlFor="message">Message:</label>
      <textarea id="message"></textarea>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;
```

This form component creates a form with a text input for the name, an email input for the email address, a textarea for the message, and a submit button.

## How to process form data using Formcarry

To process form data using Formcarry, you'll need to [sign up](https://app.formcarry.com/register) for an account at formcarry and create a new form. Save your unique endpoint URL, which you can use to submit the form data to Formcarry. Then, in your form component, import the axios library and use it to send a POST request to the Formcarry endpoint with the form data when the form is submitted. Here is an example of how to handle form submissions in React:

```jsx
import React, { useRef } from "react"

const Form = () => {
  // create a Ref to access our form element
  const formRef = useRef(null)

  const sendFormData = async (event) => {
    // this will prevent your form to redirect to another page.
    event.preventDefault();

    if(!formRef.current){
      console.log('something wrong with form ref')
      return
    }

    // get our form data
    const formData = new FormData(formRef.current)

    // add some additional data if you want
    // formData.append('language', window.navigator.language)

    fetch('https://formcarry.com/s/{Your-Unique-Endpoint}', {
      method: 'POST',
      body: formData,
      headers: {
				// you don't have to set Content-Type
				// otherwise it won't work due to boundary!
        Accept: 'application/json'
      }
    })
    // convert response to json
    .then(r => r.json())
    .then(res => {
      console.log(res);
    });
  }

  return (
	// bind formRef to our form element
    <form ref={formRef} onSubmit={sendFormData}>
      <label htmlFor="nameInput">Name</label>
      <input type="text" id="nameInput" name="name" />

      <label htmlFor="messageInput">Message</label>
      <textarea id="messageInput" name="message"></textarea>

      <label htmlFor="pictureInput">Picture</label>
      <input type="file" id="pictureInput" name="picture" />

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

export default Form
```

This updated form component uses the useState hook to create a state object for the form fields, the onChange event handler to update the state when the form fields change, and fetch API to send a POST request to the Formcarry endpoint when the form is submitted.

With these steps, you now know how to create a form in React and process the form data using Formcarry. You can use these skills to build more complex forms and improve the user experience of your web applications

Make sure to check out other things that you can do with formcarry:

- [Integrate your form with other apps](https://formcarry.com/docs/integrations/zapier#creating-a-zap-with-formcarry)
- [Auto Responders](https://formcarry.com/docs/features/respondent-email-notifications)
- [Customize your Emails](https://formcarry.com/docs/features/custom-email-templates)
 

Start collecting form submissions from your React form with formcarry in 2 minutes.
Create your form in formcarry and paste your unique URL inside your form.
Look the code examples and detailed tutorial below and get started.

React

Start collecting form submissions from your NextJS form with formcarry in 2 minutes.
Create your form in formcarry and paste your unique URL inside your form.
Look the code examples below and get started.

SHOW ME THE CODE

Form code examples with
your desiredframework.

LET'S GET STARTED!

Hassle Free Forms

SHOW ME THE CODE

Form code examples withyour desiredframework.

LET'S GET STARTED!

Hassle Free Forms

Form code examples with
your desiredframework.