CMS Development

AlexRaw7
Member

Typeform and HTML integration

SOLVE

Hi I am having a nightmare with integrating a typeform HTML code into HS emails. The code doesn't seem to be responsive to the rest of the email and I have no idea how to fix it.

 

This is the code:

 

<div class="table-responsive">
<table class="table-responsive" style="background: #EBFBFF; background-color: #ffffff; width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td><!-- [if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper-outlook" style="width:640px;" width="640"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin: 0px auto; max-width: 640px;">
<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center">
<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="" style="width:640px;" width="640"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin: 0px auto; max-width: 640px;">
<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center">
<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 style="vertical-align: top;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="sc-bdfBwQ cIKpxU" style="font-size: 0px; padding: 10px 25px; word-break: break-word;" align="left">
<table style="color: #000000; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 22px; table-layout: auto; width: 463px; border: none; height: 146px;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height: 56px;">
<td style="padding: 4px; width: 77.2656px;" align="center"><a style="color: #012754; font-family: 'DM Sans', Helvetica, Arial; display: block; font-size: 16px; height: 56px; width: 100%; line-height: 56px; border-radius: 3px; background-color: #CDF4FF; border: 1px #012754 solid; text-decoration: none; text-align: center;" href="https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name={{personalization_toke...', 'Hey There') }}&amp;email={{ personalization_token('contact.email', 'Your work email')}}&amp;hubspot_utk=xxxxx&amp;hubspot_page_name=xxxxx&amp;hubspot_page_url=xxxxx&amp;answers-01GD3VPNF99W29CN17PCPFVAXK=0">0</a></td>
<td style="padding: 4px; width: 76.9375px;" align="center"><a style="color: #012754; font-family: 'DM Sans', Helvetica, Arial; display: block; font-size: 16px; height: 56px; width: 100%; line-height: 56px; border-radius: 3px; background-color: #CDF4FF; border: 1px #012754 solid; text-decoration: none; text-align: center;" href="https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name={{personalization_toke...', 'Hey There') }}&amp;email={{ personalization_token('contact.email', 'Your work email')}}&amp;hubspot_utk=xxxxx&amp;hubspot_page_name=xxxxx&amp;hubspot_page_url=xxxxx&amp;answers-01GD3VPNF99W29CN17PCPFVAXK=1">1</a></td>
<td style="padding: 4px; width: 77.0938px;" align="center"><a style="color: #012754; font-family: 'DM Sans', Helvetica, Arial; display: block; font-size: 16px; height: 56px; width: 100%; line-height: 56px; border-radius: 3px; background-color: #CDF4FF; border: 1px #012754 solid; text-decoration: none; text-align: center;" href="https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name={{personalization_toke...', 'Hey There') }}&amp;email={{ personalization_token('contact.email', 'Your work email')}}&amp;hubspot_utk=xxxxx&amp;hubspot_page_name=xxxxx&amp;hubspot_page_url=xxxxx&amp;answers-01GD3VPNF99W29CN17PCPFVAXK=2">2</a></td>
<td style="padding: 4px; width: 77.1406px;" align="center"><a style="color: #012754; font-family: 'DM Sans', Helvetica, Arial; display: block; font-size: 16px; height: 56px; width: 100%; line-height: 56px; border-radius: 3px; background-color: #CDF4FF; border: 1px #012754 solid; text-decoration: none; text-align: center;" href="https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name={{personalization_toke...', 'Hey There') }}&amp;email={{ personalization_token('contact.email', 'Your work email')}}&amp;hubspot_utk=xxxxx&amp;hubspot_page_name=xxxxx&amp;hubspot_page_url=xxxxx&amp;answers-01GD3VPNF99W29CN17PCPFVAXK=3">3</a></td>
<td style="padding: 4px; width: 77.2656px;" align="center"><a style="color: #012754; font-family: 'DM Sans', Helvetica, Arial; display: block; font-size: 16px; height: 56px; width: 100%; line-height: 56px; border-radius: 3px; background-color: #CDF4FF; border: 1px #012754 solid; text-decoration: none; text-align: center;" href="https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name={{personalization_toke...', 'Hey There') }}&amp;email={{ personalization_token('contact.email', 'Your work email')}}&amp;hubspot_utk=xxxxx&amp;hubspot_page_name=xxxxx&amp;hubspot_page_url=xxxxx&amp;answers-01GD3VPNF99W29CN17PCPFVAXK=4">4</a></td>
<td style="padding: 4px; width: 77.2969px;" align="center"><a style="color: #012754; font-family: 'DM Sans', Helvetica, Arial; display: block; font-size: 16px; height: 56px; width: 100%; line-height: 56px; border-radius: 3px; background-color: #CDF4FF; border: 1px #012754 solid; text-decoration: none; text-align: center;" href="https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name={{personalization_toke...', 'Hey There') }}&amp;email={{ personalization_token('contact.email', 'Your work email')}}&amp;hubspot_utk=xxxxx&amp;hubspot_page_name=xxxxx&amp;hubspot_page_url=xxxxx&amp;answers-01GD3VPNF99W29CN17PCPFVAXK=5">5</a></td>
</tr>
<tr style="height: 56px;">
<td style="padding: 4px; width: 77.2656px;" align="center"><a style="color: #012754; font-family: 'DM Sans', Helvetica, Arial; display: block; font-size: 16px; height: 56px; width: 100%; line-height: 56px; border-radius: 3px; background-color: #CDF4FF; border: 1px #012754 solid; text-decoration: none; text-align: center;" href="https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name={{personalization_toke...', 'Hey There') }}&amp;email={{ personalization_token('contact.email', 'Your work email')}}&amp;hubspot_utk=xxxxx&amp;hubspot_page_name=xxxxx&amp;hubspot_page_url=xxxxx&amp;answers-01GD3VPNF99W29CN17PCPFVAXK=6">6</a></td>
<td style="padding: 4px; width: 76.9375px;" align="center"><a style="color: #012754; font-family: 'DM Sans', Helvetica, Arial; display: block; font-size: 16px; height: 56px; width: 100%; line-height: 56px; border-radius: 3px; background-color: #CDF4FF; border: 1px #012754 solid; text-decoration: none; text-align: center;" href="https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name={{personalization_toke...', 'Hey There') }}&amp;email={{ personalization_token('contact.email', 'Your work email')}}&amp;hubspot_utk=xxxxx&amp;hubspot_page_name=xxxxx&amp;hubspot_page_url=xxxxx&amp;answers-01GD3VPNF99W29CN17PCPFVAXK=7">7</a></td>
<td style="padding: 4px; width: 77.0938px;" align="center"><a style="color: #012754; font-family: 'DM Sans', Helvetica, Arial; display: block; font-size: 16px; height: 56px; width: 100%; line-height: 56px; border-radius: 3px; background-color: #CDF4FF; border: 1px #012754 solid; text-decoration: none; text-align: center;" href="https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name={{personalization_toke...', 'Hey There') }}&amp;email={{ personalization_token('contact.email', 'Your work email')}}&amp;hubspot_utk=xxxxx&amp;hubspot_page_name=xxxxx&amp;hubspot_page_url=xxxxx&amp;answers-01GD3VPNF99W29CN17PCPFVAXK=8">8</a></td>
<td style="padding: 4px; width: 77.1406px;" align="center"><a style="color: #012754; font-family: 'DM Sans', Helvetica, Arial; display: block; font-size: 16px; height: 56px; width: 100%; line-height: 56px; border-radius: 3px; background-color: #CDF4FF; border: 1px #012754 solid; text-decoration: none; text-align: center;" href="https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name={{personalization_toke...', 'Hey There') }}&amp;email={{ personalization_token('contact.email', 'Your work email')}}&amp;hubspot_utk=xxxxx&amp;hubspot_page_name=xxxxx&amp;hubspot_page_url=xxxxx&amp;answers-01GD3VPNF99W29CN17PCPFVAXK=9">9</a></td>
<td style="padding: 4px; width: 77.2656px;" align="center"><a style="color: #012754; font-family: 'DM Sans', Helvetica, Arial; display: block; font-size: 16px; height: 56px; width: 100%; line-height: 56px; border-radius: 3px; background-color: #CDF4FF; border: 1px #012754 solid; text-decoration: none; text-align: center;" href="https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name={{personalization_toke...', 'Hey There') }}&amp;email={{ personalization_token('contact.email', 'Your work email')}}&amp;hubspot_utk=xxxxx&amp;hubspot_page_name=xxxxx&amp;hubspot_page_url=xxxxx&amp;answers-01GD3VPNF99W29CN17PCPFVAXK=10">10</a></td>
</tr>
</tbody>
</table>
</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>
</div>

 

