How can I pass data from a form to the next form embedded on the same iframe?

Hello!

Been trying to figure out how to pass a user to the next form (using autopassing of variables)  and stay on the page using the iframe code.

Issue: When the user goes submits and goes to the next section, it automatically leaves the embedded page and goes to a fullscreen of the next jotform page.. 

Is there some way keep all the forms in the same page? (the user has to fill out 4 and we need to keep passing email to the next form so we know who they are.)

Thank you!

Unfortunately, it's not possible to reload an external page within in iFrame of an embedded JotForm. 

As a workaround you may create 4 different pages with the forms embedded, then redirect to each page accordingly passing the data via the URL.

Oh, that's a cool idea, how might I do that?

Eg: Say my url hosting form1: 

"testpage.com/start"

The next jotform I want to send it to, if iframe embeds worked on the primary start page, would be: 

"jotform.com/easytrust/part2?email2={email}"

But, using your work around idea, the next page on my site I could create to host the part2 form is:

"testpage.com/part2"

Do you know how what sort of redirect URL I can put in form1 to still pass those parameters from the user for the part2 URL as you mentioned?

Thank you!
 

Unfortunately, I just tested it and it's not possible to do at the moment if the form is embedded on the web page. You need the standalone form/default (possible with masking domain too) form URL in order to pass data from form 1 to form 2.

What you can do for now is create 4 pages on your webpage for your 4 forms and redirect the thank you page to each page.

Page 1- "testpage.com/start1"
Page 2- "testpage.com/start2"
Page 3- "testpage.com/start3"
Page 4- "testpage.com/start4"

However, you'll not able to pass/prepopulate the data from form 1 to form 2 and so on.

Thanks for trying it-- Been trying all sorts of different experiments myself with iframes but you're right. 

Do you have any recommendations how I can figure out which users filled out which forms?
Eg: are there userIDs I can refer to or IPs? Basically, I need to take all their submissions and string them together so want to make sure I know who's done what form... Thanks!

You can find or see the IP of your respondent on your submission page. Please follow this guide: How to Find the IP Addresses of Form Respondents.

Also, how about using a unique ID? However, there's a risk for this, if the user only completes the form 1 and didn't submit/complete filling out form 3 and so on. Then the unique ID will no longer match.

Please check this guide for more details if you want to check it: How to Add Custom Unique IDs to your Form Submissions?

Will try out working with the IP— thanks for the ideas!

I was looking hard at the page and really the only thing on there that is critical is the chatbot feature (as users can get really confused). Is there any way to add a JS script to any of the forms? All it is is one of those floating chatbot boxes but users seem to like it.

Thanks again Jherwin!

The only way to add custom Javascript to the form is to use your form source code How to get the Full Source Code of your Form. There's no other way to do it other than this. However, the downside with using source code is you need to update them whenever you made changes to your form in the form builder.

Let us know if you need any further assistance. :)

That's a good idea-- Was looking, but I don't see that option in our publish page... (screenshot attached)

Perhaps I'm missing something? 

Embedding the form using its Full Source Code is not possible with JotForm Cards.

I have read your requirements above and I believe what you are trying to accomplish is possible using PHP.

Here's sample website where I have embedded the first form.

https://shots.jotform.com/MikeG/screenshot/load-multiple-form-same-iframe-sample.php?part=1

If you submit the first form on the website above, the same web page will reload but it will have the second form already. The email field on the second form will be filled with the email address that was entered in the email field on the first form.

If you submit the second form, the same web page will reload but it will now have the third form. The email field on the third form will be filled with the email address that was in the email field on the second form.

Submitted data on the forms embedded on the webpage will be stored under the form in your account accordingly.

You can find the codes I used in my example above here.

If you have any further questions, please feel free to let us know.

@Mike-- that's awesome! Thanks for the code / example!
Looking into how to get PHP to run on our server now.
I assume there's a way to make that code mobile-responsive too?
(Just tinkering in Chrome dev tools).
I know very little about PHP so once it's up and running will be giving it a spin using your sweet code.

Our forms are already mobile responsive, but you need to have the following meta tag inside the head attribute of the PHP page:

<meta name="viewport" content="width=device-width, initial-scale=1">

Modified: https://www.pastiebin.com/5c15da611ec2e

Thanks so much Welvin, Mike & JHerwin!!!