Description
Important: this plugin, on its own, cannot make forms auto-height. A browser will not let one domain read the content of an iframe from another domain, and this is not really a limitation of Pardot, WordPress, or this plugin, it is simply the same-origin policy that every browser enforces. Auto-height works only once a small companion script (generated for you, please see Installation below) has also been added to your Pardot Form Layout Template. If that step is skipped, this plugin has nothing to listen for, and forms will simply keep their normal height.
Marketing Cloud Account Engagement forms, still widely known by their original product name, Pardot, are usually embedded on external sites inside a fixed-height iframe. Since the form itself lives on a different domain, the parent page genuinely has no way of knowing its real content height, so tall forms get clipped, and shorter forms leave behind empty space or an unnecessary scrollbar.
Mercury addresses this with a small, two-part messaging mechanism:
- A short script, generated by this plugin for your own domain, is added once to your Pardot Form Layout Template’s header. It measures the actual rendered height of the Pardot form page and reports it to the parent window whenever it changes, on load, on window resize, and whenever validation errors expand the form.
- This plugin listens for that message on your WordPress site and applies the reported height, plus an optional buffer, to the matching iframe.
Requirements
- A Pardot or Account Engagement account with access to edit Form Layout Templates.
- The exact tracker (“go.”) domain your Pardot forms are served from, entered once on this plugin’s settings screen.
What this plugin does not do
- It does not create, host, or modify Pardot forms.
- It does nothing until the generated code snippet has also been added to your Pardot Form Layout Template. The settings screen explains this and includes a checkbox so you can keep track of whether that step is done.
Privacy
This plugin makes no external HTTP requests and does not collect any data. The only communication involved is a postMessage between the Pardot iframe and the parent page, two pages you already control, carrying nothing more than a height in pixels and a form ID parsed from the form’s own URL.
Screenshots
Installation
- Install and activate the plugin through the “Plugins” screen in WordPress, or upload the plugin folder to
/wp-content/plugins/. - Go to Settings Pardot Auto Height.
- Tick Enable auto-height.
- Enter your Trusted Pardot domain, the “go.” tracker domain your forms are served from (for example
https://go.example.com). - Leave Extra height buffer at its default of 200px, or adjust it as needed. This is the amount we would generally recommend, mainly to prevent a scrollbar flash when a form expands to show validation errors.
- Copy the generated code block into your Pardot account, under Marketing Forms Layout Templates, into the Header section of the layout template your embedded forms use.
- Once that code is live on the Pardot side, tick Pardot code added to confirm, then save.
- If auto-height does not seem to be applying, kindly tick Enable debug logging, save, then open a page with an embedded form and check your browser console. Please see the FAQ below for what to look for.
FAQ
-
Why do I need to add code to Pardot as well as installing this plugin?
-
A page cannot see into an iframe from a different domain, as per the browser’s own same-origin policy, and this is not a limitation of Pardot or WordPress. The Pardot-side code is what tells the parent page how tall the form actually is, and this plugin is what listens for that and resizes the iframe. Both halves are genuinely required for this to work.
-
Where do I find my “Trusted Pardot domain”?
-
This is the domain your Pardot forms load from in the browser address bar when you open a form directly, typically your Pardot account’s own tracker domain, for example
https://go.yourcompany.com. -
Does this work with multiple forms on the same page?
-
Yes. Each form reports its own height along with an ID parsed from its own URL, and the plugin matches that ID against the
srcof each iframe on the page. If only one matching iframe is present and no ID is available, that single iframe is used. -
Does this send any data externally?
-
No, it does not. Please see the Privacy section above.
-
What if I have not added the Pardot-side code yet?
-
The plugin’s settings screen shows a warning while auto-height is enabled but not yet confirmed. Nothing breaks in the meantime, forms simply keep their default height until the Pardot-side code is actually added.
-
Auto-height does not seem to be working, how do I debug it?
-
Kindly tick Enable debug logging on the settings screen, save, then open a page that has an embedded form on it and check your browser console. There is no need to wait around or keep refreshing, since this gives an instant answer either way:
- If you see a
received height=line in the console, everything is working as expected. - If there is no such line, the code has generally not reached the Pardot side yet. It would be worth rechecking that it is in the correct Layout Template, that it has been saved, and that it is actually used by the form you are testing.
This setting can only be switched on by an admin from the settings screen. There is deliberately no URL trigger for it, so a visitor cannot turn on debug logging without your approval.
- If you see a
-
What happens to my settings if I uninstall the plugin?
-
By default, nothing. Deleting the plugin leaves your saved settings in place, so if you install it again later, everything comes back exactly as it was. If you would genuinely like every setting removed for good, kindly tick Delete all plugin data on uninstall on the settings screen first, this is off by default and needs to be turned on deliberately.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Mercury – Auto Height for Pardot Forms” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Mercury – Auto Height for Pardot Forms” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0
- Initial release.