Pop up form triggered by clicking a button

[darryl_corp]

Dear team,

I’m looking to trigger a pop up donation form from a third party " giveforms" when clicking on the “start sharing now” button AS WELL AS the “donate” button in the header menu on my homepage: https://www.girisunyata.org/

Giveforms gave me this code to use but not sure how to set it to be triggered by the button nor the menu item.

Would you be able to advise me on this?

Thanks a lot,
Darryl

[nabeel]

Hi Darryl,

Thank you for reaching out to us. There are couple of ways to integrate the code in the theme. In Header Builder add a Content Area element and then paste the <script> and the <link> codes only in the Content Area element. Now add a separate Button element in the header builder and make sure to give this button a class giveforms-donation-button and in URL field paste the URL they have provided in your code (see screenshots)

This will open the modal popup as you need. Now to add the button in the page, you can repeat the same steps that you’ve done for the button, but in the page you don’t need to add the scripts again as you’ve already added in the header, you only need to add the button with the same configuration.

Hope this helps!

[darryl_corp]

Hi @nabeel ,

Wow, thank you for the detailed explanation. Really really helpful.

So for the header I’d need to build a complete new header in header builder then since I’m still using the standard header that comes with the theme. I just added menu items (pages and custom links) in there but that’s it. It wouldn’t be possible to have it embedded there? Really requires a customised header with “content area” element and then the button element.
I’ve tried to make “donate” as custom link in the menu and use the URL given. But it doesn’t pop up yet, it simply goes to the page of the link.

For the homepage, I’ve added a content area element right above the button (not sure if the placement matters) and did exactly as you said for setting up the button. IT WORKS!!

You are awesome!

Thanks a lot,
Darryl

[nabeel]

Hey Darryl,

This might work with the original header, as well all you have to do is to add the button URL which you can add in the URL field of a custom link:

You also need to add a class to the button giveforms-donation-button which you can add in the CSS Classes field of your menu item:

If this doesn’t work then try out the above steps using Pro Header and that should work. Cheers!

[darryl_corp]

Dear @nabeel,

Tried that, but didn’t get it to work yet.
Also, the button pop up stopped working because of it. Perhaps only one pop up form allowed on the same page?

Tried switching off the button pop up by deleting the CSS class and link, and then add it into the menu item - link instead. Still didn’t work.

So now moved it back to the button and removed it from the menu. At least one of them works.
Result: button works fine again with a pop up.

For the menu, I might have to try a different way like you suggested before.

Once again thank you very much, really appreciate the time and effort you made for me.

Darryl

[tristup]

Hi Darryl,

You are most welcome, please let us know if you have any other queries on it.

Thanks