React Contact Form
with only Frontend Code

What is React

React 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 and create your first form, land on Setup section of your form then copy your unique endpoint URL.

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

VS Code
  
Copy Code
1import { useState } from "react";
2
3export default function Fetch() {
4  const [email, setEmail] = useState("");
5  const [message, setMessage] = useState("");
6
7  const [submitted, setSubmitted] = useState(false);
8  const [error, setError] = useState("");
9
10  function submit(e) {
11    // This will prevent page refresh
12    e.preventDefault();
13
14    // replace this with your own unique endpoint URL
15    fetch("https://formcarry.com/s/XXXXXXX", {
16      method: "POST",
17      headers: {
18        "Content-Type": "application/json",
19        Accept: "application/json"
20      },
21      body: JSON.stringify({ email: email, message: message })
22    })
23      .then((res) => res.json())
24      .then((res) => {
25        if (res.code === 200) {
26          setSubmitted(true);
27        } else {
28          setError(res.message);
29        }
30      })
31      .catch((error) => setError(error));
32  }
33
34  if (error) {
35    return <p>{error}</p>;
36  }
37
38  if (submitted) {
39    return <p>We've received your message, thank you for contacting us!</p>;
40  }
41
42  return (
43    <form onSubmit={submit}>
44      <label htmlFor="email">Email</label>
45      <input
46        id="email"
47        type="email"
48        value={email}
49        onChange={(e) => setEmail(e.target.value)}
50        required
51      />
52
53      <label htmlFor="message">Message</label>
54      <textarea
55        id="message"
56        value={message}
57        onChange={(e) => setMessage(e.target.value)}
58      />
59
60      <button type="submit">Send</button>
61    </form>
62  );
63}
Copied example to clipboard 👏

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.

VS Code
  
Copy Code
1import { useState } from "react";
2import axios from "axios";
3
4export default function App() {
5  const [email, setEmail] = useState("");
6  const [message, setMessage] = useState("");
7
8  const [submitted, setSubmitted] = useState(false);
9  const [error, setError] = useState("");
10
11  function submit(e) {
12    // This will prevent page refresh
13    e.preventDefault();
14
15    axios
16      .post(
17        // replace this with your own unique endpoint URL
18        "https://formcarry.com/s/XXXXXXX",
19        {
20          email: email,
21          message: message
22        },
23        {
24          headers: {
25            Accept: "application/json"
26          }
27        }
28      )
29      .then((res) => {
30        // success http code
31        if (res.data.code === 200) {
32          setSubmitted(true);
33        } else {
34          setError(res.data.message);
35        }
36      });
37  }
38
39  if (error) {
40    return <p>{error}</p>;
41  }
42
43  if (submitted) {
44    return <p>We've received your message, thank you for contacting us!</p>;
45  }
46
47  return (
48    <form onSubmit={submit}>
49      <label htmlFor="email">Email</label>
50      <input
51        id="email"
52        type="email"
53        value={email}
54        onChange={(e) => setEmail(e.target.value)}
55        required
56      />
57
58      <label htmlFor="message">Message</label>
59      <textarea
60        id="message"
61        value={message}
62        onChange={(e) => setMessage(e.target.value)}
63      />
64
65      <button type="submit">Send</button>
66    </form>
67  );
68}
Copied example to clipboard 👏

Uploading files with React

Formcarry supports normal file uploads or base64 encoded strings. here’s an example of traditional way;

VS Code
  
Copy Code
1import React, { useRef } from "react"
2
3const Form = () => {
4  // create a Ref to access our form element
5  const formRef = useRef(null)
6
7  const sendFormData = async (event) => {
8    // this will prevent your form to redirect to another page.
9    event.preventDefault();
10
11    if(!formRef.current){
12      console.log('something wrong with form ref')
13      return
14    }
15
16    // get our form data
17    const formData = new FormData(formRef.current)
18
19    // add some additional data if you want
20    // formData.append('language', window.navigator.language)
21
22    fetch('https://formcarry.com/s/{Your-Unique-Endpoint}', {
23      method: 'POST',
24      body: formData,
25      headers: {
26				// you don't have to set Content-Type
27				// otherwise it won't work due to boundary!
28        Accept: 'application/json'
29      }
30    })
31    // convert response to json
32    .then(r => r.json())
33    .then(res => {
34      console.log(res);
35    });
36  }
37
38  return (
39	// bind formRef to our form element
40    <form ref={formRef} onSubmit={sendFormData}>
41      <label htmlFor="nameInput">Name</label>
42      <input type="text" id="nameInput" name="name" />
43
44      <label htmlFor="messageInput">Message</label>
45      <textarea id="messageInput" name="message"></textarea>
46
47      <label htmlFor="pictureInput">Picture</label>
48      <input type="file" id="pictureInput" name="picture" />
49
50      <button type="submit">Submit</button>
51    </form>
52  )
53}
54
55export default Form
Copied example to clipboard 👏