Embedding a Donation Form on Your Website

There are three embed layout options available.

The Works
All the same elements as a stand alone page, including the header, footer, border, and right column elements like the Questions box. (Figure 1)

Keep it simple! This option omits the header, footer, border, and right column from the form. (Figure 2)

Figure 1
Figure 2

Variable Width

This format can have uneven column widths -- the form's max width is 700 pixels (Figure 3), but it can be set narrower,

or you may use a 2-column format on your page with equal column widths (Figure 4).

Figure 3
Figure 4

Where to Find the Form Link or URL

You will find the embed code snippet in the Form Builder. In your control panel, click My Campaigns / Fundraising Forms and Edit the form you wish to embed. At the top of the page, click Get The Form Link.

Click "Yes" when you see the question "Will this form be embedded in your site?". This will open the Embed Options page.

Figure 5

Display Options

On the Embed Options page, you will see your Display Options. Here you will select whether you want the embedded form to include the Header Image (logo), Header Text, Footer, and the Right Column.

Place a check mark next to any you wish to display and save the options.

Figure 6

Resizing Options

The Resizing Option will default to JavaScript which is our recommended method. An alternative resizing method is custom CSS.

If you or your web developer do not know what these programing languages are (JavaScript and CSS) or how to use them, leave the JavaScript checkbox checked.

Code Snippet

Next, click the green "copy" button to save the Code Snippet to your clipboard for inserting into your web page.


We've prepared step-by-step instructions for installing the iframe code snippet with either javascript or css to your web site. The instructions are written for Wordpress but can be applied to any other web builder environment.

If you or your web site administrator do not already have a working knowledge of website programming, including adding javascript or custom css to your web site, we recommend you hire a web developer with programming expertise to assist you with embedding your fundraising form.

Making The Embedded Form Responsive

You will embed the form using an “iframe”. When you install the iframe, it needs to be able to resize itself when the form inside of it becomes longer than the iframe. There are two ways to do this; the first is with javascript and the second is with custom css. The recommended way is to use the javascript. However, if the script does not work in your environment, you will need to use custom css.

Why does the iframe need to be resized?
When the iframe is loaded on a web page, it sets a default height that is used for viewing on a desktop. When the form inside the iframe becomes longer than the iframe height, the iframe creates a scrollbar. This can happen when you check one of the boxes that expand (i.e., employer match or dedication) or when the iframe is being viewed on a smaller screen, like a phone or tablet. The image below shows the scrollbar that is created, circled in red.

When the form gets too long for the iframe and creates a scrollbar, part of the form's content, including the Submit button, gets hidden and cannot be seen until you scroll to it. This can be confusing for donors and we want to avoid this problem.

Figure 7

The iFrame resizer javascript automatically adjusts the height of the iframe if the form length changes.

If the iframe resizer script does not work in your environment, you can set the height of the iframe for each device type (desktop, tablet, phone) using custom css.

Installation Instructions