FORMCARRY EXAMPLES

React Contact Form
with only Frontend Code

Build a working React contact form with no backend code. Create a form in formcarry, paste your unique endpoint URL into one of the 7 code examples below, and start receiving submissions by email in about 2 minutes.

With Fetch

With Axios

With Formcarry.js

Uploading Files

Drag & Drop Upload

With Toast

Field Validation

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}

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}

1import { useForm } from '@formcarry/react';
2
3function MyFormcarry() {
4  const {state: formcarryState, submit: formcarrySubmit} = useForm({
5	id: 'Your-Form-ID-From-Formcarry'
6  });
7
8  if (formcarryState.submitted) {
9    return <div>Thank you! We received your submission.</div>;
10  }
11
12  return (
13    <form onSubmit={formcarrySubmit}>
14		<label htmlFor="name">Name</label>
15		<input id="name" type="text" name="text" />
16
17		<label htmlFor="surname">Surname</label>
18		<input id="surname" type="text" name="surname" />
19		
20		<label htmlFor="email">Email</label>
21		<input id="email" type="email" name="email" />
22		
23		<label htmlFor="message">Message</label>
24		<textarea id="message" name="message" />
25		
26		<button type="submit">Send</button>
27    </form>
28  );
29}

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

1import { useState, useCallback } from "react";
2import { useDropzone } from "react-dropzone";
3
4export default function DropzoneForm() {
5  const [email, setEmail] = useState("");
6  const [files, setFiles] = useState([]);
7  const [sending, setSending] = useState(false);
8  const [status, setStatus] = useState("");
9
10  const onDrop = useCallback((accepted) => {
11    setStatus("");
12    setFiles((prev) => [
13      ...prev,
14      ...accepted.map((f) => Object.assign(f, { preview: URL.createObjectURL(f) }))
15    ]);
16  }, []);
17
18  const { getRootProps, getInputProps, isDragActive } =
19    useDropzone({ onDrop, accept: { "image/*": [] } });
20
21  function removeFile(index) {
22    URL.revokeObjectURL(files[index].preview);
23    setFiles(files.filter((_, i) => i !== index));
24  }
25
26  async function submit(e) {
27    e.preventDefault();
28    setSending(true);
29    setStatus("");
30
31    // files require FormData instead of JSON
32    const formData = new FormData();
33    formData.append("email", email);
34    files.forEach((file, i) => formData.append(`attachment_${i}`, file));
35
36    try {
37      // replace with your formcarry endpoint URL
38      const response = await fetch("https://formcarry.com/s/YOUR-FORM-ID", {
39        method: "POST",
40        // skip Content-Type, the browser adds the multipart boundary
41        headers: { Accept: "application/json" },
42        body: formData
43      });
44      const json = await response.json();
45
46      if (response.ok && json.code === 200) {
47        setFiles([]);
48        setStatus("Thanks! We received your message.");
49      } else if (json.code === 422) {
50        setStatus(json.message);
51      } else {
52        setStatus("Something went wrong, please try again.");
53      }
54    } catch {
55      setStatus("Network error, please try again.");
56    } finally {
57      setSending(false);
58    }
59  }
60
61  return (
62    <form onSubmit={submit}>
63      <label htmlFor="email">Email</label>
64      <input id="email" type="email" value={email} required
65        onChange={(e) => setEmail(e.target.value)} />
66
67      <div {...getRootProps({ className: "dropzone" })}>
68        <input {...getInputProps()} />
69        <p>{isDragActive ? "Drop the images here" : "Drag images here, or click to select"}</p>
70      </div>
71
72      {files.map((file, index) => (
73        <div key={file.preview} className="thumb">
74          {/* revoke the preview URL once the image has loaded */}
75          <img src={file.preview} alt={file.name} width={80}
76            onLoad={() => URL.revokeObjectURL(file.preview)} />
77          <button type="button" onClick={() => removeFile(index)}>Remove</button>
78        </div>
79      ))}
80
81      <button type="submit" disabled={sending}>
82        {sending ? "Sending..." : "Send"}
83      </button>
84
85      {status && <p>{status}</p>}
86    </form>
87  );
88}

