How to Add a Contact Form to Carrd

Embed the Helpdesky Contact Form on a Carrd one page site using the Embed element. Requires a Pro plan.

Adding a Contact Form to Carrd takes one Embed element and works perfectly on a one page Carrd landing site. 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.

The reason this works so well on Carrd: you stay on the Free plan for the first 10 conversations a month, you do not need an external form service or SMTP, and the entire form is a single embed you drop into the page. When you reply from Helpdesky, your visitor sees the answer in their email within seconds.

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: The Embed element requires a Carrd Pro plan ($19/year and up). The free plan does not allow custom HTML or JavaScript embeds.

Add the Embed Code

  1. Open your Carrd site in the editor.
  2. Click the + button to add an element and choose Embed.
  3. Set Type to Code and Style to Hidden.
  4. Paste into the Code field:
<div id="hdh-contact-form"></div>
<script src="https://helpdesky.io/contact-form.js"
  data-helpdesk-id="YOUR_HELPDESK_ID"></script>
  1. Click Done, then Publish.

The Hidden style tells Carrd to render the embed inline instead of in an invisible <head> block, which is what you want for a visible form.

Test It

Open your published Carrd URL in an incognito window and submit a test message. The conversation should appear in your Helpdesky Messages inbox within seconds.

If the form does not render, switch the Embed element's Style from Head to Hidden. The Head style only injects the script into <head> and never renders the container div on the page.

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.

  1. 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.
  1. 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.
Last updated on May 10, 2026