Adding a Contact Form to Softgen lets your users send you a message without you setting up SMTP 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 worth using on a Softgen project: the Free plan covers 10 conversations a month, you do not have to bolt on SMTP or a separate form service, and the form is a single embed your generated app drops into a contact page. Replies you send from the Helpdesky inbox are emailed back to the user.
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
Softgen generates full stack apps from a prompt. The cleanest path is to ask Softgen's AI builder to add the embed for you, using the prompt in the next section. If you prefer to paste it directly, the embed is:
<div id="hdh-contact-form"></div>
<script src="https://helpdesky.io/contact-form.js"
data-helpdesk-id="YOUR_HELPDESK_ID"></script>
In a typical Softgen Next.js or React project, render the container in your contact page component and load the script with next/script (Next.js) or a small useEffect (plain React).
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
softgen builds full stack apps. add a /contact page in the existing framework, inject the helpdesky script with the framework's idiomatic pattern (next/script or useEffect), and make sure the script loads exactly 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 the Softgen preview, submit a test message, and confirm the conversation lands in your Helpdesky Messages inbox. If submission fails silently, open the browser console and look for a blocked request to helpdesky.io. A custom CSP header on the Softgen deployment is the usual cause.
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.