1import { useState } from "react";
2import toast, { Toaster } from "react-hot-toast";
3
4export default function ToastForm() {
5  const [email, setEmail] = useState("");
6  const [message, setMessage] = useState("");
7  const [sending, setSending] = useState(false);
8
9  async function submit(e) {
10    e.preventDefault();
11    setSending(true);
12
13    // one toast morphs from loading to success or error via its id
14    const toastId = toast.loading("Sending your message...");
15
16    try {
17      // replace with your formcarry endpoint URL
18      const response = await fetch("https://formcarry.com/s/YOUR-FORM-ID", {
19        method: "POST",
20        headers: {
21          "Content-Type": "application/json",
22          Accept: "application/json"
23        },
24        body: JSON.stringify({ email, message })
25      });
26      const json = await response.json();
27
28      if (response.ok && json.code === 200) {
29        toast.success("Message sent, thank you!", { id: toastId });
30        setEmail("");
31        setMessage("");
32      } else if (json.code === 422) {
33        toast.error(json.message, { id: toastId });
34      } else {
35        toast.error("Something went wrong, please try again.", { id: toastId });
36      }
37    } catch {
38      toast.error("Network error, please try again.", { id: toastId });
39    } finally {
40      setSending(false);
41    }
42  }
43
44  return (
45    <form onSubmit={submit}>
46      <label htmlFor="email">Email</label>
47      <input
48        id="email"
49        type="email"
50        value={email}
51        onChange={(e) => setEmail(e.target.value)}
52        required
53      />
54
55      <label htmlFor="message">Message</label>
56      <textarea
57        id="message"
58        value={message}
59        onChange={(e) => setMessage(e.target.value)}
60      />
61
62      <button type="submit" disabled={sending}>
63        {sending ? "Sending..." : "Send"}
64      </button>
65
66      <Toaster position="bottom-center" />
67    </form>
68  );
69}

1import { useState } from "react";
2
3export default function ValidationForm() {
4  const [email, setEmail] = useState("");
5  const [message, setMessage] = useState("");
6  const [fieldErrors, setFieldErrors] = useState({});
7  const [error, setError] = useState("");
8  const [submitted, setSubmitted] = useState(false);
9  const [sending, setSending] = useState(false);
10
11  // editing a field clears its stale validation error
12  function clearFieldError(field) {
13    setFieldErrors((prev) => ({ ...prev, [field]: undefined }));
14  }
15
16  async function submit(e) {
17    e.preventDefault();
18    setSending(true);
19    setFieldErrors({});
20    setError("");
21
22    try {
23      // replace with your formcarry endpoint URL
24      const response = await fetch("https://formcarry.com/s/YOUR-FORM-ID", {
25        method: "POST",
26        headers: { "Content-Type": "application/json", Accept: "application/json" },
27        body: JSON.stringify({ email, message })
28      });
29      const json = await response.json();
30
31      if (response.ok && json.code === 200) {
32        setSubmitted(true);
33      } else if (json.code === 422) {
34        // json.errors is keyed by field: { email: { message: "..." } }
35        const mapped = {};
36        for (const field in json.errors) {
37          mapped[field] = json.errors[field].message;
38        }
39        setFieldErrors(mapped);
40      } else {
41        setError(json.message || "Something went wrong, please try again.");
42      }
43    } catch {
44      setError("Network error, please try again.");
45    } finally {
46      setSending(false);
47    }
48  }
49
50  if (submitted) {
51    return <p>We've received your message, thank you for contacting us!</p>;
52  }
53
54  return (
55    <form onSubmit={submit}>
56      <label htmlFor="email">Email</label>
57      <input
58        id="email"
59        type="email"
60        value={email}
61        onChange={(e) => {
62          setEmail(e.target.value);
63          clearFieldError("email");
64        }}
65        className={fieldErrors.email ? "field-error" : ""}
66        required
67      />
68      {fieldErrors.email && <p className="error-message">{fieldErrors.email}</p>}
69
70      <label htmlFor="message">Message</label>
71      <textarea
72        id="message"
73        value={message}
74        onChange={(e) => {
75          setMessage(e.target.value);
76          clearFieldError("message");
77        }}
78        className={fieldErrors.message ? "field-error" : ""}
79      />
80      {fieldErrors.message && <p className="error-message">{fieldErrors.message}</p>}
81
82      {error && <p className="error-message">{error}</p>}
83
84      <button type="submit" disabled={sending}>
85        {sending ? "Sending..." : "Send"}
86      </button>
87    </form>
88  );
89}

Step-by-step guide

How to build React contact form

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.

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

React contact form validation

Formcarry can validate submissions on the server: define rules in your form's Workflows and invalid submissions come back with a 422 response listing the failing fields. The Field Validation example above maps those errors under each input, so you get real validation without writing rules in your frontend.

For complex client-side needs (multi-step forms, dependent fields, instant feedback while typing), reach for a library like react-hook-form and keep posting to your formcarry endpoint. The two approaches combine well: client-side rules for speed, server-side rules as the source of truth.

How to send an email from a React contact form

You do not need Nodemailer, SMTP credentials, or an email server. Formcarry emails you every submission automatically, and can send an auto response to the person who filled in the form. Point the form at your endpoint URL and the email side is done.

React contact form FAQ

Do I need a backend for a React contact form?

No. Point your form's action or fetch request at a formcarry endpoint and submissions are stored and emailed to you, with no server code.

How do I send an email from a React contact form?

Post the form to your formcarry endpoint. Formcarry sends you an email for every submission and can auto respond to the sender, so you never touch SMTP.

How do I add file uploads to a React contact form?

Add an input with type="file" and submit the form as FormData (see the Uploading Files and Drag & Drop examples above). Formcarry stores the files with the submission.