Next.js contact form in 5 minutes,
with 2 lines of code

The fastest way is to embed a hosted form instead of building one. With Collectform you build the form in a no-code editor, then add 2 lines to your page (plus the next/script import): a Script tag that loads the embed and a collectform-embed element with your form ID. Setup takes about 5 minutes, with no API route, Server Action or email provider to configure.

To build one by hand, create a form component, handle the submit in a Server Action or Route Handler, validate the input on the server with a library like Zod, and send the message with an email tool like Resend or Nodemailer. That works well for a simple form in a codebase you're happy to maintain. Collectform is for when you also want no-code edits, multi-step logic and ad tracking without building them.

Yes. Collectform forms run one question per step, with conditional logic that changes the path based on each answer. You build the steps in the no-code editor and embed the whole flow with the same 2 lines, so there's no step state to manage in React. An optional setting also saves progress, so visitors can come back and continue where they left off.

Yes. Collectform is a standard web component loaded with next/script, which both routers support. In the App Router it works inside a Server Component, so you don't need "use client". It also works on any host, including Vercel and Netlify, because the form runs in the browser.

Yes. TypeScript doesn't know about custom elements by default, so add the small collectform.d.ts file shown in the TypeScript tab above. You only add it once, and it also type-checks the form-id attribute.

No. The embed loads your published form each time the page loads, so your changes appear on the next page load after you hit Publish in the Collectform editor. There's no commit and no build, and marketers can make changes without a developer.

Every submission is saved in your Collectform dashboard. You can also get an email alert for each one, send the visitor an automatic reply, and POST each submission to your own endpoint with a webhook.

Yes. Collectform sends events to the Meta Conversions API and the TikTok Events API from the server, and can fire the Meta Pixel in the browser too. You paste your pixel ID and access token in the Integrations tab, so there's no tracking code in your repo. Emails and phone numbers are SHA-256 hashed before they're sent, and Pixel and server events share an event ID so Meta counts each conversion once.

Yes. Turn on the Cookie consent setting and the form shows its own consent banner. The Meta Pixel and all Meta and TikTok events are held until the visitor accepts. If they reject, nothing is sent to Meta or TikTok and you still receive their submission. The banner covers the form's own tracking, and your page can listen for the collectform:consent browser event to gate any other pixels you run.

No. The form renders inside a Shadow DOM, so your Tailwind classes don't reach inside it and its styles stay out of your app. You style it from the Design tab in the editor, with your own colors, fonts and corner radius.

Yes. The same 2 lines work for any form you build in Collectform, including quote requests, consultation bookings, lead magnets, webinar registrations and multi-step surveys. Start from a template or a blank form and embed it on any page.

Every plan starts with a 7-day trial and no credit card. After that, Pro is $29/month, or $20/month billed yearly, and includes 300 leads/month and 10 active forms. Team is $59/month, or $40/month billed yearly, and includes 1000 leads/month and 25 active forms.