Adding a Contact Form to Bolt.new lets your visitors message you without setting up SMTP, email, or a backend. 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 easy contact form for a Bolt project: the Free plan covers the first 10 conversations every month, you do not need SMTP or a separate form provider, and the embed is one snippet that drops into the contact page Bolt scaffolds for you. Replies from your Helpdesky inbox go to the visitor's email automatically.
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
Bolt.new typically scaffolds a Vite + React project. Open the contact page component (often src/pages/Contact.tsx or src/App.tsx) and add the container div in your JSX, then load the script.
The simplest pattern is to inject the script once when the component mounts:
import { useEffect } from "react";
export default function Contact() {
useEffect(() => {
const s = document.createElement("script");
s.src = "https://helpdesky.io/contact-form.js";
s.setAttribute("data-helpdesk-id", "YOUR_HELPDESK_ID");
document.body.appendChild(s);
return () => { s.remove(); };
}, []);
return <div id="hdh-contact-form" />;
}
If Bolt is generating plain HTML output, you can paste the snippet directly into index.html inside the <body>.
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
the project is a vite + react app generated by bolt.new. add a /contact route with the embed inside a useEffect that injects the script tag once.
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
Open Bolt's preview, fill in the form, and submit. The new conversation should appear in your Helpdesky Messages inbox within seconds. If nothing appears, check the browser console: a stale Vite HMR cache or a duplicated script tag is the usual culprit. A hard reload clears it.
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.
