How to add a contact form to a Next.js site

Add a contact form to your Next.js site by posting plain HTML to a Lamofel endpoint -- the form needs no 'use client' component and no API route of your own, because it posts straight to Lamofel.

1. Generate the form. Use the free contact form generator at lamofel.com/tools: pick the fields, and it gives you ready-to-paste HTML that works without JavaScript. No account is needed to generate a form.
2. Paste the form into app/contact/page.tsx. In the Next.js App Router, a page is UI rendered on a specific route: you add a page file inside the app directory and default export a React component, so a page.tsx file in app/contact makes your form available at /contact. A React component renders the same HTML, so the form goes into the component's return value; in JSX, write the attributes in React's names (for becomes htmlFor, tabindex becomes tabIndex, autocomplete becomes autoComplete). Example (the generator's output for name, email and message fields, written as a page component; the form action ends in the placeholder CLAIM_YOUR_ENDPOINT until you claim an endpoint):

export default function ContactPage() {
  return (
    <form action="https://lamofel.com/f/CLAIM_YOUR_ENDPOINT" method="POST">
      <label htmlFor="field-name">Name</label>
      <input id="field-name" type="text" name="name" required />
      <label htmlFor="field-email">Email</label>
      <input id="field-email" type="email" name="email" required />
      <label htmlFor="field-message">Message</label>
      <textarea id="field-message" name="message" rows={5} required />
      <input type="text" name="_gotcha" tabIndex={-1} autoComplete="off" hidden />
      <button type="submit">Send message</button>
    </form>
  )
}

Keep the hidden _gotcha field as generated: it is the spam trap. A filled-in _gotcha field marks the post as spam.

3. Claim your endpoint. On the generator's result page, enter the email address where submissions should arrive and press "Claim my endpoint". Your account, the form and the live endpoint are created right away; the claim result gives you the form HTML with your real endpoint in the form action -- paste that version in place of the placeholder. Delivery starts after you confirm that address from the email Lamofel sends you; submissions sent before you confirm are stored but not emailed. The confirmation link works for 7 days (see lamofel.com/privacy).
4. Deploy your Next.js site the way you normally do.
5. Send a test submission from the live page and check that it arrives in your confirmed inbox.

Limits

• Submissions are stored for 30 days, then deleted.
• The Free plan includes 100 messages a month and a "Powered by" footer on the thanks page.
• Paid plans (Starter and Pro) are available on lamofel.com/plans.
• Support is by email, with a reply within 2 business days (India time, Monday to Friday).

Generate a free form · See plans