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.

NextJS

# What is React

[React](https://react.dev) is a Javascript library for building user interfaces. It lets you create reusable components so that your code is easy to read and maintain.

Formcarry works with React, let us guide you through how can you use formcarry in react.

---

## Before getting started

### 1- Create your form endpoint

Go to [formcarry dashboard](https://app.formcarry.com) and create your first form, land on **Setup** section of your form then copy your **unique endpoint URL**.

![https://formcarry.com/blog/content/images/size/w1000/2022/10/create-form.gif](https://formcarry.com/blog/content/images/size/w1000/2022/10/create-form.gif)

> 💡 Each form has unique endpoint URL to it’s own, so make sure that you are using the right endpoint URL, otherwise you won’t get messages.

### 2- Create a HTML form

Check out our [free contact form generator](https://formcarry.com/contact-form-generator) if you don’t have any written HTML form yet, by using this free tool you can customize and create a working contact form that works with formcarry without any further configuration

## Formcarry setup with React using Fetch

Fetch is native API, so every app can use it without any installation, the steps are fairly simple.

<aside>
💡 Please make sure that you replace “https://formcarry.com/s/XXXXXXX” with your own unique endpoint URL.

</aside>

```jsx
import { useState } from "react";

export default function Fetch() {
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState("");

  function submit(e) {
    // This will prevent page refresh
    e.preventDefault();

    // replace this with your own unique endpoint URL
    fetch("https://formcarry.com/s/XXXXXXX", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      },
      body: JSON.stringify({ email: email, message: message })
    })
      .then((res) => res.json())
      .then((res) => {
        if (res.code === 200) {
          setSubmitted(true);
        } else {
          setError(res.message);
        }
      })
      .catch((error) => setError(error));
  }

  if (error) {
    return <p>{error}</p>;
  }

  if (submitted) {
    return <p>We've received your message, thank you for contacting us!</p>;
  }

  return (
    <form onSubmit={submit}>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />

      <label htmlFor="message">Message</label>
      <textarea
        id="message"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />

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

## Formcarry setup with React using Axios

Below you will see the code that works using Axios, which is a library to perform HTTP requests, it’s fairly simple.

The code will show success or error message, and ready to work.

<aside>
💡 Please make sure that you replace “https://formcarry.com/s/XXXXXXX” with your own unique endpoint URL.

</aside>

```jsx
import { useState } from "react";
import axios from "axios";

export default function App() {
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState("");

  function submit(e) {
    // This will prevent page refresh
    e.preventDefault();

    axios
      .post(
        // replace this with your own unique endpoint URL
        "https://formcarry.com/s/XXXXXXX",
        {
          email: email,
          message: message
        },
        {
          headers: {
            Accept: "application/json"
          }
        }
      )
      .then((res) => {
        // success http code
        if (res.data.code === 200) {
          setSubmitted(true);
        } else {
          setError(res.data.message);
        }
      });
  }

  if (error) {
    return <p>{error}</p>;
  }

  if (submitted) {
    return <p>We've received your message, thank you for contacting us!</p>;
  }

  return (
    <form onSubmit={submit}>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />

      <label htmlFor="message">Message</label>
      <textarea
        id="message"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />

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

<aside>
💡 Please don’t add Content-Type header, axios is smart enough to set it by itself, plus setting by yourself can cause errors sometimes.

</aside>

---

## Uploading files with React

Formcarry supports normal file uploads or [base64 encoded strings](https://formcarry.com/blog/how-to-upload-files-as-base64/). here’s an example of traditional way;

```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
```

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

[VueJS](https://vuejs.org) is a popular JavaScript framework for building user interfaces. Its simplicity and scalability make it a great choice for both small and large-scale applications.

Formcarry integrates seamlessly with VueJS, making it easy to create and manage forms. In this tutorial, we'll walk you through how to create a contact form using VueJS and Formcarry.

### 1- Create your form endpoint

Visit the [formcarry dashboard](https://app.formcarry.com) and create your form. In the **Setup** section of your form, copy your **unique endpoint URL**.

![Create Form Image](https://formcarry.com/blog/content/images/size/w1000/2022/10/create-form.gif)

> 💡 Each form has its unique endpoint URL. Ensure you're using the correct one to receive messages.

---

## VueJS Contact Form code
In this example we'll use Fetch API which is widely available by default in browsers.
```jsx
<template>
  <div>
    <form v-if="!submitted" @submit.prevent="submitForm">
      <label>
        <span>Email</span>
        <input type="email" name="email" v-model="email" />
      </label>
      <label>
        <span>Message</span>
        <textarea name="message" v-model="message"></textarea>
      </label>
      <button type="submit">Submit</button>
    </form>
    <div v-if="submitted">
      <p>Thank you for your message! We'll get back to you soon.</p>
    </div>
    <div v-if="error">
      <p>Error: {{ error }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      message: '',
      submitted: false,
      error: '',
      endpoint: 'https://formcarry.com/s/{Your Form ID}',
    }
  },
  methods: {
    async submitForm() {
      const data = {
        email: this.email,
        message: this.message,
      }
      try {
        const response = await fetch(this.endpoint, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
          },
          body: JSON.stringify(data),
        });
        const result = await response.json();
        if (result.code === 200) {
          this.submitted = true;
        } else {
          this.error = result.message;
        }
      } catch (err) {
        this.error = err.message;
      }
    },
  },
}
</script>
```

## VueJS Contact Form using Axios

```jsx
<template>
  <div>
    <form v-if="!submitted" @submit.prevent="submitForm">
      <label>
        <span>Email</span>
        <input type="email" name="email" v-model="email" />
      </label>
      <label>
        <span>Message</span>
        <textarea name="message" v-model="message"></textarea>
      </label>
      <button type="submit">Submit</button>
    </form>
    <div v-if="submitted">
      <p>Thank you for your message! We'll get back to you soon.</p>
    </div>
    <div v-if="error">
      <p>Error: {{ error }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      message: '',
      submitted: false,
      error: '',
      endpoint: 'https://formcarry.com/s/{Your Form ID}',
    }
  },
  methods: {
    async submitForm() {
      const data = {
        email: this.email,
        message: this.message,
      }
      try {
        const response = await this.$axios.post(this.endpoint, data)
        if (response.data.code === 200) {
          this.submitted = true;
        } else {
          this.error = response.data.message;
        }
      } catch (err) {
        this.error = err.message;
      }
    },
  },
}
</script>
```

## Conclusion
Creating a contact form in Vue.js and integrating it with Formcarry is straightforward. With this setup, you can receive messages directly from your Vue.js application without the need for a backend server. Always ensure you're using the correct endpoint URL from Formcarry to capture the form submissions accurately.

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.

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 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 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 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 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.

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.