Pass Webflow Form Data to Typeform?

I have the start of a lead form on my landing page. It collects name, email, and phone number.

The form redirects to a full-page TypeForm hosted on another, dedicated page on-site.

How can I pass the name, email, and phone inputs from the Webflow form on the landing page to the TypeForm on the next page? I’m trying to use the hidden fields feature in TypeForm.

Thanks!

2 Likes

You could try using the Redirect URL in the form settings.

https://www.typeform.com/help/hidden-fields/

Thanks Jeff. That was my first thought. However, the TypeForm is embedded on another page of my site, so, that TypeForm URL lies within the embed script in an HTML Embed block on the other page.

https://lawyers-by-win-rate.webflow.io/

https://lawyers-by-win-rate.webflow.io/lead-form

Did you try using the post action?

Just tried it. Here’s what happened…

50%20PM

I’ve never used POST method… I don’t really know what I’m doing. You have to talk to me like I’m 5 :slight_smile:

Thanks!

1 Like

Try leaving the action blank, since you want the webflow form get the data. I don’t have a pro account at typeform so I can’t test this out for you.

Ok Jeff, I think I am close… my from set-up is passing the parameters in the redirect URL, however, I’m not seeing that data for the hidden fields in Typeform, so I guess the script I’ve written isn’t modifying the TypeForm iframe src properly…

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 

<title>LBWR Qualification Form</title> 

<style type="text/css"> 

html{ margin: 0; height: 100%; overflow: hidden; } 
iframe{ position: absolute; left:0; right:0; bottom:0; top:0; border:0; } 

</style> 

</head> 

<body> 

<script type="text/javascript">

var loc = window.location.toString(),
    params = loc.split('?')[1],
    iframe = document.getElementById('typeform-full');

iframe.src = iframe.src + '?' + params;

</script>

<iframe id="typeform-full" width="100%" height="100%" frameborder="0" src="https://zacharypinnell.typeform.com/to/k5BPk6">

</iframe> 

<script type="text/javascript" src="https://embed.typeform.com/embed.js">

</script> 

</body> 

</html>

@Zach_Pinnell - I have no time today, but it would be helpful (quicker) to share your RO link. You could always PM me if you want to keep it off the forum.

Sure, there’s nothing proprietary. Just images and text.

Thanks!

@Zach_Pinnell - Ok a quick peak shows an issue with your embed code. All webflow pages load the html document with a head and body. You should not try to do this in an embed. The only thing you should be adding to an embed, is code you want to display in the document body.

Custom code, in the page settings, can be used to add code to the head or just before the body close.

So think about this for a little bit. Example - the style block should go in the head. The script block in the “before body close” area, with the typeform script first, then your custom script after (since it depends on the previous script loading).

Square this away, then test.

2 Likes

It worked!! We did it. Thank you so much.

I’ve been putting all my Typeforms in an HTML embed like that. Ooops.

Take care, Jeff :slightly_smiling_face:

1 Like

@Zach_Pinnell would be cool to see a step by step on how you pulled this off :slight_smile:

Sure! My pleasure.

Video: Pass GET Parameters to iFrame - YouTube

3 Likes

Thanks! That’s cool. Will definitely be useful on my next couple projects!

Hey Zach. I’m trying to do this exact thing, but it looks like your video is no longer live. Any way to get access?

Sure! Uploading now. It will go live here: Pass GET Parameters to iFrame - YouTube

Thanks, so I broke up the code in webflow as you mentioned. I have one additional strangeness to what I’m trying to do - wondering if you had thoughts.

I’m trying to launch a different typeform based on what is selected in a dropdown in my webflow form. I figure the way to do this is to make the dropdown selection values = the typeform ID and then append it to the raw typeform url. Am I thinking about this correctly? Do you know how I would do that?

Off the top of my head— maybe pass that value as a hidden field and use logic in Typeform to determine what question they see first? Multiple forms in one type of thing…

unfortunately needs to be launch separate forms. Clients request.

I feel like we should be able to pass information into the typeform URL similarly to the way you did it with parameters, but I havent figured out that side yet either.

What about those 7 digits after the /to/ in the URL? Make it pass the 7 digits associated with the Typeform relevant to their selection, and append to that spot in the URL.