Typeform: member data & hidden fields

Article author
Josh Lopez

How to get member data into a Typeform embed with hidden fields to keep track of who is using your forms.

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>

typeform-share-link.JPG

 

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>

 

webflow-bottom-code.JPG

Now you can use a hidden field in an embedded Typeform in Webflow! 🎉

Was this article helpful?

Comments

7 comments

  • Comment author
    Ignacio Ramognino
    • Edited

    Hi Josh, thanks you very much!


    Do i need to change this?

    let typeformElement = document.getElementById("typeform-memberstack");

    and

    id="typef_orm",
    1
  • Comment author
    Josh Lopez

    Hey there 👋

    You shouldn't need to unless Typeform changed their embed. The only thing you would need to change is the src:

    let src = "https://yourname.typeform.com/to/abc123?email="+ memberEmail;

    change "yourname" to the name of your typeform.

    0
  • Comment author
    Ignacio Ramognino

    thanks you very much! i can do it :)

    0
  • Comment author
    Digital Tourism Think Tank

    Can anyone help with this, I've been trying and trying and I just don't get member data back - I only get what I put here. So for example for e-mail I get +memberEmail instead of the response.... 

    0
  • Comment author
    Christina Nizar
    • Edited

    Please help. I did the instructions to a T but the actually typeform itself doesn't show up. Will someone try this and let me know how to solve. I'm currently using memberstack 2.0. Didn't something change?

    0
  • Comment author
    Digital Tourism Think Tank

    Hi Christina,

    I must say I was tearing my hair out for weeks and I had so many difficulties, then after a lot of very technical chit-chat with Typeform, they actually solved it for me. It was very simple but the code documented everywhere was not right.

    Just be sure there is only one typeform per page as I found that also causes conflict...

    All the bits I put in bold are fields to change. The first is your Typeform ID, the other three are memberstack fields I wanted to swap the hidden fields for. One thing I wasn't able to get is their membership type/level as I wasn't able to capture that - simple but I gave up. If you do succeed and figure out the name of this field in Webflow I would be delighted to know!

    Let me know if this works for you? For me it works like a dream and with very advanced logic I route different members through different options...

    This is what I put in the page settings before Before </body> tag:

    <script src="//embed.typeform.com/next/embed.js"></script>
    <link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css"/>
    <script>
    MemberStack.onReady.then(function(member) {
      if (member.loggedIn) {
        const typeformElement = document.getElementById("typeform-memberstack");
        window.tf.createWidget('lcHvVyV6', {
          container: typeformElement,
         hidden: {
           member: member["work-organisation"],
           email: member["email"],
           name: member["first-name"],
          }
        })
      };
    })
    </script>

    Then using the HTML Embed on the page, I put this:

    <div class="typeform-widget" id="typeform-memberstack" style="width:100%;height:600px"></div>

    0
  • Comment author
    Digital Tourism Think Tank

    Also just to say the:
    member
    email
    name

    are the names of the hidden fields in Typeform - so swap these for whatever you called yours... then the bold are the MemberStack fields...

    0

Please sign in to leave a comment.