Donation API w/Multi-Page Donation Form
Comments
-
Hi Heather,
backtracking to get the sense of what you might be intending to do,
I am assuming at moment that "multi page" means you'll see different components being presented one at a time (i.e. 1st page is the donation ask level with billing information, 2nd is the eCard component etc, 3rd is confirmation prior to submission etc)
If that so, you might not really need to do it the API way, you can still reuse the out-of-the-box (OOB) Luminate Online (LO) donation form and style it accordingly / customized it at the pagewrapper level to render in a way you wanted it to be. There are quite vast possibilities / potentials on what we could do with that new responsive donation form without having to resort to API form.
Here's an example of one of our customization implementation on that OOB LO of a multi page form
https://donations.diabetes.org/site/Donation2?df_id=18884&18884.donation=form1
You can append &df_preview=true to the above URL see it on test mode to see the flow between pages.
All the control / customization are done at the pagewrapper level that is associated to that donation for, here are other LO form instances using the same pagewrapper to illustrate these potentials. The pagewrapper and the forms are mobile friendly/responsive:
Different forms, same pagewrapper, different right column content and layout and other bell and whistles
https://donations.diabetes.org/site/Donation2?18864.donation=form1&df_id=18864&mfc_pref=T
https://donations.diabetes.org/site/Donation2?18686.donation=form1&df_id=18686&mfc_pref=T
https://donations.diabetes.org/site/Donation2?df_id=18784&mfc_pref=T&18784.donation=form1 (with premium eCommerce component)
https://donations.diabetes.org/site/Donation2?df_id=18685&mfc_pref=T&18685.donation=form1 (this has static background image with embedded Youtube. This is a prototype form / demo purpose)
https://donations.diabetes.org/site/Donation2?df_id=18685&mfc_pref=T&18685.donation=form1&showbgvid=y
(this has a HTML5 background movie whenever applicable / browser supported. Note -- this form is just a prototype purpose and the movie is just a mock up movie not representing and not own by ours that I happened to find online just to test the HTML5 background video capabilities)
Now with API form and especially if "multi page" means as stated earlier, you will have more control over what to put on page 1, 2, 3 and so on. And there is no set stone where a component need to be put in page X, just depends on what flow you likely want. Also with single web application approach, nowadays those "other pages" are likely just artificial, meaning it's still the same page, but they are rendering different stage according to user interactions, with that single page there is also no need to pass along information that otherwise might not be retained persistently especially when we are only limited through the use of S-tag and Javascript
Hope it helps,
Daniel
.
1 -
The ones I've done in the past use javascript to show and hide regions on the page, rather than actually moving from one page to another. Loading a page, especially with Luminate, isn't super quick. The basic idea is to use onclick events on a button trigger the pagination. Since Luminate already uses jQuery, I generally use that - but you could also do it with straight up JS.
<div id="page_1">**Gift Detail Fields**</div>
<div id="page_2" style="display:none;">**Payment Fields**</div>
<input id="last" class="button" type="button" value="Last" disabled><input id="next" class="button" type="button" value="Next">
<script>
$("#next").click(function () {
$('#page_1').hide('');
$('#page_2').show('');
$('#last').prop('disabled', false);
$('#next').prop('disabled', true);
});
$("#last").click(function () {
$('#page_1').show('');
$('#page_2').hide('');
$('#last').prop('disabled', true);
$('#next').prop('disabled', false);
});
</script>
https://jsfiddle.net/5zjf6cbm/
EDIT: This is what Daniel was referring to with: "those 'other pages' are likely just artificial, meaning it's still the same page, but they are rendering different stages according to user interactions"
EDIT TWO: A better structure for donations. Same idea.
<div id="page_1">
Gift Detail Fields<br/>
<input id="next" class="button" type="button" value="Next">
</div>
<div id="page_2" style="display:none;">
Payment Fields<br/>
<input id="last" class="button" type="button" value="Last">
<input id="submit" class="button" type="submit" value="Submit">
</div>
<script>
$("#next").click(function () {
$('#page_1').hide('');
$('#page_2').show('');
});
$("#last").click(function () {
$('#page_1').show('');
$('#page_2').hide('');
});
</script>2 -
I guess I should have been more specific - I'm trying to see if I can use a multi-step (as you clarified, Daniel) on a non-LO page, using the API. Is this possible?0
-
I updated my JSFiddle a bit to show more clearly how you can show your form in steps without needing actual mulltiple pages.
https://jsfiddle.net/5zjf6cbm/3/
This is just displaying chunks of your form in separate 'pages', but in actuality they are all on the same non-LO html page so you can submit it using the API normally.
Using actual separate html pages for each step is more difficult, but also possible. I can't recall ever seeing anyone bother.
0 -
Yes it's possible to do that Heather.
And as Brian has mentioned and started with those JS hints to implement the "pages" toggle mechanism sample, you can create a multi-steps donation form on a non LO pages through the API.
Make sure you white-list your IP that will host the page externally in order to use the API, and the following API
http://open.convio.com/api/?referrer=https://www.google.com/#donation_api.donate_method.html
should do the bulk final processing of a regular donation form (with eCard, premium etc) alongside your custom Javascripts (integrating Brian's quick sample) that deal with the presentation / front end public rendering functionality.
EDIT ADD ON:
Disclaimer: This doesn't address your exact request of wanting see API implementation on an external non LO page AND showing section separately as "page", but some of these could be helpful as foundations to begin your API form implementation (the API itself should be more likely the same wherever you do that). Thus without further ado:
Here's an old API work example based on the above API method to give an idea how API donation form implementation works,
plus there is a little toggle example mechanism on that "section 2 Honor/Memorial" that will show based on user interaction (which would be similar in mechanism that Brian's JS Fiddle examples -- it's just on this example, I don't use it to hide the entire page to show only one section at a time, but I use it more in smaller scale to hide/show steps of that "Honor Memorial"
https://donations.diabetes.org/site/SPageServer/?pagename=2013_Donation_3in1
Hope our explanations helps0 -
And here's another example of multi-step non API (to showcase the capability of the out-of-the-box LO Donation2 form as alternative before resorting to use API) implementation I just recently worked on
You can have a pre-donation form landing page where one select the amount / entered their desired amount and upon submission they'll be brought to the actual LO donation2 form. Note this is a prototype work (not publicly used donation)
This one showcase the ability to pass user entered amount into from the informational / landing page into the actual donation.
https://donations.diabetes.org/site/SPageServer/?pagename=Digital_Marketing_Landing_Prototype
While this one showcase, ability of user clicking on preset amount associated to the actual donation and the actual donation form will automatically select the associated user selected amount:
https://donations.diabetes.org/site/SPageServer/?pagename=Digital_Marketing_Landing_Prototype&presetAmt=y
regards,
Daniel
1 -
Daniel Hartanto:
And here's another example of multi-step non API (to showcase the capability of the out-of-the-box LO Donation2 form as alternative before resorting to use API) implementation I just recently worked on
You can have a pre-donation form landing page where one select the amount / entered their desired amount and upon submission they'll be brought to the actual LO donation2 form. Note this is a prototype work (not publicly used donation)
This one showcase the ability to pass user entered amount into from the informational / landing page into the actual donation.
https://donations.diabetes.org/site/SPageServer/?pagename=Digital_Marketing_Landing_Prototype
While this one showcase, ability of user clicking on preset amount associated to the actual donation and the actual donation form will automatically select the associated user selected amount:
https://donations.diabetes.org/site/SPageServer/?pagename=Digital_Marketing_Landing_Prototype&presetAmt=y
regards,
Daniel
Looks great Daniel!
0 -
Thanks Erik
Erik Leaver:
Daniel Hartanto:
And here's another example of multi-step non API (to showcase the capability of the out-of-the-box LO Donation2 form as alternative before resorting to use API) implementation I just recently worked on
You can have a pre-donation form landing page where one select the amount / entered their desired amount and upon submission they'll be brought to the actual LO donation2 form. Note this is a prototype work (not publicly used donation)
This one showcase the ability to pass user entered amount into from the informational / landing page into the actual donation.
https://donations.diabetes.org/site/SPageServer/?pagename=Digital_Marketing_Landing_Prototype
While this one showcase, ability of user clicking on preset amount associated to the actual donation and the actual donation form will automatically select the associated user selected amount:
https://donations.diabetes.org/site/SPageServer/?pagename=Digital_Marketing_Landing_Prototype&presetAmt=y
regards,
Daniel
Looks great Daniel!
0
Categories
- All Categories
- Shannon parent
- shannon 2
- shannon 1
- 21 Advocacy DC Users Group
- 14 BBCRM PAG Discussions
- 89 High Education Program Advisory Group (HE PAG)
- 28 Luminate CRM DC Users Group
- 8 DC Luminate CRM Users Group
- Luminate PAG
- 5.9K Blackbaud Altru®
- 58 Blackbaud Award Management™ and Blackbaud Stewardship Management™
- 409 bbcon®
- 2.1K Blackbaud CRM™ and Blackbaud Internet Solutions™
- donorCentrics®
- 1.1K Blackbaud eTapestry®
- 2.8K Blackbaud Financial Edge NXT®
- 1.1K Blackbaud Grantmaking™
- 527 Education Management Solutions for Higher Education
- 1 JustGiving® from Blackbaud®
- 4.6K Education Management Solutions for K-12 Schools
- Blackbaud Luminate Online & Blackbaud TeamRaiser
- 16.4K Blackbaud Raiser's Edge NXT®
- 4.1K SKY Developer
- 547 ResearchPoint™
- 151 Blackbaud Tuition Management™
- 61 everydayhero
- 3 Campaign Ideas
- 58 General Discussion
- 115 Blackbaud ID
- 87 K-12 Blackbaud ID
- 6 Admin Console
- 949 Organizational Best Practices
- 353 The Tap (Just for Fun)
- 235 Blackbaud Community Feedback Forum
- 55 Admissions Event Management EAP
- 18 MobilePay Terminal + BBID Canada EAP
- 36 EAP for New Email Campaigns Experience in Blackbaud Luminate Online®
- 109 EAP for 360 Student Profile in Blackbaud Student Information System
- 41 EAP for Assessment Builder in Blackbaud Learning Management System™
- 9 Technical Preview for SKY API for Blackbaud CRM™ and Blackbaud Altru®
- 55 Community Advisory Group
- 46 Blackbaud Community Ideas
- 26 Blackbaud Community Challenges
- 7 Security Testing Forum
- 3 Blackbaud Staff Discussions
- 1 Blackbaud Partners Discussions
- 1 Blackbaud Giving Search™
- 35 EAP Student Assignment Details and Assignment Center
- 39 EAP Core - Roles and Tasks
- 59 Blackbaud Community All-Stars Discussions
- 20 Blackbaud Raiser's Edge NXT® Online Giving EAP
- Diocesan Blackbaud Raiser’s Edge NXT® User’s Group
- 2 Blackbaud Consultant’s Community
- 43 End of Term Grade Entry EAP
- 92 EAP for Query in Blackbaud Raiser's Edge NXT®
- 38 Standard Reports for Blackbaud Raiser's Edge NXT® EAP
- 12 Payments Assistant for Blackbaud Financial Edge NXT® EAP
- 6 Ask an All Star (Austen Brown)
- 8 Ask an All-Star Alex Wong (Blackbaud Raiser's Edge NXT®)
- 1 Ask an All-Star Alex Wong (Blackbaud Financial Edge NXT®)
- 6 Ask an All-Star (Christine Robertson)
- 21 Ask an Expert (Anthony Gallo)
- Blackbaud Francophone Group
- 22 Ask an Expert (David Springer)
- 4 Raiser's Edge NXT PowerUp Challenge #1 (Query)
- 6 Ask an All-Star Sunshine Reinken Watson and Carlene Johnson
- 4 Raiser's Edge NXT PowerUp Challenge: Events
- 14 Ask an All-Star (Elizabeth Johnson)
- 7 Ask an Expert (Stephen Churchill)
- 2025 ARCHIVED FORUM POSTS
- 322 ARCHIVED | Financial Edge® Tips and Tricks
- 164 ARCHIVED | Raiser's Edge® Blog
- 300 ARCHIVED | Raiser's Edge® Blog
- 441 ARCHIVED | Blackbaud Altru® Tips and Tricks
- 66 ARCHIVED | Blackbaud NetCommunity™ Blog
- 211 ARCHIVED | Blackbaud Target Analytics® Tips and Tricks
- 47 Blackbaud CRM Higher Ed Product Advisory Group (HE PAG)
- Luminate CRM DC Users Group
- 225 ARCHIVED | Blackbaud eTapestry® Tips and Tricks
- 1 Blackbaud eTapestry® Know How Blog
- 19 Blackbaud CRM Product Advisory Group (BBCRM PAG)
- 1 Blackbaud K-12 Education Solutions™ Blog
- 280 ARCHIVED | Mixed Community Announcements
- 3 ARCHIVED | Blackbaud Corporations™ & Blackbaud Foundations™ Hosting Status
- 1 npEngage
- 24 ARCHIVED | K-12 Announcements
- 15 ARCHIVED | FIMS Host*Net Hosting Status
- 23 ARCHIVED | Blackbaud Outcomes & Online Applications (IGAM) Hosting Status
- 22 ARCHIVED | Blackbaud DonorCentral Hosting Status
- 14 ARCHIVED | Blackbaud Grantmaking™ UK Hosting Status
- 117 ARCHIVED | Blackbaud CRM™ and Blackbaud Internet Solutions™ Announcements
- 50 Blackbaud NetCommunity™ Blog
- 169 ARCHIVED | Blackbaud Grantmaking™ Tips and Tricks
- Advocacy DC Users Group
- 718 Community News
- Blackbaud Altru® Hosting Status
- 104 ARCHIVED | Member Spotlight
- 145 ARCHIVED | Hosting Blog
- 149 JustGiving® from Blackbaud® Blog
- 97 ARCHIVED | bbcon® Blogs
- 19 ARCHIVED | Blackbaud Luminate CRM™ Announcements
- 161 Luminate Advocacy News
- 187 Organizational Best Practices Blog
- 67 everydayhero Blog
- 52 Blackbaud SKY® Reporting Announcements
- 17 ARCHIVED | Blackbaud SKY® Reporting for K-12 Announcements
- 3 Luminate Online Product Advisory Group (LO PAG)
- 81 ARCHIVED | JustGiving® from Blackbaud® Tips and Tricks
- 1 ARCHIVED | K-12 Conference Blog
- Blackbaud Church Management™ Announcements
- ARCHIVED | Blackbaud Award Management™ and Blackbaud Stewardship Management™ Announcements
- 1 Blackbaud Peer-to-Peer Fundraising™, Powered by JustGiving® Blogs
- 39 Tips, Tricks, and Timesavers!
- 56 Blackbaud Church Management™ Resources
- 154 Blackbaud Church Management™ Announcements
- 1 ARCHIVED | Blackbaud Church Management™ Tips and Tricks
- 11 ARCHIVED | Blackbaud Higher Education Solutions™ Announcements
- 7 ARCHIVED | Blackbaud Guided Fundraising™ Blog
- 2 Blackbaud Fundraiser Performance Management™ Blog
- 9 Foundations Events and Content
- 14 ARCHIVED | Blog Posts
- 2 ARCHIVED | Blackbaud FIMS™ Announcement and Tips
- 59 Blackbaud Partner Announcements
- 10 ARCHIVED | Blackbaud Impact Edge™ EAP Blogs
- 1 Community Help Blogs
- Diocesan Blackbaud Raiser’s Edge NXT® Users' Group
- Blackbaud Consultant’s Community
- Blackbaud Francophone Group
- 1 BLOG ARCHIVE CATEGORY
- Blackbaud Community™ Discussions
- 8.3K Blackbaud Luminate Online® & Blackbaud TeamRaiser® Discussions
- 5.7K Jobs Board