Skip to main content

Embedding a Bloomerang Fundraising Form on a Peer-to-Peer Page

Updated over 2 weeks ago

This article will teach you how to embed a Bloomerang Fundraising donation form on a page of your peer-to-peer site.

Contents:

Before you begin, make sure both the peer-to-peer campaign and the donation form exist in your Bloomerang Fundraising account.

Create a New Page in Campaign Builder

Open your peer-to-peer form and navigate to Campaign Builder.

Campaign Builder and View Campaign Pages buttons.png

Scroll to the bottom of the drop-down menu, and click + Add New Page.

Event_Builder_navigation_dropdown_with_arrow_pointing_to_Add_New_Page_option.jpg

Choose the layout for your new page. You have several to choose from, but typically a single column is best when embedding a form.

Create_New_Page_layout_options_with_One_Column_Centered_Layout_selected.jpg

Click Insert One Column Centered Layout.

Insert_One_Column_Centered_Layout_link.jpg

Under the “Save Page” button, click the toggle next to Published so it displays as green. Then click Save Page.

Save_Page_area_with_box_around_Published_toggle_in_bottom_left_corner.jpg

Add Button Widget to the Home Page

Using the drop-down navigation menu, scroll up to the top and click Home Page.

Navigation drop-down with Donation Form Additional Details step highlighted.png

Drag and drop the Button widget onto your Home Page.

Dragging_button_widget_onto_Event_Home_Page_gif.gif

In the Links To drop-down menu, choose Site Page. In the Select A Page drop-down menu, choose your custom page.

Button_Widget_settings.jpg

You can also customize the Button Text to say whatever you like. For Button Style, you can choose Standard or Alternate. Feel free to try them both to see which you like better!

Click Update to see your new button.

Button_widget_with_text_that_reads_Donate_to_our_campaign_.jpg

Repeat this process as many times as necessary to place donation buttons all over your page.

Be sure to click Save Page to save your work.

Add Page Link to Site Navigation

If you like, you can also include a link to your new donation page in the peer-to-peer site’s navigation bar. Depending on your site’s Theme Layout, the navigation bar will be along the top or on the left side of the page.

Standard: Horizontal Navigation

Top_of_P2P_page_in_Event_Builder_with_box_around_navigation_links.jpg

Alternate: Vertical Navigation

Left_side_of_P2P_page_in_Event_Builder_with_box_around_navigation_links.jpg

On the navigation bar click the + or + Add Link button.

Plus_sign_button.jpg
Plus_sign_button_with_Add_Link_text.jpg

In the Link Label field, type what you’d like the link to say. In the Links To drop-down menu, choose Site Page. In the next drop-down menu, choose your custom page. Check the box if you want the link to Open in a new window.

Add_Link_settings.jpg

When you’re done, click Add Link. Then, click Save Page.

Save_Page_button.jpg

Click the link at the top of the page to Exit Campaign Builder.

Copy Link to New Page

Now we’re going to start embedding the donation form, but first you need to copy the link to the new page on your peer-to-peer site.

From your peer-to-peer form's control panel, click Campaign Home by hovering over View Campaign Pages at the top of the screen.

Campaign Builder and View Campaign Pages buttons.png

Click on button widget or navigation link you added earlier to open the new page you’ve created.

The page will be blank right now. What you need is the URL in the browser tab.

URL_bar_with_p2p_site_link_highlighted.jpg

Highlight the URL, and then right click or type Ctrl+C to copy it.

Set Up an Org-Level Widget

Navigate to your organization-level control panel in Bloomerang Fundraising, and click Embed in the Fundraising menu.

Fundraising nav item with menu and box around Embed.png

Then, click Add New Widget at the top of the screen.

Add_New_Widget_button.jpg

In the Type drop-down, choose Form. In the Select a Form drop-down, choose the donation form you want to embed.

Type_and_Select_a_Form_dropdowns_in_Add_New_Widget_settings.jpg

Label your widget, if you want. This field is optional, but it’s useful for distinguishing between widgets if you ever need to re-copy the HTML code for a particular embedded form. Use the Direct Link To drop-down if you want link donors directly to a specific restriction, donation amount, Giving Plan, or event on your form.

Label_and_Direct_Link_To_fields_in_Add_New_Widget_settings.jpg

In the Page URL field, paste the URL to your custom page that you copied from your web browser.

Page_URL_field_in_Add_New_Widget_settings.jpg

Click Save.

Save_button.jpg

The site will generate some HTML code, which you’ll use to embed your donation form.

Embed_code_for_P2P_site.jpg

Copy the HTML by highlighting the code and then right-clicking or typing Ctrl+C.

Embed the Donation Form

Navigate back to your peer-to-peer form using the Forms menu or selecting Manage Form from the Form Management page.

Click on Campaign Builder.

Use the drop-down menu to navigate to the custom page you’ve created. Then, drag and drop the Custom Content widget onto the page.

Custom_Content_widget_button.jpg

Click Source in the widget settings.

Custom_Content_widget_settings_with_arrow_pointing_to_Source_button.jpg

In the Content area, paste the HTML you copied earlier. (If you ever need to re-copy a widget’s HTML code, simply navigate back to the Org-Level Settings > Widgets area.)

Custom_Content_widget_settings_with_embed_code_pasted_in_the_Content_area.jpg

Click Update in the widget settings to see your newly embedded form!

Donation_Form_embedded_on_P2P_page.jpg

Click Save Page to save your work.

Exit Campaign Builder, and click Campaign Home within View Campaign Pages.

Campaign Builder and View Campaign Pages buttons.png

Click the link in your navigation bar and any button widgets you added to make sure the links work correctly and the embedded donation form looks good.

Gif_demonstrating_that_the_new_links_navigate_to_the_embedded_donation_form_-_smaller.gif
Did this answer your question?