Next.js · Contact

Next.js Contact Form
Template

Collect a visitor’s name, email address and message in one short form. Use it on a portfolio, business website or product contact page, then review each enquiry in your SiteBackend inbox.

Responsive stylingSpam honeypot includedFree to copy and customize

Try the template Setup instructions

Make it yours

The everyday contact form

Try the form and take the Next.js code.

Next.js

Interactive demo · submissions stay in this preview

Set up this template in Next.js

The component can stay a Server Component: its form action is a URL, not a Server Action. The browser posts directly to SiteBackend. No use client directive is required for this version, and the form works without client-side JavaScript.

1. Create your SiteBackend form
Create a site and a form in your dashboard. Copy the form endpoint and replace YOUR_FORM_ID in the downloaded component.

2. Add the TSX component

Save the downloaded component as app/components/WorkflowForm.tsx. It uses native form elements and includes its own CSS, so you do not need a UI library.

Full component: app/components/WorkflowForm.tsx

export default function WorkflowForm() {
  return (
    <>
      <form className="sb-form" action="https://api.sitebackend.com/forms/YOUR_FORM_ID" method="POST">
        <h2>Let’s talk.</h2>
        <p>Have a question or an idea? We’d love to hear it.</p>
        <label htmlFor="name">Your name</label>
        <input id="name" name="name" type="text" placeholder="Alex Morgan" required />
        <label htmlFor="email">Email address</label>
        <input id="email" name="email" type="email" placeholder="[email protected]" required />
        <label htmlFor="message">What’s on your mind?</label>
        <textarea id="message" name="message" placeholder="Tell us a little about it…" required></textarea>
        <input type="text" name="_gotcha" tabIndex={-1} autoComplete="off" style={{ display: "none" }} />
        <button type="submit">Send message</button>
      </form>
      <style>{`.sb-form { max-width: 440px; padding: 32px; margin: 24px auto; font-family: system-ui, sans-serif; color: #0b0a16; background: #fff; border: 1px solid #e7e5f0; border-radius: 20px; }
.sb-form h2 { font-size: 28px; margin: 0 0 8px; }
.sb-form p { color: #6b6a80; line-height: 1.6; }
.sb-form label { display: block; font-size: 14px; font-weight: 600; margin-top: 20px; }
.sb-form input, .sb-form textarea { box-sizing: border-box; width: 100%; margin-top: 8px; padding: 12px; border: 1px solid #e7e5f0; border-radius: 8px; font: inherit; }
.sb-form textarea { min-height: 110px; resize: vertical; }
.sb-form button { width: 100%; margin-top: 24px; padding: 14px; border: 0; border-radius: 8px; background: #6d3fe0; color: #fff; font: inherit; cursor: pointer; }
.sb-form :focus-visible { outline: 2px solid #6d3fe0; outline-offset: 3px; }`}</style>
    </>
  );
}

3. Use the component on your page
Create app/contact-form/page.tsx, or import the component into an existing page. Adjust the relative import path if your folders differ.
app/contact-form/page.tsx
```
import WorkflowForm from "../components/WorkflowForm";

export default function ContactPage() {
  return <WorkflowForm />;
}
```
4. Connect notifications and test a submission
Enable email notifications in your form settings if you want an alert for each submission. If you restrict allowed origins, include your production URL and local development origin (typically http://localhost:3000). Submit from your own site and confirm it appears in the dashboard. The preview above demonstrates the form without sending data.

Customizing the Next.js implementation

Add a Client Component only when you need browser interactions such as conditional fields or inline success states. For an inline response, submit with fetch and the Accept: application/json header; handle failures before showing success.

Next.js integration guide Submit without a page reload

What this form collects

name identifies the person contacting you.
email gives you an address for your reply and associates the submission with a contact.
message captures the question or enquiry without a fixed length in the interface.

Make it fit your workflow

Replace the heading and helper text with your expected response time.
Add a named subject field if enquiries need extra context. SiteBackend stores named fields with the submission.
Configure a custom thank-you redirect in your form settings, and enable email notifications to hear about new messages.

The supplied form uses a native POST and navigates to the endpoint’s thank-you response or your configured redirect. To keep visitors on the same page, use the JavaScript fetch guide and add explicit sending, success and error states.

More Next.js templates

Next.js Project Enquiry Template

Create a Next.js project enquiry form with name, email, budget and brief fields. Copy the TSX component and send leads to your SiteBackend inbox.

Next.js Waitlist Template

Launch a Next.js waitlist with a ready-to-use name and email form. Copy the TSX component, collect signups and export submissions with SiteBackend.

All Next.js templates

Next.js Contact FormTemplate