Looking for help with Pop-up Modal on Form

I am trying to add code from Donorbox to a Jotform for Recurring Donations. I was successful in adding the Donate Monthly button to the Jotform and linking it by using the URL below, however when you click the button it does not open the pop-up (see attachment)

https://donorbox.org/recurring-donations-58?default_interval=m

I reached out to Donorbox and they referred me to the article at the link below. I followed the instructions and inserted the code in CSS but it didn't change anything.

https://www.jotform.com/help/417-how-to-add-a-pop-up-modal-on-your-form/

Thank you in advance for any guidance you can provide. We created our website in Squarespace but we use Jotform for all our forms. Our website URL is janedoenomore.org

Could you please allow me some time to closely look into this?

Your patience is most appreciated.

Thanks for patiently waiting.

I've successfully made you demo form that you can see here: https://form.jotform.com/220121511916947

You can clone it into your account.

Should you have any further inquiries, we will be more than happy to help.

Thank you so much Amin. Is it possible to remove the top portion of the pop-up that is crossed out in red below?

Hi,

Unfortunately, those elements are included in the iframe and there is no way to remove them on the form. If you have access to the original iframe file, you can modify the codes to remove the elements.

Let us know if you have further questions.

Thank you for your quick reply. Here is the source code for the pop-up. Is this the code that can be modified?

<script type="text/javascript" defer src="https://donorbox.org/install-popup-button.js"></script><a class="dbox-donation-button" style="background: #0f6cb8 url(https://donorbox.org/images/red_logo.png) no-repeat 37px;color: #fff;text-decoration: none;font-family: Verdana,sans-serif;display: inline-block;font-size: 16px;padding: 15px 38px;padding-left: 75px;-webkit-border-radius: 2px;-moz-border-radius: 6px;border-radius: 2px;box-shadow: 0 1px 0 0 #1f5a89;text-shadow: 0 1px rgba(0, 0, 0, 0.3);" href="https://donorbox.org/recurring-donations-58">Donate Monthly</a>

Hi,

Unfortunately, this is not the source code we could use to remove the elements. We need the whole iframe source code.

We look forward to your response.

Thank you Jovanne. I reached out to Donorbox and they gave me the code below:

<script src="https://donorbox.org/widget.js" paypalExpress="false"></script><iframe src="https://donorbox.org/embed/recurring-donations-58" name="donorbox" allowpaymentrequest="allowpaymentrequest" seamless="seamless" frameborder="0" scrolling="no" height="900px" width="100%" style="max-width: 500px; min-width: 250px; max-height:none!important"></iframe>

Hi,

This code doesn't work because it has a script added to it, the paragraph field doesn't allow scripts.

I would also point out the property "allow payment requests" gets removed as well as it is not allowed.

A similar code will not work in Jotform, you will to redirect the user to a separate page.

Errors in the page to further explain:

It is not possible to collect payments/donations in the form using this method. You need to redirect the user to your page in a separate tab or after they fill the form.

Please let us know if you have any further questions.

Hi Donna,

I've hosted the script code you provided on a file of mine and imported this file as an iFrame into the modal pop-up. Everything successfully works now as shown below in my recording.

Link to the form: https://cdn.jotfor.ms/220121511916947

Should you have any further inquiries, we will be more than happy to help.

Amin, thank you so much for this. I cloned the form you made but I'm not sure what to do next. The Recurring Donations pop-up needs to link from the Donate Monthly button on the form(s) below:

https://www.jotform.com/build/220085868830158#preview

https://form.jotform.com/220085868830158

Your help is greatly appreciated!!

You need to have a Paragraph element and then paste the Lightbox code to it.

Complete Guide: How-to-add-a-pop-up-modal-on-your-form/

Thank you for your help Sonnyfer.