Adding a Contact Form to your project with Cursor takes about a minute when you let Cursor's agent do the wiring for you. 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 is the cleanest contact form for a Cursor project: the Free plan covers 10 conversations a month, you do not stand up SMTP or a custom backend route, and the embed is one snippet Cursor can drop into whichever framework you are working in. Replies you send from Helpdesky 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
Cursor works on whatever project you have open: Next.js, Astro, Vite, plain HTML, anything. The Contact Form is one container div and one script tag, so the actual paste location depends on your stack:
- Plain HTML: paste the snippet inside
<body>ofindex.html - React / Vite: render
<div id="hdh-contact-form" />and inject the script viauseEffect - Next.js: use
<Script src="https://helpdesky.io/contact-form.js" data-helpdesk-id="..." strategy="afterInteractive" />fromnext/script
The next section gives Cursor's Composer a prompt that handles all of these automatically.
Copy This Prompt for Your AI Builder
Paste the prompt below into the chat. It tells the agent exactly what to add and where to read the canonical instructions, so the agent fetches the real embed format instead of guessing.
we need to add the helpdesky contact form to the public site.
read the tutorial first: https://docs.helpdesky.io/contact-form-setup
inspect the project to figure out the framework, then add the embed in the idiomatic way for that stack (next/script for next.js, useEffect for plain react/vite, raw script tag for plain html, etc).
then drop the embed snippet into the contact page.
the form does not need any secret env vars since it is for anonymous visitors.
when you are done, confirm the form renders and submits successfully.
Test It
Run your dev server, open the contact page, and submit a test message. The conversation should appear in your Helpdesky Messages inbox within seconds. If the form does not render, ask Cursor to "open the browser console and fix the error" — it is usually a missing container div or a stray quote in the script attributes.
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.
- 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.
- 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.
