How to use the URL prefill option on the embedded forms?

We have a long form, and we need to capture some information before they drop off, so we have the lead. So, we've split the long form into two sequential forms. Users complete one, then move to the next.

The problem is that two forms create two records. So we want to pass some data from the first (e.g. email) into a hidden field in the second form. This way, we can set up our system to recognize and Update the first record with the info submitted in the second form.

We could do this with URL pre-fill method, but only if the submission results page is a jotform.com page (the form itself). But we've embedded the forms in our site.

So,... Can we have one embedded jotform pass values to the next embedded jotform?

Or, can we set up the behavior of submission on one form to simply serve the next form into the same embed section of our page? If I could do that, perhaps we could use URL prefill method to pass Form 1 data into Form 2.

Hi Matthew,

Thanks for reaching out to Jotform Support. Do you maybe use the iFrame code as an embed method? If yes, iFrame embedded forms can generally be populated via URL parameters. Check out this guide to get the embed code. But, there may be some restrictions for website platforms.

For example, if a website platform puts our embed codes into their iFrame, pre-population won't work. Please test with your webpage and let us know how it goes. If needed, we can help with that by sharing your webpage link where the forms are embedded so we can check them out.

We can move forward with a solution as soon as we hear back from you.

We use Wordress. Will this work?

I can use iframe in Wordpress. How then do I pass field data from Form 1 into Form 2?

Hi,

To my understanding, you want to fill out form A and submit it. And, it will be redirected to the website with the prefill URL.

If yes, you will need to modify the iFrame embed code and replace the form URL with the prefill form URL. I created a screencast guide on where to change it:

Yes, it will work on WordPress. Give it a try and reach out again if you have any other questions.

Here is a diagram of the scenario. We want to pass a value as a pre-fill from one form to another.

https://www.screencast.com/t/L59Yh9wYu

the "pre-fill" is coming from data submitted on the first form. So how do I set up the "pre-fill URL" with value names that create dynamically from the values of the Form 1 fields?

Also, to clarify, in your example, this embed iframe code is in which form? the first or second?

Ultimately, this is all an attempt to creatively solve the following need:

we want to have a multi-step form experience for users that captures data in the table AS THEY move through the form.

It is my understanding that Jotform does not do "save-as-they-go" to the table (unless the user hits a Save button).

So, multiple forms is our attempt at handling this need. BUT, we need a common field in each form to connect the submissions to the same Contact on our backend.

So we're trying to pass one field, like email address into the second form.

Hello babygroot,

Thanks for your response. I understand that you want the user to fill out the form that is embedded on your WordPress website and then if they clicked the Submit button, they will be redirected to a form embedded on another page on your website prefilled with the data from the first form. If this is the case, this can be achieved by using the Redirect to external link feature on Thank you page and adding the prefill parameters to the URL of the webpage where the second form is embedded. Here are the steps to set that up:

1. Embed your forms using iFrame embed code to your webpages in WordPress.
2. Get the URL of the webpage where the second form is embedded.
3. Enter the URL of the webpage where the second form is embedded and then add the prefill parameters.
4. Test the form.

Here's a demo video on how to set that up.

Give it a try and let us know if you need help.

Thanks. For some reason, the pre-fill is not working. You can see here:

https://totallife.com/onboarding-test-form2/?email=test@asdf.com

The value is not populating

Here is a video of what's happening: https://www.screencast.com/t/vy9baZU3zOv

Hi @babygroot,

Thanks for reaching out to Jotform Support. Could you please share the web page link and allow us to submit the form to see how it works?

Thank you.

thanks https://totallife.com/onboarding-test-form1

I see it work on your demo video, but nothing populates for me on the second form. The iframe-embedded form doesn't seem to know anything about the parameters in the URL.

I could replicate the issue. Can you please try re-embedding the forms using the iframe part only?

Form 1:

    <iframe

id="JotFormIFrame-222220403677145"

title="Lead Form Step 1"

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

allowtransparency="true"

allowfullscreen="true"

allow="geolocation; microphone; camera"

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

frameborder="0"

style="

min-width: 100%;

height:539px;

border:none;"

scrolling="no"

>

</iframe>

Form 2:

    <iframe

id="JotFormIFrame-222220783359153"

title="Lead Form Step 2"

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

allowtransparency="true"

allowfullscreen="true"

allow="geolocation; microphone; camera"

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

frameborder="0"

style="

min-width: 100%;

height:539px;

border:none;"

scrolling="no"

>

</iframe>

After that, allow us to test it again.

Thank you.

Is there something more or different than the iframe code now?

I removed the script code and left only the iframe, on both form pages. Still not working

could there be a setting in the forms themselves that disallow this?

Should I add the script somewhere else on the page, like in the head section?

Hello Matthew,

Thanks for reaching out to Jotform Support. Could you please allow me some time to closely look into this?

Your patience is most appreciated.

Hello Matthew,

Thanks for patiently waiting. Please note that the issue has nothing to do with Jotform, but rather with the method you're using to embed the iframe code into your website. As you can see in the screenshot below, the iframe code is modified by the host website and is not the exact same iframe code Jotform provides (notice how the "src" attribute changed).

That said, please check the configuration and settings of the method/widget you're using to embed iframe codes. I use WordPress and this doesn't happen, so it's subjective to what you have set up at your end.

Should you have any further inquiries, please feel free to get back to us.

I'm using a Raw HTML element on the page. Why would the source become modified? Any ideas?

I've disabled the Jotform WP plugin and a few others that I thought might be interfering. But honestly, I've never seen page code get modified on the fly like this. What could cause it?

Thanks.

Fixed. There was a tool that was creating lazyloading.

Thanks for all your excellent help!