Introduction
Multiple browsers, including Chrome for desktop, Chrome for Android, Firefox, and Microsoft Edge, have updated, and will likely continue to update, their security settings to make websites safer. Some of the settings that have been rolled out in recent years, including changing the default HTTP Referrer-Policy to the more secure strict-origin-when-cross-origin setting, are negatively impacting certain legacy web design and development patterns, in particular the practice of including third-party content or services on your website using an iframe.
Without diving too deep into the technical challenges, the key issue with these changes is that they cause functionality that is dependent upon cookies and trust to become disabled. For certain static content like iframing an article, this is not that big of a deal and the worst thing you have to worry about is your google analytics cookie tracking being disabled. However, for move complex applications like an advocacy take action page or a donation form with complex business functionality, including layers of dependencies on other third-parties like Paypal’s API, disabling core functionality like cookies can cause devastating effects and can even cost you money.
The good news is that most application providers and web developers have been moving away from using iframes as a mainstream web design pattern for years already for other reasons, not the least of which is a poor user experience. So considering it a best practice not to use iframes is not only something that will save you from headaches but it will also align your design decisions with industry best practices to give your donors and constituents a better online experience.
Solutions
Let’s dive into solutions if you are currently using an iframe or considering it and realizing that it is not recommended for your online forms, auctions, advocacy pages, or other CharityEngine fundraising functionality.
Redirection to a Web Form via Button
- Definition: A button on a website that, when clicked, redirects users to a separate web page hosting the form (e.g., a donation page, signup form, or survey).
- How It Works: The button contains a link (
<a href="formURL">Click Here</a>) or JavaScript event that directs the user to an external or dedicated page.- CharityEngine makes this easy to use with donation form, event registration, auction and other engagement applications is to redirect the user directly to the app. This really simplifies the implementation process and support required and gives you the confidence that you don’t need to worry about any current or future browser changes. Furthermore, CharityEngine has one of the most customizable platforms for online donation forms, advocacy pages, peer-to-peer fundraising, online auctions, and other online fundraising tools. Whether you want to user our out-of-the box, mobile-responsive giving page themes or roll your own, you have complete control and access to HTML, Javascript and CSS if you want to do that and we offer robust integration APIs to give you complete control.
- Use Cases:
- Keeping the main site clean and simple.
- Directing users to forms that require extensive interaction or multiple steps.
- Pros:
- Dedicated donation pages are optimized for conversions, free from the distraction of a competing webpage.
- It’s easier to scale for large campaigns, and donation platforms often offer built-in tools for A/B testing, campaign tracking, and donor segmentation, helping you refine your fundraising strategies.
- Many platforms offer data collection and reporting, so your conversion rates, donor behaviors, and campaign performance across channels can inform your strategies.
- Cons:
- Requires users to leave the current page.
- Potential for drop-off if users don’t complete the form.
- Branding consistency may vary depending on the hosted form.
iFrame (Inline Frame)
- Definition: An HTML element (
<iframe>) that embeds another website or webpage within a page. - How It Works: The content inside the iFrame is loaded as a separate webpage, meaning it retains its styling, scripts, and functionality from the source.
- These days, especially for an embedded signing ceremony, iframes are rarely needed: they provide an inferior trust user experience and there are so many alternatives. In fact, CharityEngine has been at the leading edge of providing robust APIs to allow you to natively embed your donation forms on your website for years. Check out our embeddable donation form widget and our web API as an alternative method if you feel that having your donors stay on your website is important.
- Use Cases:
- Embedding external web pages (e.g., Google Maps, YouTube videos)
- Displaying third-party widgets (e.g., chatbots, forms hosted on another site)
- Pros:
- Easy to implement (
<iframe src="URL">). - Preserves the original functionality and styles of the embedded content.
- Easy to implement (
- Cons:
- Can cause security risks (e.g., clickjacking).
- Limited control over styling and behavior unless the source allows customization.
- Slower loading times if the external source is heavy.
Embedded Web Forms
- Definition: A form that is directly inserted into a webpage using HTML and JavaScript, often provided by form-building services (e.g., Google Forms, HubSpot, Typeform).
- How It Works: The form fields, buttons, and styling are typically inserted into the webpage using an HTML
<form>tag or JavaScript snippet that dynamically loads the form elements. - Use Cases:
- Collecting user data (e.g., contact forms, surveys, payment forms).
- Seamless integration with website design and branding.
- Pros:
- The most significant benefit of an embedded form is a seamless donor experience. When the user stays on the same page, friction and drop-off rates are reduced.
- Embedded forms offer brand consistency and a customizable donation experience.
- Simplified forms, which embedded forms often are, have reduced abandonment rates.
- More secure than iFrames.
- Cons:
- Requires more effort to set up and customize.
- May require API integrations for advanced functionality.
Key Differences
| Feature | iFrame | Embedded Web Form | Redirect to Web Form via Button |
|---|---|---|---|
| Loads as a separate webpage | ✅ Yes | ❌ No | ✅ Yes |
| Customization | ❌ Limited | ✅ Full control | 🟡 Depends on the hosted form |
| Security risks | 🚨 Higher | 🔒 Lower | 🔒 Lower |
| Performance | ⏳ Slower (depends on external source) | ⚡ Faster (native to site) | 🚀 Fast (no impact on main page) |
| User stays on the same page | ✅ Yes | ✅ Yes | ❌ No |
| Ease of setup | ✅ Simple (<iframe>) |
🔧 Requires more effort | ✅ Simple (<a href> or button) |
| Best for... | Third-party content embedding | Seamless, branded forms | Keeping main site clean & tracking conversions |
Which One to Use?
- Use iFrames if you need to embed third-party content with minimal setup.
- Use embedded web forms if you want full customization and better UX.
- Use redirection via button if you prefer a distraction-free form experience and better tracking.
Alternative Solution: Use a Vanity Domain
This option is deliberately listed as number 3 because there are a few risks with this options that we will note below. However, CharityEngine has enterprise capabilities that allow you to set up your own domain name with fully validated SSL certificates to fully customize your donor experience on your donation forms and other engagement apps. This functionality does cost a little extra because there is some setup and maintenance involved, but it is a good choice to consider if you are investing a lot in your fundraising because it can increase trust with online visitors to your donation form, event registration form, auction, advocacy and other applications. This trust can result in higher conversion rates and more fundraising revenue. Using vanity domains is a great choice regardless of whether you are trying to work around browser security issues with iframes. However, it can also eliminate some of the iframe security incompatibilities because if you use a vanity domain name to include your donation form or app within your website and your website’s domain name matches the vanity domain, most browser have a high level of trust and allow baseline functionality like cookies.
WARNING: as previously noted, we still do not recommend iframing as an approach even though this should work because we cannot control or guarantee what the Browser providers will do in the future and they could implement changes anytime that could break certain CharityEngine functionality and cause your donation forms, online auctions, advocacy action pages or other constituent facing functionality to break.
Summary
CharityEngine remains on the forefront of online fundraising and engagement applications and give you simple solutions for custom branding or complete control to customize your donor and constituent experience when using our online fundraising apps like donation forms, online auctions, event registration forms and advocacy action pages. We strongly advise against using iframes to include this functionality on your website because recent browser security changes have disabled baseline functionality like cookies that cause our apps and many other providers’ apps to break when included in an iframe. Web design and user experience best practices have been moving away from iframes for years and this change by the major browser providers only further reinforces that this is a legacy design construct that will likely not be used at all in the future.
Additional Reading
Are Embedded Forms Risky for your Nonprofit? PCI 4.0 Brings Big Changes
