Embedding an Impact Stack form on another website

Embedding forms as an iframe on another website is nearly always a bad idea.

In some cases, you might want to have Impact Stack form on your website. We nearly always advise against embedding a full Impact Stack form as an iframe on your website. 

  1. iframes have poor accessibility: iframes often disrupt screen readers and keyboard navigation, making it difficult for users with disabilities to interact with your forms.
  2. iframes reduce conversion rates: Main websites usually have lots of distractions like links and videos. You have just successfully persuaded somebody to visit an action or donation page. This might have cost you money. Make sure you give people a clean experience that focuses their attention on the form.
  3. iframes impair good design: it can be challenging to make an embedded form scale well to all screen widths, particularly on pages with complicated layouts.
  4. iframes make it hard to track conversions: most analytics tools struggle with keeping track of progress through forms in iframes.

 

Use an Impact Stack page for your form and you'll have the best of both worlds.

You'll have a well-designed page that your supporters will recognise as yours.

And you'll have a page that is free from distractions, making it clear to supporters what the action to do on this page is.

 

Here's what you can do instead of an iframe if you really want to use your main website as a starting point for an Impact Stack action.

There are reasons that some organisations would want to have a button or a form on their main website that can act as a starting point for a supporter to complete one of their Impact Stack forms.

Visit our basic demo of an organisation's main website. That website is not Impact Stack.

The demo site gives examples of how you might start a supporter's interaction with an Impact Stack form on your main website. They are just demos – how they end up looking on your main website is in the hands of your designers and developers. There are working examples as well as code for the developers of your main website to adapt for your purposes and match with your brand.

You'll see examples of how you can put these on your organisations' main website:

  1. A live-updating progress bar of total signatures and a link to an Impact Stack action
  2. A petition or lead-gen form for supporters to use with a 'submit' button that opens your Impact Stack form with those form fields already filled
  3. Donation buttons that prefill an Impact Stack donation form with the amount selected by your supporter on your website
  4. A donation form for your main website that just has donation interval and donation amount and then links through to a real Impact Stack page

Several other flows are on the demo site too.

You are free to take the code from the above examples. We'd still expect you to need to do some work to make sure it looked on-brand for you.

Have more questions? Submit a request