FORMCARRY EXAMPLES

NextJS Contact Form
with only Frontend Code

A Next.js contact form does not need its own backend or API route. Point your form at a Formcarry endpoint, submit it with fetch or axios, and start receiving submission emails in minutes. Copy the App Router or Pages Router example below.

App Router

Pages Router

With Fetch

With Axios

Uploading Files

VS Code

Copy Code

1// app/contact/page.jsx
2"use client";
3
4import { useState } from "react";
5
6export default function ContactPage() {
7  const [fields, setFields] = useState({ full_name: "", email: "", message: "" });
8  const [sending, setSending] = useState(false);
9  const [submitted, setSubmitted] = useState(false);
10  const [error, setError] = useState("");
11
12  function updateField(e) {
13    // editing a field clears any stale error
14    setError("");
15    setFields({ ...fields, [e.target.name]: e.target.value });
16  }
17
18  async function onSubmit(e) {
19    e.preventDefault();
20    setError("");
21    setSending(true);
22
23    try {
24      // replace with your formcarry endpoint URL
25      const response = await fetch("https://formcarry.com/s/YOUR-FORM-ID", {
26        method: "POST",
27        headers: { "Content-Type": "application/json", Accept: "application/json" },
28        body: JSON.stringify(fields)
29      });
30
31      const result = await response.json();
32
33      if (response.ok && result.code === 200) {
34        setSubmitted(true);
35      } else if (result.code === 422) {
36        setError(result.message);
37      } else {
38        setError(result.message || "Something went wrong, please try again.");
39      }
40    } catch {
41      setError("Could not send your message, please check your connection.");
42    } finally {
43      setSending(false);
44    }
45  }
46
47  if (submitted) {
48    return <p>Thanks for reaching out, we will get back to you soon!</p>;
49  }
50
51  return (
52    <form onSubmit={onSubmit}>
53      <label htmlFor="full_name">Full Name</label>
54      <input
55        id="full_name"
56        type="text"
57        name="full_name"
58        value={fields.full_name}
59        onChange={updateField}
60        required
61      />
62
63      <label htmlFor="email">Email</label>
64      <input
65        id="email"
66        type="email"
67        name="email"
68        value={fields.email}
69        onChange={updateField}
70        required
71      />
72
73      <label htmlFor="message">Message</label>
74      <textarea
75        id="message"
76        name="message"
77        value={fields.message}
78        onChange={updateField}
79      />
80
81      {error && <p className="error">{error}</p>}
82
83      <button type="submit" disabled={sending}>
84        {sending ? "Sending..." : "Send"}
85      </button>
86    </form>
87  );
88}

1// pages/contact.jsx
2// same component works in any pages router page, no "use client" needed
3import { useState } from "react";
4
5export default function Contact() {
6  const [fields, setFields] = useState({ full_name: "", email: "", message: "" });
7  const [sending, setSending] = useState(false);
8  const [submitted, setSubmitted] = useState(false);
9  const [error, setError] = useState("");
10
11  function updateField(e) {
12    // editing a field clears any stale error
13    setError("");
14    setFields({ ...fields, [e.target.name]: e.target.value });
15  }
16
17  async function onSubmit(e) {
18    e.preventDefault();
19    setError("");
20    setSending(true);
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(fields)
28      });
29
30      const result = await response.json();
31
32      if (response.ok && result.code === 200) {
33        setSubmitted(true);
34      } else if (result.code === 422) {
35        setError(result.message);
36      } else {
37        setError(result.message || "Something went wrong, please try again.");
38      }
39    } catch {
40      setError("Could not send your message, please check your connection.");
41    } finally {
42      setSending(false);
43    }
44  }
45
46  if (submitted) {
47    return <p>Thanks for reaching out, we will get back to you soon!</p>;
48  }
49
50  return (
51    <form onSubmit={onSubmit}>
52      <label htmlFor="full_name">Full Name</label>
53      <input
54        id="full_name"
55        type="text"
56        name="full_name"
57        value={fields.full_name}
58        onChange={updateField}
59        required
60      />
61
62      <label htmlFor="email">Email</label>
63      <input
64        id="email"
65        type="email"
66        name="email"
67        value={fields.email}
68        onChange={updateField}
69        required
70      />
71
72      <label htmlFor="message">Message</label>
73      <textarea
74        id="message"
75        name="message"
76        value={fields.message}
77        onChange={updateField}
78      />
79
80      {error && <p className="error">{error}</p>}
81
82      <button type="submit" disabled={sending}>
83        {sending ? "Sending..." : "Send"}
84      </button>
85    </form>
86  );
87}

