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.
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:
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.
For now, let’s look at two easy examples.
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.
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.
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.
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.
