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
Your fundraising 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 web page.
You can show or hide your form's header, the footer, or 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.
Embed Code Snippet
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.
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.
Next, click the green "copy" button to save the Code Snippet to your clipboard for inserting into your web page.
Making The Embedded Form Responsive
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.
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.
Video Tutorial with Wordpress Elementor