Adding a Contact Form to BigCommerce gives storefront shoppers a clean way to message your support team without leaving your store. 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 this is a clean fit for a BigCommerce store: the Free plan covers your first 10 conversations every month, you do not need a separate form app from the marketplace, and the embed is one snippet you paste into your contact page or Stencil template. Replies from your Helpdesky inbox are delivered to the shopper's email 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 (Page Builder)
The fastest path on a Stencil based BigCommerce store:
- In your BigCommerce control panel, go to Storefront → Web Pages and edit the Contact Us page (or create a new one).
- Switch the editor to Source Code view (the
<>icon). - Paste the embed snippet where you want the form to appear:
<div id="hdh-contact-form"></div>
<script src="https://helpdesky.io/contact-form.js"
data-helpdesk-id="YOUR_HELPDESK_ID"></script>
- Save the page. The form renders on the live storefront.
Add the Embed Code (Stencil Theme)
For full control, edit your Stencil theme. Open templates/pages/contact-us.html (or any template you want the form on) and paste the snippet inside the {{#partial "page"}} block:
{{#partial "page"}}
<h1>Contact us</h1>
<div id="hdh-contact-form"></div>
<script src="https://helpdesky.io/contact-form.js"
data-helpdesk-id="YOUR_HELPDESK_ID"></script>
{{/partial}}
{{> layout/base}}
Bundle and push the theme with stencil push and the form goes live.
Test It
Open the contact page in an incognito window, submit a test message, and confirm it lands in your Helpdesky Messages inbox. If the form does not appear, BigCommerce's WYSIWYG editor sometimes re escapes the script tag. Switching back to Source Code view and re pasting usually fixes it.
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.
