Adding a Contact Form to Astro is the simplest of any modern framework: paste the embed straight into your .astro file and ship. 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.
A quick word on why this is a fair trade: the Helpdesky Free plan covers the first 10 conversations every month, you do not stand up SMTP or a custom API route, and the form is a single snippet you commit to your Astro repo. Replies you send from the Helpdesky inbox are emailed back to the visitor 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
Astro renders to static HTML by default, so the embed snippet works as is. Open the contact page (typically src/pages/contact.astro) and paste the container plus script directly into the template:
---
import Layout from "../layouts/Layout.astro";
---
<Layout title="Contact us">
<main class="mx-auto max-w-2xl py-16">
<h1>Contact us</h1>
<div id="hdh-contact-form"></div>
<script
is:inline
src="https://helpdesky.io/contact-form.js"
data-helpdesk-id="YOUR_HELPDESK_ID"
></script>
</main>
</Layout>
The is:inline directive tells Astro to leave the script tag alone instead of bundling it. That matters because Helpdesky's script reads its config from its own data-* attributes, which Astro's bundler would otherwise strip.
Test It
Run astro dev, open /contact, submit a test message, and confirm it appears in your Helpdesky Messages inbox. If the form fails to render after deploy, open the page source and confirm the script tag is present and unchanged. If data-helpdesk-id is missing, you forgot is:inline.
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.
