Embeddable donation forms can diversify fundraising by creating new avenues to raise awareness and donations. Partner with influencers, churches or community programs to broaden your reach and hit your fundraising goal.
To create the donation page you wish to embed on your site:
Login to your Givecloud admin dashboard.
Head to Features > Sell & Fundraise > Items.
Click "Add" to create your donation item.
Keep in mind, only items set with Price Type "Donation" are available with embedded donation forms.
Once you have set up your item, click on the "Embed" tab located on the left-hand side.
Choose between light or dark mode.
Choose which primary color scheme you'd like.
Preview the look to make sure it's what you want
Copy the embed code.
Paste the embed code onto your website (this can be an external website or your Givecloud website) where you'd like the donation form to display.
Not currently supported with embeddable forms:
Custom fields are currently not supported - if you have any custom fields set up on this item, they will not show on your embedded form.
PayPal Express Checkout is currently not supported - if you have a PayPal Express checkout integrated, this will not be a payment option.
GoCardless is currently not supported - if you're using GoCardless as your payment processor, you will be unable to use embeddable donation forms.
Tracking a contribution made via an embedded form:
All contributions created by the embedded donation form will have the source, "Web-Embedded."
Filter the source field on the contributions screen to pull a list of all donations made via an embedded form.
See what site the contribution came from by reviewing 'Referring Website' located under Payment on contribution directly, or in the Contribution Report export under 'Referral Website.'
Add Embeddable Donation Form to a Page on Givecloud with Image
To add an embeddable donation form to a page on Givecloud with an image to the left,
Copy the embed code from the item page.
Go to the page you wish to add the code, then select Template. Under Components, add the 2 Columns template.
3. Once the template is added, toggle the Visual / Code tabs on the page editor tool's right-hand side, then paste the embed code after the second <div class="mceEditable"> on the page.
<div class="col-12 col-md-6">
<div class="mceEditable"><iframe style="height: 800px; max-width: 400px; width: 100%;" title="Embed Today! embedded form" src="https://theme-global.givecloud.co/embed/donation/1CD5C45?theme=light&primaryColor=indigo&title=Embed Today!&summary=Embed Givecloud donation forms directly on your external website (Woo Commerce, WordPress, Squarespace & more) with Embeddable Donations Forms." frameborder="0"></iframe></div>
4. Toggle the Visual / Code tabs on the page editor back to visual and review the form.
5. Add the image to the left-hand side of the column by selecting ad Media. Right click on the image you just added and from the list click on "Image", Adjust the dimensions of the image to Width: 100% and Height: Auto to ensure responsiveness.