1// works in both routers; in the App Router add "use client" at the top
2import { useState } from "react";
3
4export default function ContactForm() {
5  const [sending, setSending] = useState(false);
6  const [submitted, setSubmitted] = useState(false);
7  const [error, setError] = useState("");
8
9  async function onSubmit(e) {
10    e.preventDefault();
11    const form = e.currentTarget;
12    setSending(true);
13    setError("");
14
15    try {
16      // replace with your own formcarry endpoint URL
17      const response = await fetch("https://formcarry.com/s/YOUR-FORM-ID", {
18        method: "POST",
19        headers: {
20          "Content-Type": "application/json",
21          Accept: "application/json"
22        },
23        body: JSON.stringify(Object.fromEntries(new FormData(form)))
24      });
25      const data = await response.json();
26
27      if (response.ok && data.code === 200) {
28        setSubmitted(true);
29      } else {
30        setError(data.message || "Something went wrong, please try again.");
31      }
32    } catch {
33      setError("Something went wrong, please try again.");
34    } finally {
35      setSending(false);
36    }
37  }
38
39  if (submitted) {
40    return <p>Thanks, we received your message!</p>;
41  }
42
43  return (
44    <form onSubmit={onSubmit}>
45      <label htmlFor="name">Name</label>
46      <input id="name" type="text" name="name" required />
47
48      <label htmlFor="email">Email</label>
49      <input id="email" type="email" name="email" required />
50
51      <label htmlFor="message">Message</label>
52      <textarea id="message" name="message" required></textarea>
53
54      <button type="submit" disabled={sending}>{sending ? "Sending..." : "Send"}</button>
55
56      {error && <p>{error}</p>}
57    </form>
58  );
59}
60

1// works in both routers; in the App Router add "use client" at the top
2// npm install axios
3import { useState } from "react";
4import axios from "axios";
5
6export default function ContactForm() {
7  const [sending, setSending] = useState(false);
8  const [submitted, setSubmitted] = useState(false);
9  const [error, setError] = useState("");
10
11  async function onSubmit(e) {
12    e.preventDefault();
13    const form = e.currentTarget;
14    setSending(true);
15    setError("");
16
17    try {
18      // replace with your own formcarry endpoint URL
19      const { data } = await axios.post(
20        "https://formcarry.com/s/YOUR-FORM-ID",
21        Object.fromEntries(new FormData(form)),
22        { headers: { Accept: "application/json" } }
23      );
24
25      if (data.code === 200) {
26        setSubmitted(true);
27      } else {
28        setError(data.message || "Something went wrong, please try again.");
29      }
30    } catch (err) {
31      if (axios.isAxiosError(err) && err.response?.data?.message) {
32        setError(err.response.data.message);
33      } else {
34        setError("Something went wrong, please try again.");
35      }
36    } finally {
37      setSending(false);
38    }
39  }
40
41  if (submitted) {
42    return <p>Thanks, we received your message!</p>;
43  }
44
45  return (
46    <form onSubmit={onSubmit}>
47      <label htmlFor="name">Name</label>
48      <input id="name" type="text" name="name" required />
49
50      <label htmlFor="email">Email</label>
51      <input id="email" type="email" name="email" required />
52
53      <label htmlFor="message">Message</label>
54      <textarea id="message" name="message" required></textarea>
55
56      <button type="submit" disabled={sending}>{sending ? "Sending..." : "Send"}</button>
57
58      {error && <p>{error}</p>}
59    </form>
60  );
61}
62

1// app/contact/page.jsx
2"use client";
3
4import { useRef, useState } from "react";
5
6export default function ContactPage() {
7  const formRef = useRef(null);
8  const [preview, setPreview] = useState("");
9  const [sending, setSending] = useState(false);
10  const [submitted, setSubmitted] = useState(false);
11  const [error, setError] = useState("");
12
13  function onPictureChange(e) {
14    setError("");
15    // revoke the old preview URL so it does not leak
16    if (preview) URL.revokeObjectURL(preview);
17    const file = e.target.files[0];
18    setPreview(file ? URL.createObjectURL(file) : "");
19  }
20
21  async function onSubmit(e) {
22    e.preventDefault();
23    setError("");
24    setSending(true);
25
26    // FormData collects every named field, files included
27    const formData = new FormData(formRef.current);
28
29    try {
30      // replace with your formcarry endpoint URL
31      const response = await fetch("https://formcarry.com/s/YOUR-FORM-ID", {
32        method: "POST",
33        // skip Content-Type, the browser sets the multipart boundary
34        headers: { Accept: "application/json" },
35        body: formData
36      });
37
38      const result = await response.json();
39
40      if (response.ok && result.code === 200) {
41        if (preview) URL.revokeObjectURL(preview);
42        setSubmitted(true);
43      } else if (result.code === 422) {
44        setError(result.message);
45      } else {
46        setError(result.message || "Something went wrong, please try again.");
47      }
48    } catch {
49      setError("Could not send your message, please check your connection.");
50    } finally {
51      setSending(false);
52    }
53  }
54
55  if (submitted) {
56    return <p>Thanks for reaching out, we will get back to you soon!</p>;
57  }
58
59  return (
60    <form ref={formRef} onSubmit={onSubmit}>
61      <label htmlFor="full_name">Full Name</label>
62      <input id="full_name" type="text" name="full_name" onChange={() => setError("")} required />
63
64      <label htmlFor="email">Email</label>
65      <input id="email" type="email" name="email" onChange={() => setError("")} required />
66
67      <label htmlFor="message">Message</label>
68      <textarea id="message" name="message" onChange={() => setError("")} />
69
70      <label htmlFor="picture">Picture</label>
71      <input id="picture" type="file" name="picture" accept=".jpg, .png" onChange={onPictureChange} />
72
73      {preview && <img className="preview" src={preview} alt="Selected picture" />}
74
75      {error && <p className="error">{error}</p>}
76
77      <button type="submit" disabled={sending}>
78        {sending ? "Sending..." : "Send"}
79      </button>
80    </form>
81  );
82}

