Webforce Connect - Donation: Donation Forms
- AlphaSys
Webforce Connect: How to use WFC to create a Donation Page
As the Fundraising manager of non-profit organisation with an existing Wordpress website, you would like to receive Donations online, via customisable donation pages, and have them synced to your CRM - Salesforce.
Webforce Connect - Donations can provide all these things. It has a friendly interface and with just a few easy steps, you can build a customised donation form. Follow these steps to set it up.
Once you have installed the plugin, Go to the Wordpress Dashboard. On the left side of the page you will see the Webforce Connect menu. Under that, choose Donation. It will show four different buttons. Select Donation Form to begin creating new form.
Under Donation Form you can see all the donation forms created. Click the Add Donation Form button to create a new donation form.
This will show you the different tabs that will be used in creating the Donation Form.
Enter the title of the Donation Form. You can optionally add a media file. We will name it Crusade Against Hunger Donation.
The General donation form settings section contains the settings and configurations needed and displayed into the front-end donor-facing form. Choose One-off and Monthly for Donation Types, as we want to accept both once-off and recurring donations, and leave the rest of the fields as their defaulted values.
Here is a brief explanation of what the other fields do
Show Tribute Field, if enabled, the tribute field for donations in honour of someone will be available on the form.
Tribute Field Caption, if enabled, this field adds a caption to the “Tribute Field” field on front-end donation form, for additional description or instructions.
Salesforce Campaign field allows you to attribute the donation to a campaign within Salesforce.
Re-sync Campaign action refreshes and re-syncs the list of campaigns available from Salesforce.
Salesforce GAU field allows you to direct funds to a specific General Accounting Unit in Salesforce
Re-sync GAU action refreshes and re-syncs the list of GAU’s available from Salesforce.
Donation Types, the Donation Types selected from these checkboxes will be displayed on the front-end Donation Form. (Note: It is required to select at least one from these options.)
Donation Form Filter field allows us to broaden search filter to this donation form.
The Amount section contains the currency settings for our Donation Form, which are shown on the front end.
Donation Target field sets our donation’s target amount.
Minimum Amount field sets the minimum amount for our Donation Form Transactions.
Hide custom amount on form switch, if enabled, the custom amount field on the form will be hidden, so the donor can only choose from the preset amounts.
Make custom amount default switch, if enabled, the custom amount (Other Button) on form will be selected by default.
Amount Levels dictates the preset amounts to be displayed on the Donation Form.
Separate amount field from amount buttons switch, if enabled, the amount buttons will be displayed first and then the amount field at the bottom.
Set Currency field sets the currency to be used on the Donation Form transactions.
Reset Data resets values from sortable fields to default values.
When you click the Add Amount Level button it will display the Amount field and Default Selected switch.
Amount sets the desired fixed amount to be displayed as amount options on the front end Donation Form.
Default Selected sets an option as default on the front end Donation Form. (Note: Only one option can be selected as default.)
The Form Fields section allows you to set the form elements necessary for the donation form. The list of fields that you see are the default fields in Donation Form. You can add more if you want.
Add Item button allows you to add additional fields for the donation form. (Note: Important fields are already provided and non-deletable.)
Reset Data resets values from sortable fields to default values.
After you click the Add Item button it will show up the field properties. You can also add extra fields in your donation form.
Label sets the name for the form element.
Key sets the slug or APIname of the field. (Note: Entries for this field mustn’t have white space.)
Field Option sets the display type of this element - shown, hidden or required.
Type allows user to select the type of form element we want to display.
Text displays the form element as a text input element and it has only one line.
Select displays the form element as a picklist element. You can enter the picklist values in the additional field, separated by comma( ,).
Textarea displays the form element as a text area input element and it has multiple lines.
Checkbox displays the form element as tick box input element. If you have multiple options, you can enter the different values in the additional field, separated by comma( , ).
Payment Fields section allows us to select gateways and re-arrange our credentials fields based on how we want it to be displayed on our front-end Donation Form. For our example, we will choose Ezedebit Junjie Gateway Sandbox for Payment Gateways.
Payment Gateways enabled and configured Payment Gateways are displayed here. You can then select the gateway(s) to be displayed on the front end Donation Form for the donation payment processing.
Credit Field allows you to customize labels and re-arrange the fields for Credit Card transactions based on how the you want it displayed in the front end Donation Form.
Debit Field you to customize labels and re-arrange the fields for Debit Card transactions based on how the user want it displayed in the front end Donation Form.
Reset Data resets values from sortable fields to default values.
Thank You Email section allows to send a message of gratitude to every donor.
Enable sending thank you email, if set to “ON” this will enable sending of the thank you email to the donor for every donation made.
Test Email allows you to test the donation mailer.
Thank you Email Message construct or edit the default message that will be sent to the donor.
Thank You Page section is the page the donor will be redirected to after the donation is submitted.
Thank You Page Title set the title of the thank you page.
Thank You Redirect URL set the desired URL to redirect the donor to after donation is made. If there is no value set, the donor will be redirected to the default thank you page.
Thank You Page Content construct or edit the default message of the thank you page.
Failure Message section allows you to display a message to the donor if there is an error in the donation processing
Override Failure Message allows us to overrides the reject the failure message.
Failure Message Type allows us to choose what kind of message you want to receive.
Failure Message construct or edit the failure message that will be displayed.
This functionality overrides the error message that the Payment Gateway sends upon payment transaction. Some payment gateways send very technical error messages which an everyday person may not understand. The Override Failure Message functionality allows you to override the message to a more friendly message which the Donor can easily comprehend.
Admin Notification section allows you to send a notification to the administrator.
Notification Option send notification to administrator if donation synchronization fails or is successful, or both.
From Email Address provide the email which will be set as the “FROM EMAIL” on the emails sent on every donation made.
Recipient Email Address set the emails which the donation notifications are sent. For multiple emails use a comma to separate them.
From Name provide a name to set as “FROM NAME” on the emails sent on every donation made.
Test Success allows you to test the admin notifications if it is a success.
Test Failed allows you to test the admin notifications if it is a fail.
Social Configurations allows us to share on social sites. If you want to put a social sites you can have it.
Social Link is the link to be shared on social sites
Social Message is the additional pre-text message for sharing on social sites
Form Style section allows you to customize the front end of your Donation Page. We will choose Normal Mode as the Template Mode
Template Mode select our desired template mode for the front-end donation.
Template Name will pick the desired template for the front end donation form.
Form Class if you have any custom “CSS CLASS” provide it here.
Input Field Class provide if you have any custom “CSS CLASS” for the front end donation form “input, textarea and select” fields.
Form Button Class provide if you have any custom “CSS CLASS” for the front end donation form donate button.
Form Button Caption customize our own donation button label.
Form Button Padding provide if you have any custom “CSS PADDING” for the front end donation form donate button.
Form Button Font Size provide if you have any custom “CSS FONT SIZE” for the front end donation form donate button CAPTION.
Form Button Width provide if you have any custom “CSS WIDTH” for the front end donation form donate button.
Form Button Color provide if you have any custom “CSS BACKGROUND COLOR” for the front end donation form donate button.
Form Button Font Color provide if you have any custom “CSS FONT COLOR” for the front end donation form donate button CAPTION.
Donate Button Preview previews how our Donation Page Button will look like. (Note: if you are using Themes it may override any button settings on this field.)
After you complete all the steps, click the Publish button located in the upper right side of the page to save the Donation Form.
Webforce Connect - Donation: Donation List
The Donation List
Information Box — This contains the details of the legends used on every transaction on our Donation List.
The Donation List — This contains the list of donations made on our donation forms.
Donor Details
Re-Sync Donation
→ This button allows the user to sync the donation donor details manually.
Sync Status
→This field displays the status of the donation.
Donation Type
→ This field displays the donation type of the donation.
Amount
→ This field displays the donation amount of the donation.
Payment Gateway
→ This field displays the payment gateway of the donation.
Date & Time
→ This field displays the date and time of the donation.
Donor type
→ This field displays the donor type of the donation.
Company
→ This field displays the donor company of the donation.
First Name
→ This field displays the donor first name of the donation.
Last Name
→ This field displays the donor last name of the donation.
Email Address
→ This field displays the donor email of the donation.
Phone
→ This field displays the donor phone of the donation.
Street
→ This field displays the donor street of the donation.
State
→ This field displays the donor state of the donation.
Postal Code
→ This field displays the donor postal code of the donation.
Country
→ This field displays the donor country of the donation.
Tribute
→ This field displays the donor tribute message of the donation.
Comment
→ This field displays the donor comment of the donation.
Payment Transaction
Status Code
→This field displays the status code of the donation.
Status Text
→ This field displays the status text of the donation.
Token Customer ID
→ This field displays the token customer of the donation.
Payment Source
→ This field displays the some card details information of the donation.
Payment Transaction
→ This field displays the payment transaction of the donation.
Payment Response
→ This field displays the payment response of the donation.
Salesforce Response
Debug Details
When Enable Debug switch on Donation Settings is turned “ON”, this field will be displayed in our donation list. This contains debugging details of our Donation Form.
Webforce Connect - Donation: The Front End
How to enter a Donation
You are a supporter of this non profit organization and you want to make a donation to support them. The organisation website has a Donate Now! page, and there is a beautiful donation form with the name “Crusade Against Hunger Donation”. Unbeknownst to you, this donation form has been created using Webforce Connect Donation, by AlphaSys Labs.
We will now walk through the steps to donate.
Choose the amount you want to donate. If the amount you want is not displayed as a dollar handle button, you can click the Other button and enter your own amount in the Amount field. You can also write a message. Let’s Choose $10 as the amount.
The Donation Type section provides the Donor donation frequency. Choose what kind of Donation Type you want to give. (Note: Paypal Gateways only accepts One-off Donation Transactions.) In this scenario we will choose One-off.
The Donation Details section is where you provide your details as the donor. Fill in the necessary details.
Donor Type are you giving as an individual or organisation?
Company enter a company name if applicable
First Name, Last Name, Email, Phone, Address are self explanatory
DPID (if the form is using Harmony for address validation) this field will be auto-populated when an address is entered.
Comment you can enter a comment for your donation
The Payment Gateaway section allows you to choose which payment method you will donate via.
In the Payment Details, fill up the necessary fields and hit the Donate button after you’re done.