How do I make a pop-up appear when a button is clicked?

Lindsay Doran · September 2016

I'm making a donation page for a social group we're starting, but your donation amount will depend on whether you're 35 or under, or over 35. It will also depend on whether you want to donate monthly or annually. This won't work on a single donation form, so we're going to split it into several forms.

On the first NetCommunity page I'd like the donor to be able to click "I want to join!" and then have a pop-up appear where they'd click "I am 35 or under" or "I am over 35". If possible, I'd then like the pop-up to change and read "I'd like to donate monthly" or "I'd like to donate annually". I feel this would save a lot of time, since we wouldn't have to create a whole seperate page for each step, and would save a lot of page loading on the donor's end.

Does anyone have any ideas, or has anyone tackled something similar?

Thanks!

Pat Morrison · September 2016

First, I would recommend a different approach to the age question. Why not have the first 2 buttons on the first page? Avoid an extra click?

How would you have the 2nd frequency popup work? How would it feed that data to the form if you do not have 2 different forms? We have tacked the frequency question in two different ways. The old way was to have separate pages and links to the Monthly, Quarterly or Annual pages. The new one we implemented recently is to have one page but with three radio buttons: options & amounts for Monthly, Quarterly, Annually. The only problem with this is that the recurring gift comes through with the default of Monthly and then I need to override it when it gets into RE. But 99% pay monthly so it is not a huge admin problem.

Lindsay Doran · September 2016

Pat Morrison:

First, I would recommend a different approach to the age question. Why not have the first 2 buttons on the first page? Avoid an extra click?

How would you have the 2nd frequency popup work? How would it feed that data to the form if you do not have 2 different forms? We have tacked the frequency question in two different ways. The old way was to have separate pages and links to the Monthly, Quarterly or Annual pages. The new one we implemented recently is to have one page but with three radio buttons: options & amounts for Monthly, Quarterly, Annually. The only problem with this is that the recurring gift comes through with the default of Monthly and then I need to override it when it gets into RE. But 99% pay monthly so it is not a huge admin problem.

Hi Pat,

Thanks for your suggestions! In any case I have to make 4 seperate forms (a "monthly" and an "annually" for each age group), but they won't be able to tell on the front end. We're trying to make it as easy as possible for them to navigate.

If I did it with radial buttons do you know if there's a way to make different options appear depending on which radial they choose first? For instance, if they're 35 or under their donation options are $500 annually or $41.66 monthly, and if they're over 35 the options are $1000 annually or $83.33 monthly. Is there a way to allow just the two appropriate options to appear when they select their age, to avoid people clicking the wrong amount?

Thank you for your help, Pat

Lindsay

Pat Morrison · September 2016

No I cannot think of a way that Netcommunity parts can react differently based on enter data or pushing different radio buttons. The GIVING LEVEL would give them certain options but I don't see how to make anything dependent on data already entered before they get to this point. That sounds like custom coding by Blackbaud architects. We have had options like that where members pay one amount and non-members pay another, we have to trust that the donor is picking the right one.

Gina Gerhard · September 2016

Wondering if perhaps you could leverage the Suggested Content part in BBNC -- so if the user made a selection, using the suggested content part you could display the associated link that would bring them over to the correct donation form?

See pg 167 of the parts guide: https://www.blackbaud.com/files/support/guides/bbnc/partre.pdf

Lindsay Doran · September 2016

Gina Gerhard:

Wondering if perhaps you could leverage the Suggested Content part in BBNC -- so if the user made a selection, using the suggested content part you could display the associated link that would bring them over to the correct donation form?

See pg 167 of the parts guide: https://www.blackbaud.com/files/support/guides/bbnc/partre.pdf

I've ended up doing something similar to this, but without using Suggested Content. I set up an anchor point on the age buttons on the first page, so the "I want to join!" button at the top simply scrolls the donor down to the age buttons. When they click one of those buttons it takes them to a second page where they select whether they want to donate monthly or annually, and finally they're directed to the proper donation form.

So in the end I was able to cut it down from 4 pages to 3, but a popup still would've been handy for the monthly/annually option instead of a whole other page. Ah well, maybe next time

Thank you for your suggestions, everyone!

Lindsay

Kerry Shippam · September 2016

Lindsay Doran:

I'm making a donation page for a social group we're starting, but your donation amount will depend on whether you're 35 or under, or over 35. It will also depend on whether you want to donate monthly or annually. This won't work on a single donation form, so we're going to split it into several forms.

On the first NetCommunity page I'd like the donor to be able to click "I want to join!" and then have a pop-up appear where they'd click "I am 35 or under" or "I am over 35". If possible, I'd then like the pop-up to change and read "I'd like to donate monthly" or "I'd like to donate annually". I feel this would save a lot of time, since we wouldn't have to create a whole seperate page for each step, and would save a lot of page loading on the donor's end.

Does anyone have any ideas, or has anyone tackled something similar?

Thanks!

You should be able to use HTTP query string (information you see in url after the ?) to pass information to the donation pages and then prepopulate the pay frequency fields.

Basically you would have 1 popup which has the pay frequency selection and then button that goes to correct age group donation page, some javascript would generate the donation link that would look like: http://mydomain.com/donationpageLinkForAgeGroup?frequency=monthly

The donation page then takes that frequency value and populates the donation field (which could be hidden).

I have this sort of thing on my list to do that will pre select the fund on the donation page, once I have it running I'll throw details on here.

Chris McGrane · October 2016

Lindsay Doran:

I'm making a donation page for a social group we're starting, but your donation amount will depend on whether you're 35 or under, or over 35. It will also depend on whether you want to donate monthly or annually. This won't work on a single donation form, so we're going to split it into several forms.

On the first NetCommunity page I'd like the donor to be able to click "I want to join!" and then have a pop-up appear where they'd click "I am 35 or under" or "I am over 35". If possible, I'd then like the pop-up to change and read "I'd like to donate monthly" or "I'd like to donate annually". I feel this would save a lot of time, since we wouldn't have to create a whole seperate page for each step, and would save a lot of page loading on the donor's end.

Does anyone have any ideas, or has anyone tackled something similar?

Thanks!

Hello Lindsay,

I am an experienced dev and this is a pretty easy thing to setup / I am happy to help. Shoot me an email at mail@chrismcgrane.com

-Chris

Lindsay Doran · October 2016

Oops, double post

Lindsay Doran · October 2016

Chris McGrane:

Lindsay Doran:

I'm making a donation page for a social group we're starting, but your donation amount will depend on whether you're 35 or under, or over 35. It will also depend on whether you want to donate monthly or annually. This won't work on a single donation form, so we're going to split it into several forms.

On the first NetCommunity page I'd like the donor to be able to click "I want to join!" and then have a pop-up appear where they'd click "I am 35 or under" or "I am over 35". If possible, I'd then like the pop-up to change and read "I'd like to donate monthly" or "I'd like to donate annually". I feel this would save a lot of time, since we wouldn't have to create a whole seperate page for each step, and would save a lot of page loading on the donor's end.

Does anyone have any ideas, or has anyone tackled something similar?

Thanks!

Hello Lindsay,

I am an experienced dev and this is a pretty easy thing to setup / I am happy to help. Shoot me an email at mail@chrismcgrane.com

-Chris

Thank you, Chris! I'm headed to bbcon tomorrow, but I'll shoot you an email in the coming weeks

Cheers!
Lindsay

How do I make a pop-up appear when a button is clicked?

Comments

Categories