- 13 Jul 2022
- 4 Minutes to read
Donation Form Setup
- Updated on 13 Jul 2022
- 4 Minutes to read
- Donation Form Setup
- Theming and Colors
- Embeddable Forms
- Hosted Pages
- Popup Button
- Adding Images (If you're using our hosted form or one-click donations, not needed for our embedded form or popup form)
- Donation Form to Opportunity Record Features
- Testing Donation Forms
Donation Form Setup
From the Donation Forms tab in Donations, you can create Donation Forms by point-and-click. Forms can be surfaced in three primary ways: by embedding the form within a page on your site, through a popup invoked by a "Donate" button click, or as their own hosted page.
Without values in the following fields on the Donation Form, the Form will give an error. Required fields include:
- Payment Gateway
- Amount Page Layout
Even though it not marked required, you will either need to pick a value in this field or create a related Donation Form Amounts. The Form will fail if both are empty.
Theming and colors
In the Form Color field, many value types are supported, such as the value types from here. More coming on this soon...
When you copy and paste the embed code from Salesforce into your website, make sure the quotes ( " ) are not 'fancy' quotes, which look like regular quotes but in italics/on a slant. Fancy/slanted quotes will not work in the web form, they must be changed to standard quotes.
Centering the Form
The embed code and form may not center correctly inside of your web app. Try out this HTML code snippet and see if it does the trick:
<div style="display: flex;justify-content: center;"> PASTE-YOUR-<SCRIPT></SCRIPT>-CODE-HERE-AND-DELETE-THESE-WORDS </div> Example: <div style="display: flex;justify-content: center;"> <script src="https://donations.blackthorn.io/loader" data-context="IDj9HTvPqVGvkIIZolj5tlecGq6CshV6zIJLB_Sd4rmh7UPPQz5JzYfBXmZP2XLwtK-Q2woMFzOG-7XhOKQSEQ"></script> </div>
A link is auto-generated on each Donation Form that serves as your hosted page. The fields within the two hosted page sections with corresponding help text are used to configure the hosted page. The pages are hosted on blackthorn.io's Heroku instance and have an SSL certification so the browser shows the 'security lock' on it. The embedded form is also secure, even if it's not on a secure site, because the data passed through it goes through our iFrame.
- Add the BT Donations loader script to any webpage
- Create a link to any hosted donation form and set target property to "popup". In the href, use the full URL of the Hosted Page URL from your Donation Form record.
<!-- Example of popup for on a text link --> <a href="https://donations.blackthorn.io/<some_valid_form_goes_here>" target="popup">Donate</a>
<!-- Example of popup form with a clickable image --> <a href="https://donations.blackthorn.io/<some_valid_form_goes_here>" target="popup"> <img src="https://some.domain.com/custom_donate_button.png" /> </a>
If you'd like to use Salesforce to host your images:
- Switch to Salesforce Classic.
- Navigate to the Salesforce Documents tab.
- Select "New" to upload a new document.
- Document Name: Anything you would like
- Externally Available Image: Select the checkbox
- Folder: Anything besides "My Personal Documents"
- Upload your image.
- Click Save.
- Right click on your Image.
- Select "Copy Image Address".
- Place this copied address into the "Logo URL" field on your Donation Form. Here's an example of the URL: https://blackthornio--c.na34.content.force.com/servlet/servlet.ImageServer?id=01561000002J0gn&oid=00D61000000HaMM&lastMod=1508162524000
We recommend removing the &lastMod=____ because then in the future you can just go to the Document and click Replace Document without having to update your Donation Form with each modification URL ID. So instead use this URL: https://blackthornio--c.na34.content.force.com/servlet/servlet.ImageServer?id=01561000002J0gn&oid=00D61000000HaMM
Setting Opportunity Fields from Donation Form
- Opportunity Stage (Success)
- Opportunity Stage (Failure)
- Opportunity Record Type
If you would like to set any other fields based on your donation information, the best way would be through creating a Process Builder.
Things to note when creating your Process Builder:
- Start: Select Opportunity as your Object.
- Start the Process: "only when a record is created."
- Click Save.
- Define Criteria for this Action Group.
- Name: "Opp Created by Donation Form"
- Criteria for Executing Actions: "Conditions are met."
- Set Conditions:
- Field: [Opportunity]:Donation360__Form_Submission__c
- Operator: Does not equal
- Type: Global Constant
- Value: $GlobalConstant.Null
- Conditions: "All the Conditions are met(AND)"
From here you can create your specific immediate actions that pertain to your business process.
Example: When a Donations Form Amount is "greater than/equaled to $1000", set Membership Level to "Gold Status".
Testing Donation Forms
Enable Email Deliverability
In sandbox environments you will need to enable email deliverability otherwise you will receive a "No Mass Mail Permission" error.
Navigate to Setup.
In the quick find/search box, type "Deliver".
Click on "Deliverability."
Change the Pick List to "All email".