Adding a Contact Form to Webflow takes one paste into the Embed element and gives you full design control around the form. 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 over a third party form service: you get 10 conversations a month for free on the Free plan, you do not have to connect SMTP or pay for a separate form tool, and the embed is one paste into a Webflow Embed element. Every reply you send 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.
Plan note: Custom code embeds require a paid Site plan (Basic or higher). The free Starter plan blocks the Embed element from publishing custom HTML.
Add the Embed Code
- Open your Webflow project and edit the page where you want the form.
- Drag an Embed element from the Add panel onto the page where the form should appear.
- In the HTML editor that opens, paste:
<div id="hdh-contact-form"></div>
<script src="https://helpdesky.io/contact-form.js"
data-helpdesk-id="YOUR_HELPDESK_ID"></script>
- Click Save & Close, then Publish to your staging or live domain.
Why not Webflow Forms? Webflow's native form sends submissions to Webflow's form database, capped by plan tier. The Embed path lands every submission directly in your Helpdesky inbox so you can reply, route, and track conversations from one place.
Test It
Open your published site (not the Webflow Designer preview, which does not always render the Embed element's scripts) and submit a test message. The conversation should appear in your Helpdesky Messages inbox within seconds.
If the Embed box looks empty in the Designer, that is expected: scripts only run on the published site.
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.
