Add Hidden Fields: Ninja Forms
This guide explains how to add hidden fields in Ninja 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 Ninja Forms
- Go to your WordPress Dashboard → Ninja Forms → Dashboard.
- Edit the form where you want to capture hidden data.
- From the Form Fields panel → drag and drop the Hidden Field into your form.
- Label the field → e.g.,
channel. - Click the field → in the Advanced tab, set Default Value as:
{querystring:channel}This tells Ninja Forms to automatically grab the value from the URL parameter like ?channel=.
Example:
https://yoursite.com/form-page/?channel=googleThe hidden field will save google.
Repeat this for other tracking fields by using:
{querystring:channeldrilldown1}
{querystring:channeldrilldown2}
{querystring:channeldrilldown3}
{querystring:channeldrilldown4}
{querystring:landing_page}
{querystring:landing_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>This is the standard way to embed a form using an iFrame.
Enable Attry Tracking
To allow our script to track this iFrame, add the attribute data-attry-iframe to your <iframe> tag:
<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: How to Add Code to WordPress
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.