The example code on this page is for demo purposes only. Be sure to copy form code directly from your platform and then configure using the tips below.
Funraise Giving Form embed code provides an infrastructure for dynamic and scalable donation experiences across your entire site. The unique elements of the form code make that possible.
1 | Funraise Aware Code
The Funraise Aware Code enables Funraise features on your website. Place this in the <head></head> of your pages. Only load this code once on a page.
2 | Form Configuration Code
The Form Configuration Code creates or configures a particular form on a page. Place this in the <head></head> of the page below the Funraise Aware Code. You can add JS configs to the Form Configuration Code to prefill or default items for a particular form instance.
3 | Button Code
A form can be launched with an HTML button. Place this in your page <body></body> where you want the button to appear. You can add attributes to a button to open the form with prefills or defaulted items. You can edit the inline styles of the default button or use your own buttons. Add data-formId="xxxx" to a button to target a particular form.
You can also place a form open on your page; we’ll cover this option below.
Example Form Embed
This complete example follows the steps above for best practices when embedding a form on your page. This form uses the button launcher.
Content below the form will be pushed as the form height changes throughout the donation flow
Recommended for most donation pages
grow_overflow
Form appears where it’s inserted into the page
Content below the form will be overlapped as the form height changes throughout the donation flow
overlay
Form appears centered as the topmost layer on your page
Good option when you want to center the form over a fullscreen background image or video
overlay_background
Form appears centered as the topmost layer on your page
Similar to overlay, but with a fullscreen color overlay behind the form
This is most like the normal popup version of the form
Show button on mobile
The placed form is not responsive on mobile like the popup form. On mobile, you may want to hide a placed form and show a popup button instead. This example uses CSS media queries.
If you're inserting the form into your page layout (and not using an overlay method), the form has no alignment styles. You can align the form by targeting the element inside the placed form container <div></div>. The example below shows a centered placed form.
Much of this documentation details further configurations for your forms. Because there are many ways to configure your forms, the hierarchy of how each level of configuration is applied is important. Configurations at a lower level will not override those at a higher level (1 overrides all, 2 overrides 3 and 4, etc.) Configurations are applied in the following order:
URL parameters
HTML button attributes
JS configuration
Form settings in platform
HTML Button Attributes
Launch a form with custom prefills and defaults using HTML button data attributes. For example, you might want to open the same form with two buttons: donate now and donate monthly. This is easy to accomplish with the frequency attribute.
Allocation
Default the Allocation by adding data-allocation=“xxxx” to your launch button. Use the Allocation Id for the value. To default an Allocation, the Allocation must be added to the form in platform.
Default the frequency by adding data-frequency=“x” to your launch button. Use o, w, m, q, and y for one-time, weekly, monthly, quarterly, and yearly. To default a frequency selection, the frequency must be added to the form in platform.
Default the payment method by adding data-paymentmethod=“xxxx” to your launch button. Available options include: card, check, paypal, bitcoin. To default a payment method, the payment method must be added to the form in platform.
Add transaction tags to a form with data-tags=“xxxx” in your launch button. Tags added through a button are in addition to tags set in platform.
Tickets
Launch the form with specific tickets and quantities selected by adding data-tickets=“xxxx|1,xxxx|2” to your launch button. The format for this attribute is “ticket id|quantity,ticket id|quantity,…” To default a Ticket selection, the Ticket must be added to the form in platform.
You can set default form values with javascript in the Form Configuration Code. This will initiate the form with your set defaults. These configurations allow for extra control per form instance. For example, you may want to use a single form, but configure this form uniquely based on the page it’s added to.
Good to Know
These examples are using a button launcher to open the form, but you can also use JS configs for a placed form.
Allocation
Default the Allocation by adding allocation:xxxx to your form config code. Use the Allocation Id for the value. To default an Allocation, the Allocation must be added to the form in platform.
By default, your form uses your platform currency. You can override the default currency or add multiple currencies to your forms. You can also configure the ask string and Operations Tip amount for each currency.
Default the frequency by adding frequency:'x' to your form config code. Use o, w, m, q, and y for one-time, weekly, monthly, quarterly, and yearly. To default a frequency selection, the frequency must be added to the form in platform.
By default, the native Giving Form on a Campaign Site adds Transactions to the appropriate goal progress bars on your site. You can additionally configure any form to impact a site’s progress bar by assigning a Page Id to the form.
Payment Methods
Default the payment method by adding data-paymentmethod:'xxxx' to your form config code. Available options include: card, check, paypal, bitcoin. To default a payment method, the payment method must be added to the form in platform.
Default the Transaction tags captured with a Transaction by adding tags:'x' to your config code. Tags added through the config code are in addition to any tags added to the form in platform.
Tickets
Default the form with specific tickets and quantities selected by adding tickets:'xxxx|1,xxxx|2' to your form config code. The format for this attribute is 'ticket id|quantity,ticket id|quantity,…' To default a Ticket selection, the Ticket must be added to the form in platform.
You can limit the quantity of a particular Ticket that can be purchased with a single Transaction. For example, you might have 10 sponsorship tickets, but you only want to allow one sponsorship ticket to be purchased at a time. Please note: The purpose of this configuration is to limit quantity PER transaction. The overall number of Tickets available is set in platform.
Use Event Handlers, onSetup, onInfo, onSuccess, and onFailure to run custom functions or pass data to other systems. Pass donor and donation properties into your custom functions as arguments, based on the stage of the donation process.
As you’ve probably figured out, PayPal is special. To transact recurring donations with PayPal through the Funraise Giving Form, you’ll need to update configurations to the form code and within your PayPal account.
in Paypal
Enable all API permissions
This step assumes you’ve already implemented PayPal as a payment option
Log in to your PayPal Business Account and find API access settings
Enable ALL permissions for nathaniel_api1.spreedly.com (Yes, every single box needs to be checked.)
Next, contact PayPal support
Click 'Help' in the top navigation bar
Scroll down and select 'Contact Us'
Choose topic: Business solutions
Choose sub-topic: PayPal payment solutions
Choose sub-topic: PayPal Express Checkout
Scroll down and select 'Chat With Us'
When you’re in contact with a PayPal representative: Ask them to enable reference transactions for the account. At this point, PayPal will begin asking a lot of questions. Be sure a team member who has access to answer very detailed questions is available 👍
Funraise Form configuration
After your PayPal account has been configured, you can activate recurring for PayPal with a single configuration line in the form code.
With Event Handlers, you can redirect the donor to a new page after a successful donation. This can be used for a special "Thank You" page or for analytics tracking. Please keep in mind, as with all custom implementations, this is only an example and not all browsers will treat this the same way. Be sure to fully test your unique solution.
Please Note
PayPal and Bitcoin transactions can not be redirected with this configuration. Because these payment methods conduct processing offsite, a redirection with onSuccess will cause transactions to fail. In the example below, we've applied a redirection rule to all payment methods except PayPal and Bitcoin.
You can add a redirection link for a PayPal transaction from within the Giving Form editor.
You can default form values with URL parameters. Add one or many parameters to the end of your URL to configure form defaults. To default allocation, frequency, payment method or tickets, the item must be added to the form in platform.
