Help Guide

Embed A Form On Your Web Site

You or your web developer can embed a fundraising form with our easy code snippets.

Size and Layout
The form's maximum width is 700 pixels. It responsively sizes down and can be incorporated into either a single or double column format on your page.

Wrappers
You can show or hide the header, the footer, and the right column. These can be hidden or shown independently of each other, so if you want to hide the header and footer, but show the right column, you can. Just let us know how you want your wrapper display options set.

Embed Code Snippet

You will find the embed code snippet in the Form Builder. In your control panel, click My Campaigns > My 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?". Your form's code snippet will be displayed.

Installation

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.

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 css code. The recommended way is to use the javascript. However, if the script does not work in your environment, you will need to use css code.

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.

The iFrame resizer javascript automatically adjusts the height of the iframe if the form gets too long, so the scrollbar is not created. If the iframe resizer script does not work, we will have to manually adjust the height of the iframe for each device type (desktop, tablet, phone) using css.

Installation Instructions


Have More Questions? Contact Us.