# Typeform and HTML integration

**URL:** <https://community.hubspot.com/t/typeform-and-html-integration/66399>\
**Category:** CMS Development\
**Tags:** email\
**Created:** [October 3, 2022, 10:33pm UTC](https://community.hubspot.com/t/typeform-and-html-integration/66399 "2022-10-03T22:33:18Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![AlexRaw7](https://avatars.discourse-cdn.com/v4/letter/a/3ec8ea/32.png) [@AlexRaw7](https://community.hubspot.com/u/AlexRaw7)\
**Post date:** [October 3, 2022, 10:33pm UTC](https://community.hubspot.com/t/typeform-and-html-integration/66399/1 "2022-10-03T22:33:18Z")

</div>

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](https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name=%7B%7Bpersonalization_token('contact.firstname)', "Hey There") }}&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](https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name=%7B%7Bpersonalization_token('contact.firstname)', "Hey There") }}&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](https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name=%7B%7Bpersonalization_token('contact.firstname)', "Hey There") }}&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](https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name=%7B%7Bpersonalization_token('contact.firstname)', "Hey There") }}&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](https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name=%7B%7Bpersonalization_token('contact.firstname)', "Hey There") }}&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](https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name=%7B%7Bpersonalization_token('contact.firstname)', "Hey There") }}&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](https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name=%7B%7Bpersonalization_token('contact.firstname)', "Hey There") }}&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](https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name=%7B%7Bpersonalization_token('contact.firstname)', "Hey There") }}&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](https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name=%7B%7Bpersonalization_token('contact.firstname)', "Hey There") }}&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](https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name=%7B%7Bpersonalization_token('contact.firstname)', "Hey There") }}&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](https://snappygifts.typeform.com/to/ZOWejhLb?typeform-medium=embed-email#name=%7B%7Bpersonalization_token('contact.firstname)', "Hey There") }}&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\>

---

<div class="post-metadata">

**Author:** ![APrigent](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/aprigent/32/55777_2.png) [@APrigent](https://community.hubspot.com/u/APrigent)\
**Post date:** [October 5, 2022, 12:32pm UTC](https://community.hubspot.com/t/typeform-and-html-integration/66399/2 "2022-10-05T12:32:53Z")

</div>

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](https://d2qpr2jzcazej7.cloudfront.net/original/2X/6/676ea8513bb2bb8fe8744dc5d69e41e1ca9cc631.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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/4/8/4822e89c524ed717c652d3de8d5edaab5554eecf.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](mailto:alice.prigent@markentive.com)