Add Hidden Fields: HubSpot Forms
This guide explains how to add hidden fields in HubSpot Forms and connect them with your CRM. Hidden fields are useful for passing information (like UTM parameters, user IDs, or campaign data) from your website into the form without the user seeing or editing them.
Step 1: Add Hidden Fields in HubSpot Forms
- In your HubSpot account, go to Marketing → Forms.
- Edit or create a form.
- From the Fields panel, drag in a Single-line text field.
- Click the field → open Options.
- Create Contact Property → Label →
channel - Edit field → Label →
channel - Toggle Make this field hidden.
Now the field is invisible to users but still records data.
Add the remaining hidden fields: channeldrilldown1, channeldrilldown2, channeldrilldown3, channeldrilldown4, landing_page, landing_page_group.
Video: Step-by-step walkthrough
Step 2: Embed Your HubSpot Form
HubSpot provides a JavaScript embed code to add forms to your website. Go to your form → Share → Embed Code and copy the snippet.
Basic Embed Example
<!-- HubSpot Form Embed -->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "123456",
formId: "abcdef12-3456-7890-abcd-ef1234567890"
});
</script>This will load your HubSpot form on the page.
Step 3: Connecting HubSpot Forms to a CRM
HubSpot forms automatically connect to the HubSpot CRM. All hidden fields you created will map directly into your CRM records.
If you want to connect HubSpot forms to an external CRM, you can use HubSpot workflows, webhooks, or middleware like Zapier/Make to push submission data to other systems.
Step 4: Add Attry Code To Your Site
How To Add Code To Your Site
Option 1: Using the WP Admin (no code editor)
- Log into WordPress Admin.
- Go to Appearance → Theme File Editor (or Appearance → Editor if block theme).
- Open
header.php. - Paste the Attry script before the closing
</head>tag. - Save changes.
Important
The Attry code shown below is an example only. Your unique snippet must be copied from your Attry Dashboard and added to your site. Do not use the example script verbatim.
Example <head> block
<head>
<!-- Attry Main Script -->
<script src="https://cdn.attry.app/cdn/snippet/v1.js"></script>
<!-- Attry iFrame Adapter -->
<script src="https://cdn.attry.app/cdn/adapters/iframe-prefill/v1.js"></script>
<!-- Configure Attry -->
<script>
window.Attry.setConfig({
debug: true, // set to false in production
iframeTagging: {
enabled: true,
paramMap: {
channel: "channel",
channeldrilldown1: "channeldrilldown1",
channeldrilldown2: "channeldrilldown2",
channeldrilldown3: "channeldrilldown3",
channeldrilldown4: "channeldrilldown4",
landing_page: "landing_page",
landing_page_group: "landing_page_group"
},
preserveExisting: false
}
});
</script>
</head>