0 Upvotes
1 Accepted solution
APrigent
Solution
Top Contributor | Elite Partner
Top Contributor | Elite Partner

Typeform and HTML integration

SOLVE

Hello @AlexRaw7 ,

 

Did you modify the code provided by typeform?
I already used this feature with a Hubspot email for one of our client and the embed from typeform worked fine by copying the code in the "Share > Launch in an email" section of typeform (the form was responsive) : 

typeform.png

 

Also, do you use husbpot emails in drag and drop? If not, it may be related to this: if your emails are integrated via an HTML template, I advise you to test the typeform's embed with a drag and drop email, which offers a responsive version adapted to different messengers.

 

Another element: did you check the "Inline embed" option before copying the code? This can have an impact on the rendering of the form in the email : 

inline embed.png

 

Also be sure to integrate the code in the source code of the email, and not directly in the body of the text for it to work 🙂

 

I hope my answer helped you!


Alice

alice.prigent@markentive.com

View solution in original post

1 Reply 1
APrigent
Solution
Top Contributor | Elite Partner
Top Contributor | Elite Partner

Typeform and HTML integration

SOLVE

Hello @AlexRaw7 ,

 

Did you modify the code provided by typeform?
I already used this feature with a Hubspot email for one of our client and the embed from typeform worked fine by copying the code in the "Share > Launch in an email" section of typeform (the form was responsive) : 

typeform.png

 

Also, do you use husbpot emails in drag and drop? If not, it may be related to this: if your emails are integrated via an HTML template, I advise you to test the typeform's embed with a drag and drop email, which offers a responsive version adapted to different messengers.

 

Another element: did you check the "Inline embed" option before copying the code? This can have an impact on the rendering of the form in the email : 

inline embed.png

 

Also be sure to integrate the code in the source code of the email, and not directly in the body of the text for it to work 🙂

 

I hope my answer helped you!


Alice

alice.prigent@markentive.com