Typeform and HTML integration

[AlexRaw7]

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_token('contact.firstname }}&email={{ personalization_token(‘contact.email’, ‘Your work email’)}}&hubspot_utk=xxxxx&hubspot_page_name=xxxxx&hubspot_page_url=xxxxx&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_token('contact.firstname }}&email={{ personalization_token(‘contact.email’, ‘Your work email’)}}&hubspot_utk=xxxxx&hubspot_page_name=xxxxx&hubspot_page_url=xxxxx&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_token('contact.firstname }}&email={{ personalization_token(‘contact.email’, ‘Your work email’)}}&hubspot_utk=xxxxx&hubspot_page_name=xxxxx&hubspot_page_url=xxxxx&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_token('contact.firstname }}&email={{ personalization_token(‘contact.email’, ‘Your work email’)}}&hubspot_utk=xxxxx&hubspot_page_name=xxxxx&hubspot_page_url=xxxxx&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_token('contact.firstname }}&email={{ personalization_token(‘contact.email’, ‘Your work email’)}}&hubspot_utk=xxxxx&hubspot_page_name=xxxxx&hubspot_page_url=xxxxx&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_token('contact.firstname }}&email={{ personalization_token(‘contact.email’, ‘Your work email’)}}&hubspot_utk=xxxxx&hubspot_page_name=xxxxx&hubspot_page_url=xxxxx&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_token('contact.firstname }}&email={{ personalization_token(‘contact.email’, ‘Your work email’)}}&hubspot_utk=xxxxx&hubspot_page_name=xxxxx&hubspot_page_url=xxxxx&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_token('contact.firstname }}&email={{ personalization_token(‘contact.email’, ‘Your work email’)}}&hubspot_utk=xxxxx&hubspot_page_name=xxxxx&hubspot_page_url=xxxxx&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_token('contact.firstname }}&email={{ personalization_token(‘contact.email’, ‘Your work email’)}}&hubspot_utk=xxxxx&hubspot_page_name=xxxxx&hubspot_page_url=xxxxx&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_token('contact.firstname }}&email={{ personalization_token(‘contact.email’, ‘Your work email’)}}&hubspot_utk=xxxxx&hubspot_page_name=xxxxx&hubspot_page_url=xxxxx&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_token('contact.firstname }}&email={{ personalization_token(‘contact.email’, ‘Your work email’)}}&hubspot_utk=xxxxx&hubspot_page_name=xxxxx&hubspot_page_url=xxxxx&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>

[APrigent]

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) :

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 :

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