Looking for help with Pop-up Modal on Form

  • Profile Image
    donna991
    Asked on January 12, 2022 at 10:07 PM

    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

  • Profile Image
    Amin_N
    Answered on January 13, 2022 at 04:18 AM

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

    Your patience is most appreciated.

  • Profile Image
    Amin_N
    Answered on January 13, 2022 at 04:54 AM

    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.

  • Profile Image
    donna991
    Answered on January 13, 2022 at 08:15 AM

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

    1642079672_61e025b8dca1a_

  • Profile Image
    Jovanne_A
    Answered on January 13, 2022 at 08:39 AM

    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.

  • Profile Image
    donna991
    Answered on January 13, 2022 at 08:48 AM

    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);" target="_blank" href="https://donorbox.org/recurring-donations-58">Donate Monthly</a>

  • Profile Image
    Jovanne_A
    Answered on January 13, 2022 at 09:12 AM

    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.

  • Profile Image
    donna991
    Answered on January 13, 2022 at 09:48 AM

    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>


  • Profile Image
    Basil_A
    Answered on January 13, 2022 at 10:46 AM

    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:

    1642088627_61e048b3bfb24_

    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.

  • Profile Image
    Amin_N
    Answered on January 15, 2022 at 01:08 AM

    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.

    1642226253_61e2624db566b_amin__n_donor_b

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

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

  • Profile Image
    donna991
    Answered on January 17, 2022 at 04:40 PM

    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!!

  • Profile Image
    Sonnyfer
    Answered on January 17, 2022 at 09:35 PM

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

    1642472962_61e626025c2c3_

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

  • Profile Image
    donna991
    Answered on January 18, 2022 at 10:36 AM

    Thank you for your help Sonnyfer.