Skip to content
Docs
Français formerie.com
formerie.com Français

Next.js Quickstart

Add a working contact form to a Next.js app. You write the form, and Formerie checks it, stores it, and emails you.

Install

Install @formerie/next
Shell 
npm install @formerie/next

Add The Form

Save this as app/contact-form.tsx, then render <ContactForm /> on any page.

TSX
"use client";

import { useFormerieSubmit } from "@formerie/next";

export function ContactForm() {
  const { submit, state } = useFormerieSubmit({ workspace: "acme", form: "contact" });

  return (
    <form
      method="post"
      onSubmit={(event) => {
        event.preventDefault();
        submit({ fields: Object.fromEntries(new FormData(event.currentTarget)) });
      }}
    >
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <button disabled={state.status === "submitting"}>Send</button>
      {state.result?.ok === true && <p>Thanks!</p>}
      {state.result?.ok === false && <p>{state.result.error.message}</p>}
    </form>
  );
}

Each input’s name is the field it fills in Formerie.

Set Up The Form In The App

  1. Open app.formerie.com and create a form named Contact. It comes with the name, email, and message fields this code sends.
  2. On the Delivery tab, add your email address, then choose Save delivery. Confirm the email Formerie sends you.
  3. On the Publish tab, choose API-only and add the address your dev server prints, such as http://localhost:3000, under Your website addresses. localhost and 127.0.0.1 count as different addresses. Add your live site’s address the same way when you deploy.
  4. Choose Publish form.
  5. In the code above, replace acme with the workspace handle shown on the Publish tab.

Check It Arrived

Run your app, fill in the form, and send it. “Thanks!” appears on the page. In the app, your response shows under Submissions, and its email under Deliveries.

Seeing a CORS error, or NETWORK_ERROR? Your site’s address isn’t on the Publish tab yet, or you haven’t published since adding it. See Troubleshooting.

View as Markdown