This article will teach you how to embed a Qgiv donation form on a page of your peer-to-peer site.
Contents:
- Create a New Page in Campaign Builder
- Add Button Widget to the Home Page
- Add Page Link to Site Navigation
- Copy Link to New Page
- Set Up an Org-Level Widget
- Embed the Donation Form
Before you begin, make sure both the peer-to-peer campaign and the donation form exist in your Qgiv account.
Create a New Page in Campaign Builder
Open your peer-to-peer form and navigate to Campaign Builder.
Scroll to the bottom of the drop-down menu, and click + Add New Page.
Choose the layout for your new page. You have several to choose from, but typically a single column is best when embedding a form.
Click Insert One Column Centered Layout.
Under the “Save Page” button, click the toggle next to Published so it displays as green. Then click Save Page.
Add Button Widget to the Home Page
Using the drop-down navigation menu, scroll up to the top and click Home Page.
Drag and drop the Button widget onto your Home Page.
In the Links To drop-down menu, choose Site Page. In the Select A Page drop-down menu, choose your custom page.
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.
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
Alternate: Vertical Navigation
On the navigation bar click the + or + Add Link button.
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.
When you’re done, click Add Link. Then, click Save Page.
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.
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.
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 Qgiv, and click Embed in the Fundraising menu.
Then, click Add New Widget at the top of the screen.
In the Type drop-down, choose Form. In the Select a Form drop-down, choose the donation form you want to embed.
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.
In the Page URL field, paste the URL to your custom page that you copied from your web browser.
Click Save.
The site will generate some HTML code, which you’ll use to embed your donation form.
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 Go To A Form link or selecting Manage Form from the My Qgiv > Forms 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.
Click Source in the widget settings.
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.)
Click Update in the widget settings to see your newly embedded form!
Click Save Page to save your work.
Exit Campaign Builder, and click Campaign Home within View Campaign Pages.
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.