When iframes holding forms are switched from shown to hidden values sometime do not get passed to payment processor

  • DrivePayments
    Asked on March 17, 2016 at 11:43 AM

    Something changed...please see question below

    << Original post of this question

  • Jan
    Replied on March 17, 2016 at 11:48 AM

    I checked your forms and I was able to open them. Here's a sample URLs: 

    http://www.jotform.us/form/60740791171151
    http://www.jotform.us/form/60216494430147

    Can you please share the link you are clicking so that we can check. It is possible that the link you are using is different.

    We'll wait for your reply. Thank you.

  • DrivePayments
    Replied on March 17, 2016 at 11:49 AM

    I'm having issues with the form calculations.

     

    We've had this site up and running for a couple months and now today everything seems off with the calculations. Toggle back and forth between and one time and monthly recurring entering an amount at the time. It will fill the amount in the payment field half the time, half the time it goes to nothing and highlights the payment box saying this is required. What changed?

    Page URL:
    https://idahohumanesociety.org/donate/online-donation/ 

  • DrivePayments
    Replied on March 17, 2016 at 11:57 AM

    look at all these erros

    When iframes holding forms are switched from shown to hidden values sometime do not get passed to payment processor Image 1 Screenshot 20

  • mert JotForm UI Developer
    Replied on March 17, 2016 at 12:36 PM

    On your webpage and cloned version of the form on my account, I replicated the same errors; but those ones are not related to the issue you have experienced, they are related to the "iFrame Embed" widget. However, they don't affect the functionality of the form.

    I assume that those unstable results are occurring from the script conflicts on your page. To beat this issue, I suggest you to not to take the whole structure of embed code, the content between <iframe>...</iframe> tags is enough to embed your form. (Following code is just an example, don't embed that one.)

     

        <iframe

          id="JotFormIFrame"

          onDISABLEDload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          src="https://form.jotform.com/53341292355958"

          frameborder="0"

          style="width:100%;

          height:800px;

          border:none;"

          scrolling="no">

        </iframe>

     

    Please, try this method, it will overcome the script conflict and please don't forget to let us know the results.

    Thanks.

  • DrivePayments
    Replied on March 17, 2016 at 2:30 PM

    Hi Mert,

     

    I guess i'm not sure I understand what you are saying. To embed the form onto the website, we simply used: <script type="text/javascript" src="https://form.jotform.com/jsform/60216852377152"></script>

    (i changed the numbers but this is all we gave the web developer)

  • Nik_C
    Replied on March 17, 2016 at 2:56 PM

    What my colleague suggested is that you use iFrame code instead of Embed code, you can do that by going to Publish:

    When iframes holding forms are switched from shown to hidden values sometime do not get passed to payment processor Image 1 Screenshot 30

    And on new page click on Embed and choose iFrame:

    When iframes holding forms are switched from shown to hidden values sometime do not get passed to payment processor Image 2 Screenshot 41

     

    So, just copy, like my colleague suggested copy code between iframe tags(together with them) and try to embed like that.

    Please let us know if this works for you.

    Thank you!

  • DrivePayments
    Replied on March 17, 2016 at 3:05 PM

    Hi it seems like something is off now. I tested this iFrame method on a different website of ours and it doesn't show everything now. Thoughts? 

    New URL: http://www.readypaygo.com/ihsmail/

  • Charlie
    Replied on March 17, 2016 at 3:19 PM

    I presume what you meant by it is not showing everything is that only half of the forms inside of it are showing?

    When iframes holding forms are switched from shown to hidden values sometime do not get passed to payment processor Image 1 Screenshot 20

     

    This is most probably because you have not adjust the height value of your iFrame embed code. Here's you iFrame tag:

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/60216381377152" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe>

     

    Noticed that the height is set to 539px which is quite short to cover the length of your forms. Try adjusting it to 2000px. Let us know if that works.

  • DrivePayments
    Replied on March 17, 2016 at 3:37 PM

    Hi changed the length to 2250 and the first time I tried it (with iFrame embedded) it didn't calculate the information correctly. 

    http://www.readypaygo.com/ihsmail/

     

    When iframes holding forms are switched from shown to hidden values sometime do not get passed to payment processor Image 1 Screenshot 20

  • Nik_C
    Replied on March 17, 2016 at 4:01 PM

    I did some testing and I wasn't able to replicate this issue you can check this gif below:

    When iframes holding forms are switched from shown to hidden values sometime do not get passed to payment processor Image 1 Screenshot 20

    I'm sorry if I misunderstood your question, the problem is that values are not copying from donation amount to total amount and name and surname as well?

    Which browser are you using for testing this form?

    Thank you!

     

  • DrivePayments
    Replied on March 17, 2016 at 4:18 PM

    Hi if you see the screen shot that I posted, you can see I typed $25.50 in the top field and that amount did not populate at the bottom. I see that it works on your computer but toggle back and forth between one time and recurring and click "Tab" after you enter the payment amount instead of clicking out with your mouse.

  • Ben
    Replied on March 17, 2016 at 5:04 PM

    I took a look at your form over direct link: https://form.jotform.com/60216381377152

    I was able to switch back and forth any number of times and each time the values were shown at the top and within the payment tool.

    Now the cause of this issue is that you are having the following setup when you embed your form on your website:

    1. frame which
     1A. frame that shows another form
     1B. frame that shows another form

    Some browser will however not like to have a lot of iframes one within another and if the browser is on a device such as mobile device, it might not keep the forms working while you switch between the two.

    For example if you do it many times, instead of getting the value that was entered at the top field, the browser might not activate the script that remembered that value since it thinks that you will switch back again.

    My suggestion would be to make this a 2 step form instead.

    1st step to acquire details about your client and at the end ask which option they would like to use. Then based on their selection you take them to a new form and pass over the submission ID. That would allow you to combine submissions through an app and collect payment as needed and see if someone does not make a payment.

    This is the app: Combine Submissions

    This should also of course help with the issue that you have.

  • DrivePayments
    Replied on March 17, 2016 at 6:13 PM

    Thank you for that info, I'll look into it. Do you know why there would be no issues for 3-4 months and then one day it just doesn't work for everyone...that's what's throwing me off.

    We need to be able to have everything on one screen so when a client hits "submit" everything is done. We don't want them to hit submit, and then go to another screen for payment details, and hit submit again. 

  • Kevin Support Team Lead
    Replied on March 17, 2016 at 6:48 PM

    I was not able to replicate the issue that you are mentioning, however, I see that you shared us some screenshots with errors in the web console, I tested the form and the errors are on your website only, loading the form using the direct link the errors are not there. 

    Website, embedded form. 

    When iframes holding forms are switched from shown to hidden values sometime do not get passed to payment processor Image 1 Screenshot 30

    Loading the direct link:

    When iframes holding forms are switched from shown to hidden values sometime do not get passed to payment processor Image 2 Screenshot 41

    I would suggest you to check the script on your website and see what is causing this error, since it is only present when the form is on your website.

  • DrivePayments
    Replied on March 17, 2016 at 7:10 PM

    Kevin,

     

    These are the errors I was getting when it was on the main website. Two completely different websites, both getting a lot of errors. And yes just using URL is going to work because it's not embedded which I believe is causing the problem (something with how your forms react with multiple iframes within an iframe on a website).

    Can you embed the website on your website and tell me what errors you see? If it comes back clean then I'm happy to start digging into our websites for causing this problem.

     

     

    Other website: https://idahohumanesociety.org/donate/online-donation/

     

    When iframes holding forms are switched from shown to hidden values sometime do not get passed to payment processor Image 1 Screenshot 20

  • Kevin Support Team Lead
    Replied on March 17, 2016 at 7:40 PM

    You're right, when embedding the form it generates the issues, I embedded your form and got the same errors, the same that are on your screenshot, however, I made a sample form and embedded one of your forms using the iFrame widget, it does not show the errors messages. 

    When iframes holding forms are switched from shown to hidden values sometime do not get passed to payment processor Image 1 Screenshot 20

    Loading your forms using the direct links the errors are not there as well. 

  • DrivePayments
    Replied on March 17, 2016 at 10:22 PM

    I'm confused, what's the resolution? 

  • Kevin Support Team Lead
    Replied on March 17, 2016 at 11:00 PM

    Try removing the iFrame widgets, it should fix the issue with the script calculating the height for the form, that are the errors that you can see in the web console, also you could redirect your users to that forms, depending on their selection. 

  • DrivePayments
    Replied on March 17, 2016 at 11:39 PM

    If I remove the iFrame widget than I can't have the users select an option and display the correct form, right? If there is a way to remove the iFrame and keep the page how it is now, I'm interested. 

  • Chriistian Jotform Support
    Replied on March 18, 2016 at 1:23 AM

    I see that the form was working properly for a couple of months, and only recently did you encounter the issue. Can you try clearing the form cache to see if that helps? Here's how: How to Clear your Form Cache

    Unfortunately, if you remove the iFrame widget you will have to change the functionality of your form to what my colleague suggested earlier. 

    "My suggestion would be to make this a 2 step form instead. 1st step to acquire details about your client and at the end ask which option they would like to use. Then based on their selection you take them to a new form and pass over the submission ID. That would allow you to combine submissions through an app and collect payment as needed and see if someone does not make a payment."

    Do let us know if you need further assistance.
    Regards.

  • DrivePayments
    Replied on March 21, 2016 at 11:10 PM

    This is happening on multiple computers from multiple locations (even you guys replicated the problem). It's now happening to other forms we have built (like I said, it used to never be a problem). Unfortunately, this is the only work around you offer if people want to accept one time donations and recurring donations from the same screen. 

    If it can't be fixed, I understand but we will be moving to something like Formstack so we can continue onetime/recurring.

    Just let us know either way and thanks for the help.

  • Chriistian Jotform Support
    Replied on March 21, 2016 at 11:37 PM

    We apologize for the inconvenience. Another possible workaround would be to, instead of embedding the form, you can add the direct link of the form in your website so that the user can click that link and they will be directed to a new tab with the working form outside of your website. 

    Otherwise, perhaps you can try clearing the form cache to see if that helps: How to Clear your Form Cache

    Do let us know if that is a suitable workaround for you.
    Regards.