Adding a Contact Form to Framer takes one paste into an Embed component and slots cleanly into your existing design. 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 use Helpdesky for this instead of stitching together a third party form: it is free for the first 10 conversations every month, there is no SMTP or backend to wire up, and the whole form is a single Embed component on your Framer page. Every reply from your inbox goes 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.
Plan note: Adding custom HTML or JavaScript embeds in Framer requires a paid plan. The free plan does not allow custom code on published sites.
Add the Embed Code
- Open your Framer project and edit the page where you want the form.
- From the Insert panel, drag an Embed component onto the canvas.
- In the right side panel, set the Embed type to HTML and paste:
<div id="hdh-contact-form"></div>
<script src="https://helpdesky.io/contact-form.js"
data-helpdesk-id="YOUR_HELPDESK_ID"></script>
- Resize the Embed component to give the form room (around 600 px wide and 700 px tall is a good starting point).
- Publish your Framer site.
Why not Framer Forms? Framer's native form posts to Framer's own backend with submission limits per plan. The Embed path sends every submission directly to your Helpdesky inbox so you can reply, route, and track from one place.
Test It
Open the published Framer URL in an incognito window (the canvas preview does not always run embed scripts) and submit a test message. The conversation should appear in your Helpdesky Messages inbox within seconds.
If the Embed area looks blank, expand its height. The Embed component does not auto fit its content.
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.
