What's the best way to embed a pre-populated form and pass values to other services?

  • bnoreen
    Asked on January 31, 2019 at 5:38 PM

    Hi, I need to pass JotForm field values on to another part of a page in which a form is embedded. Here's where I am so far: I created a second form, which the first one redirects to on submit, which has a single hidden field, pre-populated with the data I need to retrieve from the first form. I would like to use a PHP string to pass this into a URL, but I'm stuck because my choices are another redirect or a thank-you page on submit. Is there a way to to capture values from a thank-you page in an iframe? Or is there another way to accomplish this?

    Thanks in advance!

  • Donald_H
    Replied on January 31, 2019 at 9:12 PM

    There is another way to accomplish this, you can make use of URL Pre-population to transfer the values via URL parameters. Refer to these guides:

    How to Automatically Pass Form Data to Another Form

    https://prepopulate.jotform.io/


  • Donald_H
    Replied on January 31, 2019 at 9:15 PM

    To capture the values and use them outside the form, make use of webhooks as well. Is it possible to provide more detail on where you would like the data to redirect? There might be an integration already available to make transfer of the data on submit to another app much simpler.

  • bnoreen
    Replied on January 31, 2019 at 10:16 PM

    Thank you for your reply. As I mentioned, I have already utilized the prepopulating method, in order to pass form data from one form to another. Am I missing an opportunity there?

    I considered using webhooks, and reviewed all of the available integrations, but I'm concerned that a listener might add too much lag. I did not actually try it, but I will if you think it would be the best bet.

    I am using the Purchase Order widget to collect payments owed. I realize a direct payment integration would be more efficient, but my use case involves multiple entities that need the information before any payment is processed, which must be done with a specific provider.

    Do you have any more suggestions?

  • jherwin
    Replied on February 1, 2019 at 1:59 AM

    So two form is embedded in your website but on a different page. I believe my colleague answer on this thread will solve the problem: https://www.jotform.com/answers/1674101. Look for Mike_G answer and see if that's what you're referring to.


  • bnoreen
    Replied on February 1, 2019 at 8:57 AM

    Thank you, but that is not my issue. The only reason I have two forms is to create a static data point with the value the user submitted, in hopes to essentially scrape it. Or, if there is a way to enable PHP in a thank-you page, I could dynamically create an external URL for users to click on. I saw a mention of something related in another thread, but the agent seemed to be referring to a redirect instead that did not include any form data.

  • Kevin Support Team Lead
    Replied on February 1, 2019 at 10:09 AM

    As I understand, you want to pass the data from one form to another, both forms are embedded, correct? 

    Now, the process should be the same as the one explained on this guide: https://www.jotform.com/help/351-How-to-Automatically-Pass-Form-Data-to-Another-Form 

    The only different is that instead of using the JotForm link "www.jotform.com" you will use your web page URL. 

    If you're experiencing issues passing the data you may provide us your forms links so we can have a look. 

    Also, note that the default thank you page does not allow PHP codes, but if you want to use PHP you can redirect your users to an external page with your custom code, this guide will help you doing so: https://www.jotform.com/help/38-Redirecting-Users-to-a-Different-Page 

    Thanks. 

  • bnoreen
    Replied on February 1, 2019 at 4:30 PM

    Thank you, I was not aware that field variables could be used in external URLs. This completely solves my problem!

    Well, almost completely... When this method is used, what is the expected behavior of autoresponder emails? When are they triggered? I notice I receive a notifier on submit, but when I'm redirected the form frame/browser tab remains in "processing" mode. It's very helpful to make sure no confirmations are sent until the next step (off-jotform) is completed, but is it a permanent state? The redirect opens in a new tab for security, I assume.

    I could use webhooks to trigger an autoresponder from another form, I think. My question then remains, what about the persistent "please wait while we process your data..." state?

    Should I simply add instructions for users that it will be okay to close the window after the redirect opens?

  • Donald_H
    Replied on February 1, 2019 at 6:24 PM

    The Autoresponder is triggered when the submit button is clicked. If you have 2 forms embedded and would like it to trigger only on the second Email, you can go ahead and delete the Autoresponder on the first Email or customize if as required.

    Refer to this guide: Explanation of Email Notification and Autoresponder Settings


  • bnoreen
    Replied on February 2, 2019 at 1:21 AM

    Thank you for your reply, however I am familiar with the autoresponder function as it normally behaves. What I am experiencing is that no emails are sent on submit except for notifiers. Instead, when the form is submitted and a new window opens per the redirect setting, the form window remains open with a perpetual  spinner.1549085139Screenshot 2019 02 02 00 Screenshot 10

  • Donald_H
    Replied on February 2, 2019 at 3:05 AM

    The redirect will not work in preview mode. You have to publish the form and load it via the form URL to test out the redirect. I have tested your form here: https://www.jotform.com/90246104522143 and it redirects to PayPal with no issues.

    I see you are creating the PayPal payments without making use of the PayPal Integration. We recommend users make use of the integration as it adds PayPal seamlessly to your forms. I would recommend you make use of the PayPal Integration as opposed to the Purchase Order. 

    For further assistance, do let us know.

  • bnoreen
    Replied on February 9, 2019 at 2:51 PM

    Thanks again, it works perfectly!

    I wish I could use the PayPal integration, but I am an individual creating a one-time event which may or may not go over the free account's ten-payments-per-month limit. I cannot afford a JotForm subscription for $19/mo., let alone $190/year plus PayPal fees. The business I'm working with cancelled their JotForm subscription when the limits were implemented, but is kindly accepting payments through PayPal. I already like using JotForm, and it turned out to be a great alternative to Eventbrite and the like, who charge additional fees for services I don't need that I would have to pass on to registrants.

    In case anyone is in the same situation, what I ended up doing is this:

    1) Set up a form for event registration using the Purchase Order widget. Create a hidden calculation field called "Total" which contains the value of the Purchase Order field (it will automatically pass only the total.) Instruct your users to choose "Return to Merchant" after checkout. This is not absolutely necessary, but it will allow you to confirm that each user who submitted the form also made a payment.

    2) In settings, choose to send HTTP POST data to the thank-you page.

    3) Set the redirect URL to PayPal, using form field variables, i.e. {total}, {title}. You can find all of the Your URL should look like this:

    https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=you@yourbusiness.com&amount={total}&currency_code=USD&item_name={title}&no_shipping=1&cancel_return=https://www.jotform.com/form/yourFormID/&return=http://www.yourbusiness.com/confirmation 

    where you@yourbusiness.com is your PayPal account. You can find full instructions with all available fields at the PayPal developer site here.

    4) Set up your email autoresponder as you wish, with all your event details (I like to start from scratch and use something like the one from brownpapertickets.com.) When using the Purchase Order widget, the name of that field will pass the items selected, quantities, and their subtotals in narrative bullet form, with the total underneath.

    5) Under settings > Integrations, connect your form to a Google spreadsheet to collect your data.

    6) Create a second JotForm form with no questions. I called mine "payConfirm". Users will only see this form for a split second, then be directed to a final thank-you page. This page will not contain any information from PayPal or the previous form. As mentioned above, this is solely so that you can confirm that each person who submitted your form also made a payment. In case a user does not have JavaScript enabled, change the submit button text to "click here if the page takes too long to redirect".

    7) Connect this form to a Google spreadsheet as well.

    8) Create the aforementioned page at http://www.yourbusiness.com/confirmation. Embed your second form (I think you only need the "form" element, please correct me if I'm wrong. I have not tried this with an iframe.) Make sure '<form id="yourSecondForm" - in this case "payConfirm " - and insert the following script (without single quotes':

    '<script type="text/javascript">
        function submitForm() {
            document.getElementById('payConfirm').submit();
        }
        window.onload = submitForm;
    </script>'

    9) Now, this form will automatically be submitted when clicking "Return to Merchant" on the PayPal checkout page. You will receive a timestamp and IP address, which you can compare with responses from your first form. To do that, I created a third Google sheet into which I imported data from both forms (best to do this so you don't accidentally un-link your sheets from your forms.) You can use importrange() on two separate sheets. Hide the columns you don't need to see. In the column to the right of the registration form data, use the formula =if(isblank(C8),"",iferror(index(confirmImport!A:E,match(Q8,confirmImport!C:C,0),1),"check for payment")) where C8 is a cell in the current row (any column), confirmImport is the sheet with your confirmation data, and Q8 is the column with IP addresses from your registration form. Ta-da!

    If you followed this far, you should be able to create a workable solution. I hope this can be useful for others who also fall into a use case scenario in between the currently available options. If you are a third-party volunteer organizer, are working on a collaborative short-term project that is not generating revenue to justify costs beyond regular processing fees, or is for people for whom extra fees would be a barrier, it can offer a viable option.

    I feel comfortable sharing this workaround because it will NOT work as a part of a regular business process, and the end result is JotForm-branded. It's important to note that an "un-hosted button", which this effectively is, while it does not violate either party's policies, does make it possible for users to manipulate the redirect URL to change the amount, payee, address requirements, etc. Therefore, it should not be used for selling products, contracts, subscriptions, tickets to large events, or for anything where you will not be independently verifying the accuracy of each transaction. If you are doing any of these things, you must use JotForm's secure PayPal integration. Those of you fellow volunteer organizers out there anxiously awaiting your incoming responses one by one, this is for you.

  • Welvin Support Team Lead
    Replied on February 9, 2019 at 4:55 PM

    Thank you for taking the time to share this solution with us. We appreciate your effort in doing so. I have the Paypal workaround for skipping payment limits, but the others are fantastic, and I'll be keeping that. Thank you again, and please contact us again if we can help in any way :)