Give Shortcode in Ninja-Popups and Widget with Trigger Button

Here’s a couple suggestions:

1) Try making that form use the “on page” display method rather than reveal. Hopefully the popup is smart enough to provide a scroll bar to see the whole form

2) You could also trigger Give’s built-in popup from a link rather than messing with all these other shortcodes. Give uses Magnific Popup, here’s documentation on how it works: https://dimsemenov.com/plugins/magnific-popup/documentation.html I just tested this locally and it requires some custom triggers of the JS and custom CSS but it works pretty great.

Let me know how that goes for you.

Hey There,

The problem is you’re trying to load a popup-enabled donation form within a modal that’s already open (ninja). I’m assuming you would like all the fields to display here: https://www.tangsworld.de/geistesblitze/

Option 1: Change your shortcode to be [give_form id="478" display_style="onpage"] where the ID is the actual ID of your form.

Option 2: Create an additional duplicate Donation Form without the modal option enabled

Thank you for all suggestions. I was experimenting wit different settings. At the end mobile visibility of the form fields lets me step back from the Ninja-Popups solution. The Give Popups are much easier to read and fill out in both vertical and landscape.

So the question is: Is there an easy solution to just trigger the full give form with all fields as a popup with my custom button. I came up with something like the following to put into the widgets textfield. That’s the way my Ninja-Popups shortcode was embedded.

I know there is something wrong and different the way I use the give-shortcode here – the button doesn’t actually trigger something, but I’m not a developer and I hope for your help ??

[give_form id="1597“] <img class="alignnone size-full wp-image-107" title="Spendier Tang einen Tee" src="https://www.tangsworld.de/wp-content/uploads/button-spendier-tee.png" alt="" onmouseover=
"src='https://www.tangsworld.de/wp-content/uploads/button-spendier-tee-hover.png'" onmouseout="src='https://www.tangsworld.de/wp-content/uploads/button-spendier-tee.png'" width="309" height="52" /> [/give_form id="1597“]

I actually wrote a quick blog post on doing this. I’ll be published first thing in the morning (since we already published today).

Thanks Matt – sounds promising. I was digging into the Magnific Popup-Docs. But it’s way too challenging for me. So I better wait for your enlightening blog-post ?? – or maybe a piece of code that I am missing in my attempt.

Thank you, Matt for the detailed tutorial in your blog. Will try my best to follow your steps. I put the link to your blog post in here for others who might be interested:

https://givewp.com/load-donation-form-popup-give/