Donation API w/Multi-Page Donation Form

Options
I can't find a recent post with an answer or example where someone has used the API with a multi-page donation form. Has anyone done this or can anyone point me to documentation or a resource on how to set this up? Thank you in advance!
Tagged:

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








    .

     
  • 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>
  • 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?
  • 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.


     
  • 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 helps :)
  • 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

     
  • Erik Leaver
    Erik Leaver Blackbaud Employee
    Ancient Membership 250 Likes 100 Comments Photogenic

    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!

  • 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!

     

     

Categories