Answered

Typeform embedded in HubSpot email only pulling default personalization tokens

  • 4 April 2024
  • 9 replies
  • 80 views
B

Here’s my goal: Embed a Typeform form in a HubSpot email. When users select an option in the Typeform form, their names and email addresses are included in the Typeform responses.

 

What I’ve done so far: I created the form and added Hidden Fields. I went to Share > Embed in an email and paired my HubSpot personalization tokens with the Hidden Fields. I then copied the embed code into HubSpot. (Thank you to HubSpot for the amazing video and tutorial here!)

 

The issue: When I send the email to myself (it’s a live email, not a test), the default Email and Name values show up in the Typeform responses, instead of my name and email address. Any idea on how I can get the actual names and email addresses to populate? 

 

See attached screenshot (I’ve redacted a few things for confidentiality).

 

icon

Best answer by Bianca Ragsdale 9 April 2024, 20:00

View original

9 replies

Liz
Rank
Userlevel 7
Badge +5

Hi @Bianca Ragsdale Thanks for stopping by the community! I’ll pass along the feedback about the tutorial to our help center team. 😁

Do you mind sharing a screenshot of how you have the embedded fields in the Hubspot email (ex, the code you’re placing into Hubspot)? It may be possible there’s something small that needs to be edited. 

Life is a series of awkward moments separated by snacks.
B

@Liz Thanks for the quick response! Here’s the embed code from Typeform:

 

<div class="mail-wrapper" style="" lang="und" dir="auto"> <table align="center" class="wrapper" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%"> <tbody> <tr> <td> <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper-outlook" role="presentation" style="width:640px;" width="640" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> <div style="margin:0px auto;max-width:640px"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%"> <tbody> <tr> <td style="direction:ltr;font-size:0px;padding:0;text-align:center"> <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> <div class="" style="margin:0px auto;max-width:640px"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%"> <tbody> <tr> <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center"> <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:640px;" ><![endif]--> <div class="mj-column-px-640 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top" width="100%"> <tbody> <tr> <td align="left" class="" style="font-size:0px;padding:10px 25px;word-break:break-word"> <div style="font-family:'Raleway',Helvetica,Arial;font-size:22px;font-weight:normal;line-height:32px;text-align:left;color:#000000">What LandingLens plan would you like to enroll in?</div> </td> </tr> <tr> <td align="left" class="" style="font-size:0px;padding:10px 25px;word-break:break-word"> <div style="font-family:Ubuntu,Helvetica,Arial,sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000"><a href="https://landingai.typeform.com/to/TKxaVHnS?typeform-medium=embed-email#email={{personalization_token('contact.email', 'email')}}&amp;name={{personalization_token('contact.firstname', 'friend')}}&amp;answers-01HT100CPCBPG9TBM9DMQY1AZS=01HT100CPCQJY61DP580MRP9FM" style="font-family:'Raleway',Helvetica,Arial;color:#000000;display:block;font-size:16px;line-height:18px;text-decoration:none;text-align:left;padding:10px 20px;border:1px solid #000000;border-radius:3px;background-color:rgba(0, 0, 0, 0.1)">Enroll me in the new Visionary plan</a></div> </td> </tr> <tr> <td align="left" class="" style="font-size:0px;padding:10px 25px;word-break:break-word"> <div style="font-family:Ubuntu,Helvetica,Arial,sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000"><a href="https://landingai.typeform.com/to/TKxaVHnS?typeform-medium=embed-email#email={{personalization_token('contact.email', 'email')}}&amp;name={{personalization_token('contact.firstname', 'friend')}}&amp;answers-01HT100CPCBPG9TBM9DMQY1AZS=01HT100CPC5Z0159H1XPP4B0H4" style="font-family:'Raleway',Helvetica,Arial;color:#000000;display:block;font-size:16px;line-height:18px;text-decoration:none;text-align:left;padding:10px 20px;border:1px solid #000000;border-radius:3px;background-color:rgba(0, 0, 0, 0.1)">Enroll me in the Free plan</a></div> </td> </tr> <tr> <td align="left" class="" style="font-size:0px;padding:10px 25px;word-break:break-word"> <div style="font-family:Ubuntu,Helvetica,Arial,sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000"><a href="https://landingai.typeform.com/to/TKxaVHnS?typeform-medium=embed-email#email={{personalization_token('contact.email', 'email')}}&amp;name={{personalization_token('contact.firstname', 'friend')}}&amp;answers-01HT100CPCBPG9TBM9DMQY1AZS=34d0a5f0-2471-4754-889b-7435b98ae7ac" style="font-family:'Raleway',Helvetica,Arial;color:#000000;display:block;font-size:16px;line-height:18px;text-decoration:none;text-align:left;padding:10px 20px;border:1px solid #000000;border-radius:3px;background-color:rgba(0, 0, 0, 0.1)">I'm not the decision maker in my organization</a></div> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]></td></tr></table><![endif]--> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]--> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]></td></tr></table><![endif]--> </td> </tr> </tbody> </table> <style>#outlook a{padding:0}body{margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}table,td{border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt}img{border:0;height:auto;line-height:100%;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic}p{display:block;margin:13px 0}@media only screen and (min-width:480px){.mj-column-px-640{width:640px !important;max-width:640px}}.moz-text-html .mj-column-px-640{width:640px !important;max-width:640px}.mj-column-px-640{width:100% !important;max-width:640px}/*!sc*/data-styled.g1[id="sc-global-juhJZJ1"]{content:"sc-global-juhJZJ1,"}/*!sc*/</style><link href="https://font.typeform.com/dist/google/ubuntu/index.css" rel="stylesheet" type="text/css"><link href="https://font.typeform.com/dist/google/raleway/index.css" rel="stylesheet" type="text/css"></div>

 

B

Ah, I just realized I credited the wrong team for the tutorial video! Let’s try this again:

Thank you to Typeform for the amazing video and tutorial here!)

B

Hi @Liz! By any chance did you notice anything amiss in the embed code I shared? Thanks!

L

I had the same thing happen for me while setting this up with Campaign Monitor and then realized that Campaign Monitor was changing the form links for tracking purposes and therefore disabling the link from entering the tokens. Easy way to check if it’s doing the same for you would be to hover over the link in the delivered email to see if it’s the same one you have in your embed. 
Hope this helps! 
 

Liz
Rank
Userlevel 7
Badge +5

@Bianca Ragsdale HA no worries! 

Looking at the code, it does look correct. @mathio do you happen to see anything that would be preventing the hidden field information from passing from Hubspot to Typeform? 

Also, thank you for sharing that, @lmarins !

Life is a series of awkward moments separated by snacks.
mathio
Rank
Userlevel 7
Badge +5

Hello @Bianca Ragsdale and @Liz 

The code generated on our side seems to be correct. When you receive the email, are the variables (name and email) populated correctly? If not, there is something not setup properly with HubSpot (it is not replacing the variable correctly). 

Are you sure the value {{personalization_token('contact.email', 'email')}} is correct? From what I have seen before it usually looks like {{contact.email}} or {{email}}.

B

Thank you @Liz , @lmarins , and @mathio for the help and tips! I ended up adding a question to the form that asks the user for their email address. And when I sent the email, lo and behold, the names & email addresses did populate correctly for the Hidden Fields in the responses. So I must have done something differently in HubSpot when sending out the first email vs the “actual emails”. 

Liz
Rank
Userlevel 7
Badge +5

Oh, well glad it was an easy fix, @Bianca Ragsdale !

Life is a series of awkward moments separated by snacks.

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs