Personalize your forms with HubSpot

Adding HubSpot personalization tokens to your form 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 form or open up an existing one. In this example, we’re using a simple quote template that you can find in the template gallery.

2. Go to the Logic tab, click Personalize with data, and choose Hidden Fields.

3. Click email and name to add them as Hidden Fields, then hit Save.

4. To add Recall information to a question, go back to the Content tab and type the @ symbol where you would like to recall information. Then select the name Hidden Field.

Make sure to hit Publish when you’re happy with your form.

5. Go to the Share panel and copy the link of your form. 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. Add a button to your email by dragging and dropping the button element.

7. Paste your form URL in the Link URL field.

8. Now it's time to edit your form URL and add the HubSpot personalization tokens. These are dynamic fields that'll be populated automatically based on the email address you're sending your campaign to.

Delete the 'xxxxx' string after 'email=', which corresponds to Typeform's email Hidden Field and enter the HubSpot personalization token {{contact.email}} like below.

9. Next, delete the 'xxxx' string after 'name=', which corresponds to Typeform's name Hidden Field and enter HubSpot's personalization token {{contact.firstname}} like below.

HubSpot's personalization tokens consist of the variable name, a period, and the property name all within two sets of curly brackets {{ }}. Below are some examples of what a HubSpot personalization token could look like:

{{contact.firstname}}

{{contact.email}}

{{company.name}}

10. Edit the button text.

11. Optionally, you can dynamically personalize the greeting of your campaign to address the receiver by their first name.

Place your curser where you would like to enter the receiver's first name. Then click Personalize in the tool bar.

12. Under the Type dropdown, select Contact.

13. Then under the Token dropdown, select First name and click Insert.

Optionally, you can also enter a Fallback value if you don't have the receiver's first name. For example, you can enter “Friend”, and greet people with a friendly “Hello Friend” if you don’t have their first name yet.

14. Now you'll see that the personalization token has been added to your campaign.

When you send the campaign to your recipients, these fields will dynamically update with their contact information.

15. 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 first name has been automatically populated in the greeting of the email. 

You can click the button to open the form that’s already recalling your name based on Hidden Fields and the dynamically populated HubSpot properties.

You can set up Logic to skip the email question in your form if you already have this information about your contacts in HubSpot. Check out this article for more information on adding Logic to Hidden Fields.

Here’s how to do it:

1. Go to the Create panel of a form 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 in the form, which is the email question, and jump straight to asking for our respondent's name. We'll use a logic rule that says if an email contains @, then go to the question What's your first name?.

Here’s what the Logic Map of this setup looks like.

When a respondent opens a form 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 form.

If you want people to interact with the first question of your form directly in an email, you can use Typeform’s launch your form 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 form or create a new one. If your form 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, click Personalize with data, and choose Hidden Fields.

3. Add the name Hidden Field to your form, 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 the @ symbol and selecting the name Hidden Field to recall your respondent’s name. When you’re happy with your updates, make sure to publish your form.

6. Go to the Share panel and select Embed 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 in Typeform, and paste it in the field below name in the Advanced section. 

10. Now click Start embedding and then Copy to grab your form’s embed code. 

11. Go back to your HubSpot campaign, select the Edit tab, and click + More in the Content panel.

12. Drag and drop the HTML - Email element in your HubSpot email campaign and paste your form’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 in your form directly from the email. After they answer the first question, they’ll be taken to a new tab in their default browser to complete the rest of the form.

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 forms.

Alternatively, you can also embed a form 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.