FORMCARRY EXAMPLES

Gatsby Form Example

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.

With Fetch

With Axios

Uploading Files

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}