Personalize your typeforms with HubSpot
Wouldn’t it be great if you could personalize your typeform’s URL by populating it with information you already know about your contacts? You can do just that by adding HubSpot personalization tokens to the typeform links of your HubSpot campaigns.
HubSpot's personalization tokens make a great pair with Typeform's Hidden Fields. You can use them to send information you already have about your contacts, for example, their name or email address from HubSpot to your typeform. You can then recall this information in the form itself, or skip questions asking for your respondents' name and email address, if you already have this information from HubSpot.
Here’s what you’ll need:
- A HubSpot account with a list of contacts
- A Free Typeform account
Here are the sections you can jump to in this article:
- Personalize your typeform with HubSpot
- Skip the email question for contacts you already know
- Start your typeform in an email
Personalize your typeform with HubSpot
Adding HubSpot personalization tokens to your typeform link means that the Hidden Fields in the URL will already be populated for your existing contacts in HubSpot. You can read more about populating Hidden Fields with a CRM here.
To add HubSpot personalization tokens to your campaign:
1. First, create a new typeform or open up an existing one. In this example, we’re using a simple lead generation template that you can find in the template gallery:
2. Go to the Logic tab and click Hidden Fields.
3. Create a Hidden Field called email and name, and hit Save.
4. Type @ to add Recall information from the name Hidden Field, and make sure to hit Publish when you’re happy with your form.
5. Go to the Share panel and copy the link of your typeform. You’ll notice that the email and name Hidden Fields are already part of the URL.
6. Go to your HubSpot account and create a new Campaign or open an existing one. Then, paste the link of your typeform into the HubSpot campaign:
Now it’s time to add the HubSpot personalization tokens to your typeform’s URL. These are dynamic fields that will be populated automatically based on the email address you’re sending your campaign to.
7. Delete the ‘xxxxx’ string after ‘name=’, which corresponds to the name Hidden Field, and click Personalize in the top right corner of the screen to insert your personalization token:
8. Select Contact as the token type, and search for or scroll down to the First name option:
9. Select the default value checkbox or set your own value, and click Insert:
Your respondents will be addressed by the Default value you set here if you don’t have the corresponding contact information. For example, you can choose to call them “Friend”, and just greet people with a friendly “Hello Friend” if you don’t have their name yet. A default value set by HubSpot might be something like “Marketer”.
10. Delete the ‘xxxxx’ string after ‘email=’, which corresponds to the email Hidden Field, and click Personalize.
11. Select Contact as the token type from the dropdown list, and search for or scroll down to the Email option:
12. Select the default value checkbox or set your own value, and click Insert:
Now you’ll see the First name and Email personalization tokens in your typeform’s URL:
When you send the campaign to your recipients, these fields will dynamically update with their contact information.
13. When you’re happy with your settings, click Review and send. You can click Send to test the campaign by sending an email to yourself.
Now you can check your inbox to see what your campaign looks like. When you open the email, you’ll notice that the email and name Hidden Fields have already been updated in the link to the typeform.
You can click the link to open the typeform that’s already recalling your name based on Hidden Fields and the dynamically populated HubSpot properties.
Skip the email question for contacts you already know
You can set up Logic to skip the email question of your typeform, if you already have this information about your contacts in HubSpot. Check out this article for more on adding Logic to Hidden Fields.
Here’s how to do it:
1. Go to the Create panel of a typeform that already includes a Hidden Field called email, or add it to the form. Select the Logic tab, and click Branching and calculations.
2. Add Logic based on Hidden Fields and click Save. In this example, we’ll skip the first question of the typeform, which is the email question, and jump straight to asking about the name of our respondents:
Here’s what the Logic Map of this setup looks like:
When a respondent opens a typeform from your HubSpot campaign with their email address already populated in the URL, they’ll be taken straight to the question about their name in the typeform.
Start your typeform in an email
If you want people to interact with the first question of your typeform directly in an email, you can use Typeform’s launch your typeform from an email sharing option. You can also use HubSpot personalization tokens to greet people by their name if you already have this information about them.
Here’s how to set this up:
1. Open up a typeform or create a new one. If your typeform contains a Welcome Screen, click the three dots next to it, and select Delete to remove it. The Welcome Screen is not compatible with embedding in an email.
2. Go to the Logic panel, and select Hidden Fields.
3. Add the name Hidden Field to your typeform, and click Save. We’ll recall this information later to make interacting with the form feel more personalized.
4. Add a question type compatible with sharing in an email as your first question. In this example, we’ll use a Rating question.
5. Add Recall information to the first question by typing @ and selecting the name Hidden Field to recall your respondent’s name. When you’re happy with your updates, make sure to publish your typeform.
6. Go to the Share panel and select Launch in an email.
7. Go to your HubSpot campaign and find the plain text version of the personalization token by selecting Settings, clicking the Plain text and web version dropdown arrow and clicking Customize.
8. Here you’ll find the plain text version of the name personalization token in HubSpot. Select and copy it (including all the brackets):
9. Go back to the Share panel of your typeform, and paste it next to @name in the Hidden Fields section. Click Get the code:
10. Now click Copy code to grab your typeform’s embed code. We recommend using the Inline embed option for this use case. You can select this option by toggling the Inline embed switch before copying the code.
11. Go back to your HubSpot campaign, select the Edit menu, and click + More in the Content panel.
12. Using the HTML - Email element in HubSpot, paste your typeform’s email embed code into the HTML field.
When people open your email, they’ll see something like this, and they’ll be able to interact with the first question of your typeform directly from the email. After they answer the first question, they’ll be taken to a new tab to complete the rest of the typeform.
If you enjoyed giving a personal touch to your campaigns with Typeform and HubSpot, you can also check out this article to see how to integrate these two apps, or this article for some more advanced content on HubSpot source tracking for embedded typeforms.
Alternatively, you can also embed a typeform into a HubSpot website or landing page using Hubspot's Source code button. You can also check out this HubSpot article to find out how to add code to the header or footer of an HTML page.