Add Hidden Fields: Squarespace Forms
This guide explains how to add hidden fields in Squarespace 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 Squarespace Form
- Open your site in Squarespace Editor.
- Go to the page with your form → click on the form → Edit Form.
- Click + Add Field → select Hidden as the field type.
- Change the Label to the parameter you want to capture (e.g.,
channel). - Add the remaining hidden fields (
channeldrilldown1,channeldrilldown2,channeldrilldown3,channeldrilldown4,landing_page,landing_page_group).
The hidden fields are now invisible to visitors but will capture data in form submissions.
Video: Step-by-step walkthrough
Step 2: Embed Your Form as an iFrame (Optional)
If you need to embed your form elsewhere, you can use an <iframe>:
<iframe
src="https://yoursite.squarespace.com/form-page"
width="100%"
height="600"
frameborder="0">
</iframe>To enable tracking and auto-population of hidden fields, add data-attry-iframe:
<iframe
src="https://yoursite.squarespace.com/form-page"
data-attry-iframe
width="100%"
height="600"
frameborder="0">
</iframe>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>