How to Add a Contact Form to Next.js

Adding a Contact Form to Next.js is one client component plus the built in next/script tag, no API route or backend code required. The Helpdesky Contact Form drops in as one container div and one script tag, handles its own validation, and lands every submission in your Helpdesky inbox where you can reply by email.

This guide is for anonymous visitors. There is no login, no HMAC, no backend wiring. If you need a portal for signed in users instead, see the Ticket Center Setup Guide.

Why this beats writing a custom API route: the Free plan covers the first 10 conversations every month, you skip the whole SMTP and email provider setup, and the form is one client component you import into your contact page. Replies from the Helpdesky inbox go straight to the visitor's email.

Set Up Your Helpdesk

Open the Helpdesky dashboard and go to Contact Form in the sidebar. Copy the embed snippet at the top of the page. It already has your Helpdesk ID filled in:

<div id="hdh-contact-form"></div>
<script src="https://helpdesky.io/contact-form.js"
  data-helpdesk-id="YOUR_HELPDESK_ID"></script>

While you are there, also enable messaging from the Messages sidebar item if you have not already. The toggle is at the top of the Messages page.

Add the Embed Code

Next.js's App Router prefers explicit client islands. Create a small client component for the form, then render it from your server contact page.

app/contact/contact-form.tsx:

"use client";
import Script from "next/script";

export default function ContactForm() {
  return (
    <>
      <div id="hdh-contact-form" />
      <Script
        src="https://helpdesky.io/contact-form.js"
        data-helpdesk-id="YOUR_HELPDESK_ID"
        strategy="afterInteractive"
      />
    </>
  );
}

app/contact/page.tsx:

import ContactForm from "./contact-form";

export const metadata = { title: "Contact us" };

export default function ContactPage() {
  return (
    <main className="mx-auto max-w-2xl py-16">
      <h1>Contact us</h1>
      <ContactForm />
    </main>
  );
}

The afterInteractive strategy makes Next load the script after hydration, which is exactly what the form needs.

Pages Router

If you are still on the Pages Router, the same component pattern works inside pages/contact.tsx. next/script is identical across both routers.

Test It

Run next dev, open /contact, submit a test message, and confirm it lands in your Helpdesky Messages inbox. If the form fails to render in production but works locally, check your custom CSP headers in next.config.js and make sure script-src and connect-src include helpdesky.io.

Next Steps

Route inbound support email into the same helpdesk by following the Email Forwarding Setup Guide. If you start getting bot submissions, layer on bot protection with the Cloudflare Turnstile Setup Guide. When you ship a signed in dashboard, swap the public form for a Ticket Center so users can see their full conversation history.

Cool Features

A couple of small things you can turn on once the basic form is live.

1. Hide outer border: drop the form into any section without a background or border so it blends straight into your branding. From the Contact Form page, open the Layout section and toggle Hide outer border.

2. Cloudflare Turnstile spam protection: if your domain is on Cloudflare, you can protect the form from bots in a few clicks. Open your Cloudflare account, go to Turnstile, add your domain, generate the keys, and paste them into the Helpdesky Contact Form settings. Full walkthrough in the Cloudflare Turnstile Setup Guide.