Suppose you’ve ever tried embedding an Engaging Networks donation form, petition, or sign-up page into your WordPress site within an iframe. In that case, you’ve probably ended up asking one or more of the following questions:
“Why are there scrollbars in the iframe?”
“Why is the form cut off on mobile?”
“Why doesn’t it resize properly?”
We get it. It appears clunky, unprofessional, and leaves users frustrated, particularly on mobile devices.
Thankfully, we’ve found a solution: there’s a reliable, modern solution that creates an iframe resizer — and in this guide, we’ll walk you through exactly how to do it, step-by-step.
What You’ll Need
- A WordPress website (any theme)
- Access to edit your Engaging Networks template (specifically the HTML or header section)
- The free WPCode plugin (for adding JavaScript easily – don’t panic! It’s simpler than it sounds!)
Step 1: Add Resizer Support to the Engaging Networks Page
- Log in to your Engaging Networks dashboard and open the page you want to embed.
- Navigate to the HTML template, specifically the Header section.
- Inside the
<head>
tag, just before</head>
, paste the following on its own line:
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer/js/iframeResizer.contentWindow.min.js"></script>
📌 Why this matters: This script allows the embedded form to talk to your WordPress page and dynamically report its height. Yep, like most things in life, all it takes to solve this problem is better communication!
Step 2: Add the Parent-Side Script in WordPress
- In your WordPress dashboard, go to Plugins > Add New.
- Search for “WPCode – Insert Headers and Footers” (by WPCode).
- Install and activate it.
If you look at your WordPress dashboard, there’s now a new item on the left-hand menu called Code Snippets. This is where we’ll be going next to insert the JavaScript we need to handle resizing.
- Go to Code Snippets > + Add Snippet.
- Choose “Custom Snippet”, and name it something like EN iFrame Resizer.
- On the right side of the screen is a dropdown menu called Code Type. Select the HTML Snippet option.
- Paste this code in the JavaScript tab:
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.3.2/js/iframeResizer.min.js"></script>
<script>
iFrameResize({
log: false,
checkOrigin: false,
autoResize: true,
heightCalculationMethod: 'bodyScroll',
resizeFrom: 'child',
initCallback: function(iframe) {
setTimeout(() => {
iframe.iFrameResizer.resize();
}, 1000);
}
}, '#en-iframe');
</script>
- Under Insertion, change the Location option to Site Wide Footer.
- In the top right of the screen, set the snippet to Active, then Save.
✅ This will ensure the iframe is automatically resized based on the content inside.
Step 3: Embed your EN Page into the iframe on your page
Now it’s time to embed the actual form.
- Go to the WordPress page (or post) where you want the form to appear.
- Insert a Custom HTML block on the page.
- Paste the following into the block:
<iframe id="en-iframe"
src="https://your-en-url-here"
style="width: 100%; border: none; overflow: hidden;"
scrolling="no"
frameborder="0"
allowtransparency="true">
</iframe>
📌 Important:
- Make sure the
id
is exactlyen-iframe
(so it matches the JavaScript). - Do not include
loading="lazy"
or fixed height/width styles — let the script handle it!
Step 4: Test on Desktop and Mobile
Grab your PC, phone or tablet, because now it’s time to make sure everything is working.
The Checklist:
- ✅ No scrollbars
- ✅ No content cut off
- ✅ Clean on desktop, tablet, and mobile
- ✅ Adapts when resizing browser windows
Bonus Fix: Form Only Loads Fully After Scroll?
If part of your form only appears after scrolling, try these:
- Remove
loading="lazy"
from the iframe - Ensure the
iframeResizer.contentWindow.min.js
script is definitely loaded in the EN template the page is using - Keep the
setTimeout()
function in the WordPress script, which triggers a second resize
You’re Done!
With just a few tweaks, you’ve now got a beautifully embedded, responsive Engaging Networks form — free from scrollbars, cut-offs, or mobile headaches.
Got Questions or Want Help?
If you’re stuck or want a hand implementing this on your own WordPress site, feel free to get in touch — we’re always happy to help!