Embedding Giving Forms

Hello! This lesson is for web developers who will be working with Funraise’s Giving Form code. If you’re not a web developer, stay tuned—we’ll end this lesson with a beginner-level demo of how to add a Giving Form to a Squarespace site.

Before we start talking about Squarespace or Wordpress or your particular web stack, it’s important to understand the structure of the Giving Form code. 

All the examples in this lesson, and many more, are documented at funraise.org/developers.

HTML Page Structure

We’ll start with a nice-but-basic donation page. Here is the HTML code for this page. The goal is to add a donation button that opens the form.

First, grab the form code from inside Funraise’s platform.

From the side menu in Funraise, click Giving Forms and select a form to open its profile. At the top of the form profile, click Publish. Here you’ll find the embed code elements.
There are two variations of the form:

  • A button launcher... which allows you to embed a donation button that will open the popup form. You can put this button anywhere on your site.
  • And the placed formwhich enables you to embed an open form in your page layout.

In most cases, we recommend using the button launcher, so we’re gonna use that option in today’s example.

Start by copying the Funraise Aware Code and place this inside your <head> element on your page. This code enables Funraise features on your website. Only load this once per page. We recommend that you place this globally so that it’s available on each page.

Back in Funraise, copy the Form Configuration Code...  This code loads a particular form on your page. In most cases, you’ll place this in your page <head> element, especially if this is a Giving Form you’ll want to load on multiple pages. Make sure the Form Configuration Code is inserted below the Funraise Aware Script.

Finally, copy the Form Button Code.... You can edit the design of the button from here, but most likely you’ll use your own css classes to match your site’s brand identity. 

The button code must be placed in the page <body> below the other form elements. This code is just an HTML button element that is targeting a particular form.

As mentioned, you might want to have this button use your site’s styles, so we can remove the inline styles… and add your own class if you prefer.

Now we have a custom donation button on our page that opens our form. Nice. Next up, let’s talk about how you can further configure your form with edits to the form code.

Advanced Configurations

There are many ways to configure forms and prefill specific field values—for a complete list of everything you can do, visit funraise.org/developers.

For now, let’s look at two easy examples.

Add a Donate Monthly button

Let’s say you want to create an additional button on our donation page to highlight a monthly donation. To do that, add another button targeting the same form and add an attribute to open the form with a monthly frequency. 

Now, there are two buttons, one for a one-time donation and another for a monthly donation. The monthly button opens the form with the frequency field defaulted to monthly.

We recommend highlighting a monthly donation option like this on your donation pages.

Launch a form with specific donation amounts

Another common example is launching the form with specific donation amounts—this is a very effective option. If you want to add four buttons with different amounts just add and customize an amount attribute for each button.

For example, let’s add buttons for $50... $150... $500... and $2000.

Now our donation page has four suggested donation amounts. This layout places the donation experience front and center and invites visitors to interact with the page. When a donor clicks the $500 button, the form will default to $500. Easy.

And… this is just the tip of the iceberg when it comes to on-page form code configurations.

Embed a Form on Squarespace

Alright. Now that you have a good grasp of the form code structure, let’s look at a CMS platform example.

Giving Forms can be embedded on most CMS platforms including Squarespace and WordPress. In this example we’ll use Squarespace because it’s a popular platform used by nonprofit organizations, aaaand it’s a great platform to showcase best practices.

We’ll add a donation form to a Squarespace page that’s already been drafted. This page looks like our code example, but it was built using the standard Squarespace editor.

First, copy the Funraise Aware Code… paste it into the Header Code Injection of your Squarespace site. You can access your Squarespace code injections from Settings… Advanced… Code Injection. 

Placing the Funraise Aware Code in your site Header ensures that it’s loaded on all your pages.

Next, copy and paste the Form Configuration Code and place it below the Funraise Aware Code. In most cases, you should place your form configuration code in the Header Code Injection as well, especially if this is a general form that will be opened from multiple pages.

Now we’re ready to add the donation button to the donation page.

Copy the Button Code from Funraise…  In the Squarespace page editor, add a new code block into the layout. Place the button code here. After saving this, you’ll have a donation button that opens your form.

For a final example, and because we highly recommend highlighting a monthly donation option, let’s add another content block to focus on your monthly donation program… Add another code block and paste the button code again, then add an attribute to this button to default the frequency field to monthly… Finally, with a few quick spacing and layout adjustments, you’ve got a user-friendly and engaging donation page.

And that’s a wrap. We’ve already mentioned it twice, but it bears repeating: go to funraise.org/developers to review best practices and see more live examples.

Show More
Some of the features in this lesson may not be included in every awesome Funraise plan.

Looking for Help?

Access to articles and documentation on how to be a pro Funraise-er

Go to Support