Adding a Contact Form to Base44 gives your visitors a way to message you without you wiring up 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 pick this for a Base44 site: the Free plan covers your first 10 conversations every month, you do not have to connect SMTP or pay for an extra form tool, and the form is one snippet your generated app drops into a contact page. Every reply from Helpdesky lands in the visitor's email inbox.
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
Base44 generates React apps under the hood. Open your contact page (or create a /contact route from the Base44 builder) and add a custom code block, or ask the Base44 AI to add the embed for you using the prompt below.
If you are pasting the embed by hand, the snippet is:
<div id="hdh-contact-form"></div>
<script src="https://helpdesky.io/contact-form.js"
data-helpdesk-id="YOUR_HELPDESK_ID"></script>
Inside a Base44 generated React component, inject it via useEffect so the script runs only once on mount.
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
base44 is a react app builder. add a /contact page if there isn't one, and inject the script tag from a useEffect on mount.
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
Preview your Base44 app, submit the form, and check your Helpdesky Messages inbox. If the form does not appear, confirm the container div ID is exactly hdh-contact-form and that no other element on the page already uses that ID.
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.
