Qgiv’s donation, peer-to-peer, and auction forms support adding your own HTML and CSS to embed custom elements and create custom designs. This article will show you the basics of adding custom code to your forms in Form/Campaign/Event Builder. We’ll also share some examples of things you might want to embed.
Please note: This article offers an overview of the custom coding options supported on Qgiv forms, but it doesn’t go into specifics about coding. If you don’t have someone comfortable with HTML or CSS on your team, some of our partners may be able to help!
Contents:
To start, navigate to Form Builder (for donation forms), Campaign Builder (for peer-to-peer forms), or Event Builder (for auction forms).
Donation forms
Peer-to-Peer
Auctions
Within Form/Campaign/Event Builder, there are several ways you can edit source code.
Custom Content Widget
The Custom Content widget is the most versatile way to add custom code to your forms. It’s supported across all our products and can be used with minimal coding experience, as long as you have an embed code—a block of HTML provided by another site—for the element you want to include.
With this widget, you can embed a single element on a page of your form.
Drag and drop the widget where you’d like it to appear on the form. The content editor should open immediately, but if it doesn’t click the gear icon to open the editor.
Click Source at the top of the content editing area.
You can now type an embed code or other HTML into the text area. Click Update to save your changes.
For this example, we’ve embedded a Spotify playlist on a peer-to-peer page, using the embed code provided by Spotify.
Additional Code Editing
Donation Forms
You’ll find a similar Source button in the Edit Top Content and Edit Bottom Content areas of your donation forms.
Once you click Edit Top/Bottom Content, you’ll see a content editor like the one in the Custom Content widget. Click Source to edit the code in that area.
When you’re done, click Save Top/Bottom Content to save your changes.
Peer-to-Peer and Auction Forms
You can also edit HTML in the header and footer areas of your peer-to-peer or auction site.
To access the HTML editor, look for the </> icon next to the Change Banner Image button.
This will open the Custom HTML Editor for the header or footer of the site.
Click Update Custom HTML to save any changes you make.
Advanced Tab
Donation Forms
To make more global design changes to your donation form, use the Advanced tab on the right side of the screen.
Use this area to add custom design elements, such as brand-specific fonts, icons, and custom buttons to your form. Most commonly, we see users embed custom CSS to override the default styles on the form and to extend the size of the banner image.
Please note: The CSS code changes you make here will carry over to each page on the form.
Peer-to-Peer and Auction Forms
Peer-to-peer and auction forms support additional custom code options, including page-specific settings.
The following areas support only HTML, but with tags, you can add a bunch of different content, including:
- Plain HTML
- CSS loaded in via an external stylesheet or via inline </style> tags
- JavaScript loaded in via an external stylesheet or via inline </script> tags
The possibilities are really up to you and your level of comfort with HTML coding.
You can also use these areas to add Google Analytics tracking to your forms. To read more about how to add Google Analytics to your peer-to-peer site, check out this article.
In the Page Specific Header and Page Specific Footer areas, you can add custom meta tags, stylesheets, and scripts to the specific page you’re editing.
In the Global Page Settings area for peer-to-peer and auction sites, you’ll find editing areas for Custom CSS, Additional Header Content, and Additional Footer Content.
Please note: The changes you make here will apply throughout the peer-to-peer or auction site.
Examples
Below are just a few examples of elements you can embed on your Qgiv forms. Generally, all you need is an embed code provided by the third-party app developer.
Maps
Google Maps allows users to embed an interactive map on their sites and pages. This is great for any in-person event, and it’s especially helpful if your event involves multiple locations that you need to provide directions between.
Just pull up maps.google.com and search for the location—or directions!—that you want to share.
Click the menu icon of three horizontal lines, and then click Share or embed map from the menu.
Select the Embed a map tab, click Copy HTML, and then paste the embed code in the custom content widget on your form.
Spotify playlists
Embedding a custom Spotify playlist can be a really fun way to drive engagement with your peer-to-peer campaign. For example, if you’re hosting a 5K run, a special running playlist can get participants pumped up!
Pull up the playlist you want to share. Then click the icon of three dots. Choose Share from the menu and then Embed playlist.
Spotify offers some additional color and size options in the resulting menu. Once you’ve made your selections, click Copy to copy the embed code, and then paste it in the custom content widget on your form.
Instagram posts
Qgiv’s Form Builder includes a gallery widget, but if you want to promote a specific post on your organization’s Instagram page, you can generate an embed code from instagram.com.
Just pull up the Instagram site on a computer, navigate to the post you want to embed, and click the icon of three dots in the upper-right corner. Then choose Embed from the pop-up menu.
Copy the embed code and then paste it in the custom content widget on your form.
Strava widget
Another great resource for walk and run events is the Strava widget, which allows users to track and post their fitness achievements. We have a full article on embedding the Strava widget on your peer-to-peer forms. Check it out here!
Design elements
In addition to embedding cool widgets, users can use custom code to create design elements on your forms.
Care and Share Food Bank for Southern Colorado used CSS to add these adorable produce icons to their donation form.
Because the sky really is the limit with custom CSS, we can’t show you exactly how to implement everything you might want. If you don’t have someone comfortable with CSS on your team, some of our partners may be able to help!