# What is Next.js

[Next.js](https://nextjs.org) 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](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 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](https://formcarry.com/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 `"use client"` directive at the top is required. Save it anywhere under `app/`, for example `app/contact/page.jsx`. The full example is in the **App Router** tab above.

- `"use client"` marks the component as interactive; without it Next.js treats it as a server component and `useState` will error.
- The form posts to your formcarry endpoint with `Accept: application/json`, then branches on the response `code`: 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](https://nextjs.org/docs/app/guides/forms).

## Build a Next.js contact form in the Pages Router

The same component works in the Pages Router without the directive: every component under `pages/` is interactive by default. Drop it into `pages/contact.js` (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 `FormData`: the browser sets the multipart boundary for you, so do not set a `Content-Type` 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 `/api/contact` and forwarding from there (see the [Pages Router API routes documentation](https://nextjs.org/docs/pages/building-your-application/routing/api-routes)), 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 `fetch`: 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.

### How do I add file uploads?

Use the Uploading Files example above: file inputs plus a FormData submission. Files are stored with the submission on paid plans.

### Does this work with static export?

Yes. Because the form posts to an external endpoint, the page can be statically generated or exported; no Node server is needed at runtime.

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.

NextJS

Copy a working Next.js contact form for the App Router or Pages Router. Send submission emails, handle file uploads, and stop spam with no backend code.

Next.js Contact Form Without Backend: App & Pages Router | Formcarry

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

## 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](https://react-hook-form.com) 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.

### How do I stop spam on a React contact form?

Formcarry filters spam automatically, no CAPTCHA setup required, and supports Google reCAPTCHA if your site attracts heavy bot traffic.

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.

React

# What is Vue

[Vue](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 Vue. All examples on this page use Vue 3 with the Composition API (script setup), and the five tabs above cover fetch, JSON, file uploads, toast notifications, and server-side validation.

---

## Before getting started

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

## Vue 3 contact form example with Fetch

Fetch is a native API, so there is nothing to install. The **With Fetch** tab above contains the full single-file component: v-model bindings for the fields, an `@submit.prevent` handler that posts `FormData` to your endpoint, a disabled button while sending, and an inline success or error message. Replace the endpoint URL with your own and the form is live.

## Vue 3 contact form example with Axios

Prefer axios? Install it with `npm install axios` and use the same component shape: the handler calls `axios.post` with your fields and branches on the response `code` (200 success, 422 validation error). Axios throws for non-2xx responses, so the error message comes from `err.response.data`. See the **With JSON** tab for the fetch equivalent of a JSON submission.

## Vue contact form FAQ

### Can I make a Vue contact form without a backend?

Yes. Post the fields to a form endpoint such as formcarry with fetch or axios and you get every submission by email. You write zero server code.

### How do I send an email from a Vue contact form?

Point the form at your formcarry endpoint; formcarry emails each submission to you and can send auto responses to the sender.

### How do I validate a contact form in Vue 3?

Bind fields with v-model, check values in the submit handler before posting, and show inline errors. The **Field Validation** example above maps formcarry's server-side 422 validation errors under each field.

### How do I show a success message after submitting?

Track a `submitted` ref and swap the form for a thank-you line with `v-if`, as every example above does, or use the **With Toast** example for vue-toastification notifications.

---

Working in another framework? See our [React contact form](https://formcarry.com/form/react-contact-form) and [Next.js contact form](https://formcarry.com/form/nextjs-contact-form) guides.

A Vue contact form collects a visitor's name, email, and message, then posts it to a form endpoint with no backend code. Create your free formcarry endpoint, paste it into one of the five Vue 3 examples below, and start receiving submissions by email in about 2 minutes.

Build a Vue contact form with 5 copy-paste Vue 3 examples: fetch, axios, file uploads, validation, and toast alerts. Receive emails with no backend code.

Vue Contact Form: 5 Vue 3 Code Examples, No Backend | Formcarry

## HTML contact form code examples

Every tab above is a complete, working example. Pick the one that matches how you want the form to behave:

### Plain HTML contact form

Point the form action at your Formcarry endpoint and the browser posts the submission, no JavaScript needed. Visitors are redirected to a thank-you page after sending.

### Submit the form with fetch (AJAX)

Send the submission with the fetch() API and show a success message without reloading the page. The button is disabled while the request is in flight.

### With jQuery

The same no-reload behavior using $.ajax, for sites that already load jQuery.

### Native HTML form validation

Map Formcarry's server-side validation errors onto each field with setCustomValidity, then let the browser's native validation bubbles display them.

## HTML contact form FAQ

### Can an HTML contact form work without a backend?

HTML alone cannot send email; the form must post to a server endpoint. Formcarry provides that endpoint, so your site stays static and you write zero backend code.

### How do I make an HTML form send submissions to my email?

Set the form action to your Formcarry endpoint and method to POST. Formcarry emails you every submission.

### How do I stop spam on an HTML contact form?

Formcarry filters spam automatically, no CAPTCHA setup required, and supports Google reCAPTCHA for bot-heavy sites.

### How do I redirect visitors after they submit?

By default Formcarry shows a thank-you page. You can set a custom redirect URL per form in your dashboard, or handle the response in JavaScript with the fetch example above and skip the redirect entirely.

An HTML contact form is a form element that sends a visitor's name, email, and message to a server endpoint. Point your form's action attribute at your Formcarry endpoint and you receive every submission by email, with spam filtering, without writing any backend code. Copy an example below and start collecting submissions in 2 minutes.

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.

Hassle Free Forms

SHOW ME THE CODE

Form code examples withyour desiredframework.

Hassle Free Forms

Form code examples with
your desiredframework.