Knowledge Base

Get Started    Support

Donation Form Setup

Topics:

  1. Donation Form Setup
  2. Theming and Colors
  3. Embeddable Forms
  4. Hosted Pages
  5. Popup Button
  6. Adding Images (If you're using our hosted form or one-click donations, not needed for our embedded form or popup form)
  7. Donation Form to Opportunity Record Features
  8. Testing Donation Forms

Donation Form Setup

From the 'Donation Forms' tab in blackthorn | 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.

Required Fields
Without values in the following fields on the Donation Form, the form will give an error. Required fields include:

  • Payment Gateway
  • Currency
  • Frequency
  • Amount Page Layout

"Allow Custom Amount" Pick List Field

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.

Location of "Allow Custom Amount" Field and Related Donation Form Amounts


Theming and colors

In the Form Color field, many value types are supported, such as the value types from here: https://material.io/guidelines/style/color.html#. More coming on this soon...


Embeddable forms

Copy/Pasting: 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 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>

Hosted pages

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.


Popup button

  1. Add the BT Donations loader script to any webpage
<script src="https://donations.blackthorn.io/loader"></script>
  1. 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>

Adding Images

All images added to our hosted form need to be in https format

If you'd like to use Salesforce to host your images:

  1. Switch to Salesforce Classic
  2. Navigate to the Salesforce Documents tab
  3. Select "New" to upload a new document
  4. Enter in:
    Document Name: Anything you would like
    Externally Available Image: Select the checkbox
    Folder: Anything besides "My Personal Documents"
    
  5. Upload your image
  6. Click Save
  7. Right click on your Image
  8. Select "Copy Image Address"
  1. 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

There are three Opportunity fields that can be set from Donation Forms:

Opportunity Stage (Success), Opportunity Stage (Failure), and 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.

With the exception of Form Questions, our current Donation Form does not allow you to set additional Opportunity Fields.

Things to note when creating your Process Builder:

1) Start: Select Opportunity as your Object
2) Start the Process: only when a record is created

3) Select Save
4) Next, Define Criteria for this Action Group

This step is very important because you only want to fire the process builder for Opportunities created through your Donation Form.

5) Name: Opp Created by Donation Form
6) Criteria for Executing Actions: Conditions are met
7) Set Conditions:

Field: [Opportunity]:Donation360__Form_Submission__c
Operator: Does not equal
Type: Global Constant
Value: $GlobalConstant.Null
  1. 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 donation 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.

  1. Navigate to Setup | In the quick find/search box, type in: Deliver
  2. Click on "Deliverability"
  1. Change the Pick List to "All email"
  1. Click Save

Donation Form Setup