activate give popup form with my own button

There’s two ways to do that:

1) We have a display method called “Button Mode”. You could style our button however you like. You can read about Button Mode here: https://givewp.com/documentation/core/give-forms/form-display/ and see it in action here: https://givewp.com/demos/one-button-launch/

2) If you REALLY need to create your own button, we have a tutorial here that should help with that: https://givewp.com/load-donation-form-popup-give/

Thanks!

Sorry if I wasn’t clear in my initial question but I’m most curious about “styling your button however you like” How do I do that? I’m using Divi – should I just add some custom CSS in Theme Options? How do I know what the CSS ID’s are? Is there any examples?

On the second point – it seems the post is old before the Modal feature was implemented. Is there an updated post that shows me how to just create a URL that says donate and my modal popup comes up?

Thanks very much getting closer here

HI there,

The “Button mode” is what you want if you don’t want to do the tutorial. It gives you just a plain button.

You can use custom CSS and target this class: .give-btn-modal for example:

.give-btn-modal {
   background: black;
   color: white;
}
.give-btn-modal:hover {
   background: #333;
}

Thanks!

ok great and if I want to launch the model popup from my own button or menu item – is there a code I can use for that such as:

Donate Now

Also do you have a reference doc for the CSS for give button and form?

woops forgot to put the code in a code box

<a href="launch give modal popup">Donate Now</a>

That’s what the tutorial is for, it will explain how to do exactly that. It’s not outdated when you want exactly that to happen.

We do not have a reference for the CSS at this time. In cases like this Chrome Developer Tools is your friend. This is a great tutorial on finding all the CSS items you need directly in your browser:
https://www.dontfeartheinternet.com/03-the-browser/

Thanks!

Hi – I followed the tutorial and it doesn’t look like it works. You can see the results here https://divi.newlifesc.net/donate/

A black screen comes up and then after clicking it shows the unhidden form.

Any ideas what’s wrong here? Magnific is not tested with WP 4.8 which may be a problem. I used My Custom Functions to add the code.

Thanks for your help

Hmmm… for some reason the popup is not changing the visibility of the form once it opens. I checked all the code in your source and it looks to be implemented exactly as intended.

I’ll test the tutorial again locally to see if I can replicate that issue or get more clarity on why that’s happening for you.

Have you tested using the button mode? That would be ideal in this case.

I just switched the form to BUTTON mode. All behavior is the same except when I click out of the black screen the form does not display like it did before.

Thanks for sticking with me on this – I’ll look forward to any thoughts you have on how to get it working.

You’ll have to remove the custom script that you added previously and the custom styles as well. Let me know when those are removed and your button mode shortcode should work as expected.

ok now I’m confused a bit here. I do not want to use the GIVE button. I want to create my own and have my own button call the GIVE modal popup. If I remove the styles and script then I’ll be back to using the GIVE button which is what I wanted to get away from in the first place. Does that make sense?

I hear what you’re saying but I don’t understand why you don’t want to use the Give button, specifically because it does exactly what you’re looking to accomplish. Help me understand how the button mode display doesn’t suit your needs and I can help much more effectively.

ok sure – we have a menu item called ‘Donate” on our top level menu and I want to be able to have the give modal popup show when a user clicks on that menu item.

Plus I am thinking there are limits to how I can style the Donate button but I might have been incorrect in that assumption?

If I can style the give button any way I want I suppose I could get that in a menu item somehow? Any favorite menu tools you use?