Next.js · Leads

Next.js Project Enquiry
Template

Collect the first version of a project brief before scheduling a call. This template asks for a name, email, estimated budget and project description, making it useful for freelance and agency websites.

Responsive stylingSpam honeypot includedFree to copy and customize

Try the template Setup instructions

Make it yours

A better project enquiry

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>Make something great.</h2>
        <p>Tell us what you’re building. We’ll take it from here.</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="budget">Estimated budget</label>
        <input id="budget" name="budget" type="text" placeholder="$5,000–$10,000" required />
        <label htmlFor="brief">Your project</label>
        <textarea id="brief" name="brief" placeholder="The idea, the timeline, the big picture…" required></textarea>
        <input type="text" name="_gotcha" tabIndex={-1} autoComplete="off" style={{ display: "none" }} />
        <button type="submit">Send project brief</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/project-enquiry/page.tsx, or import the component into an existing page. Adjust the relative import path if your folders differ.
app/project-enquiry/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 and email tell you who to follow up with.
budget is a free-text estimate, letting visitors provide a range or say that it is undecided.
brief gives visitors space to describe goals, scope and timing.

Make it fit your workflow

Change the budget input to a select with ranges that match the work you accept.
Add a named timeline or service field to collect the context needed for your first call.
If you add a file input for briefs, set multipart/form-data on the form and configure accepted upload types in your dashboard.

The budget is an enquiry field, not a payment or quote calculation. Review the brief in your inbox, add notes or tags to the saved contact, and agree the scope with the sender before work begins.

More Next.js templates

Next.js Contact Form Template

Build a Next.js contact form with a copyable TSX component, native POST submission, a spam honeypot and email notifications through SiteBackend.

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 Project EnquiryTemplate