GFM Pro - logo

Embed a donation form on WordPress

  • Updated

In this article:

Before you start

The first step is to create an embedded donation form.

If you've previously added an embedded form to your site, we recommend removing the install snippet so it doesn't interfere with your new Studio form. If the form was added with WPCode, you can deactivate the WPCode plugin to remove the snippet from your site.

To embed a donation form on your WordPress site:

  1. Safelist your website
  2. Install and activate the plugin
  3. Add the donation form to your page

Safelist your website

To make sure your embedded form appears, safelist your website. If you need to add multiple domains (such as a test site or sandbox), follow these steps:

  1. Go to the Settings tab in the Studio designer
  2. Select Install
  3. Under Safelisted domains, add the URL of each website where you plan to embed the form
  4. Publish or Update your campaign to push through the changes

Not sure what to safelist?

You’ll want to add the domain name for the site you plan to use the form. For example, if your organization’s website is nonprofit.org, then add that to your safelist.

This ensures embedded forms will work across all of the site’s pages, including nonprofit.org/about or nonprofit.org/donate.

Install and activate the plugin

To add embedded campaigns to your WordPress site, we recommend our free WordPress plugin. The plugin automatically adds your organization’s Install snippet to your WordPress site.

To install the plugin:

  1. Go to your WordPress site’s admin settings
  2. In the menu, select Plugins
  3. Choose Add New Plugin
  4. Search for GoFundMe Pro
  5. Select Install Now
  6. Once installed, select Activate

Important: You can ignore the warning about the plugin's compatibility with the latest version of WordPress. The plugin is working as expected, and we're actively working to update the message.

To complete activation, you need to add your GoFundMe Pro organization ID to the plugin’s settings.

Add your organization ID

To add your organization's ID:

  1. In the menu, select Settings
  2. Choose GoFundMe Pro
  3. Enter your organization ID and save

Need help finding your organization ID?

You can find it in the URL of any of your GoFundMe Pro account pages. The organization ID is the set of numbers that appears after admin/ in the URL.

Add the donation form to your website

Once the plugin is activated and your organization ID is added, you can start adding the donation form to your WordPress site.

Options for embedding the donation form:

  • Donate button: Link a button that opens the embedded form when selected.
  • Inline donation grid: Embed the form directly on the page.

To link a donate button:

  1. On your campaign’s Install page, select Copy campaign parameter
  2. Go to your WordPress site's editor
  3. Select your Donate button
  4. Select the Link icon
  5. Paste in the parameter

Donate button linked to the URL parameter

Note: The exact steps in WordPress will depend on your configuration, including any plugins you’re using to build the site. Plugins such as Elementor, Beaver, and Divi may affect the exact steps for adding your form.

To embed the form on a page:

  1. On your campaign’s Install page, select Copy inline embed code
  2. Go to your WordPress site’s editor
  3. Add a Custom HTML block in the location where you want to place the form
  4. Paste the code into the Custom HTML block, then Save and Publish the page

WordPress HTML block

When supporter's select either option, the embedded form will open on the page.

Share a direct link to your form by attaching the campaign parameter to your URL (e.g., https://yournonprofit.org/?campaign=12345). This will open the form as soon as visitors land on the page.

Legacy donation forms

To add a legacy embedded form to your WordPress site, we recommend installing the WPCode Plugin, which makes it easy to install the donation form’s code to your website’s footer.

Copy embed code

First, find and copy your embedded form’s code embed.

  1. Go to your embedded form’s campaign editor
  2. Select the Installation tab
  3. Copy the embed code

Embed code installation instructions

Install WPCode Plugin on WordPress

  1. Log in to WordPress
  2. In the menu, select Plugins and Add New

Plugins menu item in Wordpress

Note: If you don't have the Plugins option, your account doesn't have the necessary permissions to add plugins. Reach out to someone on your team to get access.

  1. Search for and select WPCode – Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager
  2. Select Install and activate

Video of a user installing WPCode

Add the code embed to your website’s footer

Once you install the WPCode plugin, you’ll have a new menu item called Code Snippets.

  1. In the menu, select Code Snippets and + Add Snippet
  2. Under Add Your Custom Code (New Snippet), select Use Snippet
  3. Name your code snippet
  4. Under Code Preview, paste the code embed from your embedded donation form

Code embed pasted into a Wordpress site's footer

  1. Under Insertion, select the dropdown next to Location and choose Site Wide Footer
  2. Then, toggle on Active and Save Snippet

Add the donation form to your website

Once you add the code embed to your website’s footer, the following steps for adding the donation form will depend on the form’s type:

  • For popup embeds, you can link your donate button to the URL parameter provided.
  • For inline embeds, you’ll need to add an HTML block to your page and adjust the element selector in the code embed added to your website’s footer.

Add a popup embed

Once you add the code embed to your website’s footer, all you need to do is link your donate button to the URL parameter provided. When supporter’s select the button, the URL parameter will attach itself to the end your website’s URL and the popup form will appear.

To link a popup embed on your WordPress site:

  1. Return to your donation form’s Installation tab
  2. Copy the URL parameter (E.g., ?campaign=YOUR CAMPAIGN ID)
  3. Go to your WordPress site's editor
  4. Select your Donate button
  5. Select the Link icon
  6. Enter your donation form's URL parameter

Donate button linked to the URL parameter

Be sure to link to the URL parameter, not the full web address. Linking to the full web address will refresh the page and slow down your donation form.

Do

  • ?campaign=12345

Don’t

  • https://yournonprofit.org/?campaign=12345

You are all set! Make sure to test your website and visit our troubleshooting guide when you run into any issues.

Tip: You can share your website’s full URL with the parameter attached (E.g., https://yournonprofit.org/?campaign=12345) to open the form immediately when supporters visit the page.

Add an inline embed

To add an inline embed to your website:

  1. Go to your WordPress site's editor
  2. Add a Custom HTML block where you want to embed your form

Custom HTML block option in Wordpress

  1. Enter <div class="classy-inline-embed"></div> into your custom HTML block
  2. Return to the code embedded in your website’s footer
  3. Replace SELECTOR FROM YOUR WEBSITE with .classy-inline-embed

Replace selector with classy inline class

Want to add another campaign to your website?

You can include a pop-up and an inline embedded campaign on your website. However, you need to edit the code embedded in your footer to accommodate two campaigns. Simply adding another code embed won't work.

Learn how to add multiple campaigns to your website

Troubleshooting

Check out our troubleshooting article for help when you run into any issues.

Frequently asked questions

I've already added a GoFundMe Pro embedded form to my site. Do I need to remove the install snippet to use the WordPress plugin?

Yes, we recommend removing other embedded form snippets so they don’t interfere with your new Embedded Studio form.

If you added a form previously using WPCode, you can simply deactivate the WPCode plugin to remove the snippet from your site.

Related articles

Not seeing what you need?

Contact us