Step-by-step guide

How to build NextJS contact form

What is Next.js

Next.js is a React framework for building full-stack web applications. It gives you file-based routing, server rendering and two router flavors (the modern App Router and the classic Pages Router), while letting you keep writing plain React components.

Formcarry works with Next.js out of the box, and you don't even need an API route: your form posts directly to your formcarry endpoint, so there is no backend code to write or deploy.

Before getting started

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 its own unique endpoint URL, so make sure you use the right one, otherwise you will not receive messages.

If you don't have a form yet, our free contact form generator exports React components in JavaScript or TypeScript that drop straight into a Next.js project.

Build a Next.js contact form in the App Router

Form submission needs interactivity (state, a submit handler), so the component is a client component: the

VS Code

Copy Code

1"use client"

Copied example to clipboard 👏

directive at the top is required. Save it anywhere under

VS Code

Copy Code

1app/

Copied example to clipboard 👏

, for example

VS Code

Copy Code

1app/contact/page.jsx

Copied example to clipboard 👏

. The full example is in the App Router tab above.

VS Code

Copy Code
1"use client"
Copied example to clipboard 👏
marks the component as interactive; without it Next.js treats it as a server component and
VS Code

Copy Code
1useState
Copied example to clipboard 👏
will error.
The form posts to your formcarry endpoint with
VS Code

Copy Code
1Accept: application/json
Copied example to clipboard 👏
, then branches on the response
VS Code

Copy Code
1code
Copied example to clipboard 👏
: 200 means success, 422 means your formcarry validations rejected a field, anything else is an error worth showing.
The submit button is disabled while the request is in flight so visitors can't double-submit.

For the framework's own guidance on forms, see the Next.js App Router forms documentation.

Build a Next.js contact form in the Pages Router

The same component works in the Pages Router without the directive: every component under

VS Code

Copy Code

1pages/

Copied example to clipboard 👏

is interactive by default. Drop it into

VS Code

Copy Code

1pages/contact.js

Copied example to clipboard 👏

(or import it into any existing page) and it just works. See the Pages Router tab above.

Handling file uploads in a Next.js form

Add file inputs and submit the form as

VS Code

Copy Code

1FormData

Copied example to clipboard 👏

: the browser sets the multipart boundary for you, so do not set a

VS Code

Copy Code

1Content-Type

Copied example to clipboard 👏

header yourself. The Uploading Files tab above shows single, multiple and type-restricted file inputs.

💡 File uploads are available on paid plans.

Do you need a backend or API route for a Next.js contact form?

No. A Next.js contact form can post directly to a form endpoint such as Formcarry, so you never write an API route or email server. A common pattern is posting to

VS Code

Copy Code

1/api/contact

Copied example to clipboard 👏

and forwarding from there (see the Pages Router API routes documentation), but with formcarry that hop is unnecessary: the endpoint already handles CORS, spam filtering, email notifications and integrations. If you prefer keeping the endpoint out of client code anyway, you can post to it from a Server Action or an API route with a plain

VS Code

Copy Code

1fetch

Copied example to clipboard 👏

: the request shape is identical.

Spam protection and validation

Formcarry filters spam automatically on every plan, with optional Google reCAPTCHA for bot-heavy sites. Server-side validation rules (defined in your form's Workflows) return a 422 response listing the failing fields, which the examples above surface as an error message.

Frequently asked questions

How do I send an email from a Next.js contact form?

Post the form to your formcarry endpoint. Formcarry emails you every submission and can auto respond to the sender, so you never configure SMTP or Nodemailer.

Should I use a Server Action or a client component?

For a contact form, a client component posting straight to the endpoint is the simplest and works in both routers. Use a Server Action if you want the endpoint URL to stay server-side.