Add Hidden Fields: Gravity Forms
This guide explains how to add hidden fields in Gravity Forms and capture UTM parameters (or other query string values) directly into your form submissions. Hidden fields are useful for tracking marketing campaigns, user journeys, or passing metadata into your CRM without the user seeing or editing them.
Step 1: Add Hidden Fields in Gravity Forms
- Go to your WordPress Dashboard → Forms → Forms.
- Edit the form where you want to capture hidden data.
- From the Form Editor panel → click Advanced Fields → drag and drop the Hidden Field into your form.
- Click on the new hidden field to edit its settings.
- Change the Field Label → e.g.,
channel. - In the field settings → go to the Advanced tab.
- Toggle Allow field to be populated dynamically → ON.
- In Parameter Name, enter the URL parameter name (e.g.,
channel).
This tells Gravity Forms to grab the value from the URL parameter like ?channel=.
Example:
https://yoursite.com/form-page/?channel=googleThe hidden field will save google.
Repeat this process for the other tracking fields.
Parameter names
channelchanneldrilldown1channeldrilldown2channeldrilldown3channeldrilldown4landing_pagelanding_page_group
Video: Step-by-step walkthrough
Step 2: Embed Your Form as an iFrame
To embed your form, you need to use an <iframe> tag on your site.
Basic iFrame Example
<iframe
src="https://form.com"
width="100%"
height="400"
frameborder="0">
</iframe>Enable Attry Tracking
To allow Attry to track this iFrame, add the attribute data-attry-iframe:
<iframe
src="https://form.com"
data-attry-iframe
width="100%"
height="400"
frameborder="0">
</iframe>The data-attry-iframe attribute signals our script to automatically populate and track form data inside the embedded iFrame.
Step 3: Add Attry Code to WordPress 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>Option 2: Using a Plugin (recommended for non-coders)
- Install the free plugin Insert Headers and Footers (or WPCode).
- Go to Settings → Insert Headers and Footers.
- Paste the Attry script in the Header section.
- Save changes.
Option 3: Using Page Builders (Elementor, Divi, etc.)
- Edit your page with your builder.
- Go to Page Settings → Custom Code → Header.
- Paste the Attry script.
- Save and publish.