Starting resources:
What are hidden fields in Typeform
Using hidden fields in Typeform
Using Typeform in Webflow
Here are a few steps to embed Typeform with a hidden field from Memberstack in Webflow.
Step 1: Custom code embed component
In Webflow, place the following code where you want to see your Typeform in an embed component. To get this code to work for your individual Typeform account, you need to replace "https://yourname.typeform.com/to/abc123" with your share link from the form you want to use.
<div class="typeform-widget" id="typeform-memberstack" data-url="https://yourname.typeform.com/to/abc123?email=unknown" style="width: 100%; height: 100%;"></div>
Step 2: Bottom code before
Place the following code in the page settings in the "Before </body> tag" field. This code will also require you to update the share link like above.
<script>
MemberStack.onReady.then(function(member) {
let memberEmail = member["email"];
if (member.loggedIn) {
let src = "https://yourname.typeform.com/to/abc123?email="+ memberEmail;
let typeformElement = document.getElementById("typeform-memberstack");
typeformElement.setAttribute("data-url", src);
return src
};
})
.then(() => {
typeformCode();
});
function typeformCode() {
var qs,
js,
q,
s,
d=document,
gi=d.getElementById,
ce=d.createElement,
gt=d.getElementsByTagName,
id="typef_orm",
b="https://embed.typeform.com/";
if(!gi.call(d,id)) {
js=ce.call(d,"script");
js.id=id; js.src=b+"embed.js";
q=gt.call(d,"script")[0];
q.parentNode.insertBefore(js,q);
}
}
</script>
Now you can use a hidden field in an embedded Typeform in Webflow! 🎉