Hey folks, it’s Maria here. I’d love to share a solution I created for passing email addresses from HubSpot forms to Typeform for lead enrichment...
All forms are cumbersome, except when it’s a typeform.
When it comes to forms, the rule of thumb is to make them short or use a typeform.
However, we sometimes go crazy when it comes to UX and so, we created a system where we are using both - a HubSpot meeting booking form (which is a short form) for lead capture and then a Typeform for lead enrichment.
So, when a user fills in the Hubspot meeting booking form, they are redirected to the Typeform URL where they are asked a bunch of extra questions to enrich the lead and capture more details.
Typeform gives a one-click integration with Hubspot, which means leads captured through Typeform will automatically fall in HubSpot.
But.
What if leads are not captured but only enriched in Typeform like in our scenario above?
In the above setting where we have 2 different forms, we want both forms to work in sync, which doesn’t happen by default.
When a form is submitted in HubSpot, it creates a contact on HubSpot immediately. When the typeform is submitted after that, the built-in integration creates yet another contact on HubSpot, unless we ask the user to enter their email address again. Of course, we wouldn’t do that.
That’s a trigger for a marketer’s OCD.
Unfortunately, if we don’t, Typeform will not ‘remember’ this is the same lead that filled in the HubSpot form.
Computer programs tend to have short term memory loss unless we program them not to be so forgetful.
In this particular scenario, there are 3 steps to making the Typeform remember the little details:
Handling the HubSpot event
Turns out I was not the only one with this problem.
The Typeform and HubSpot forums have multiple threads on this topic with people suggesting different solutions.
After going through all the suggestions, I came up with a solution:
I’ll attach an event listener to the window object. That event listener will listen to the message of ‘successful meeting booked’ by the HubSpot meeting calendar, which is embedded in an iframe on our WordPress website and calls an event handler function which accesses the data in the message object and pass it as a hidden field to the typeform URL. On successful form submission, the form redirects to the Typeform URL passed in the event handler function.
The good thing is Typeform gives us a way to make it remember things in the form of hidden fields.
If we are able to get the above to work and pass the name and email of the form submission to the Typeform URL as a hidden field, it will automatically use it to find the concerned contact on Hubspot and sync the extra details we are trying to get with the same contact, not as a new unnamed, unidentified contact.
Here is a step by step explanation of how that’s done, with a code snippet to copy and paste if you’re in a similar situation.
We use GTM to manage all our scripts so we added it as a custom HTML tag on GTM and triggered it on All Pages.
Here’s the code snippet:
<script>
window.addEventListener('message', function(event) {
// Check if meetingBookSucceeded and if the necessary data is available
if (event.data && event.data.meetingBookSucceeded) {
var meetingsPayload = event.data.meetingsPayload;
if (meetingsPayload) {
var bookingResponse = meetingsPayload.bookingResponse;
var postResponse = bookingResponse && bookingResponse.postResponse;
var contact = postResponse && postResponse.contact;
var email = contact && contact.email;
var firstName = contact && contact.firstName;
if (email && firstName) {
var typeformURL = constructTypeformUrl(email, firstName);
console.log('Constructed URL:', typeformURL);
window.location.href = typeformURL;
} else {
console.log('Required data is missing');
}
}
}
});
function constructTypeformUrl(email, firstName) {
var baseURL = "copy_paste_your_typeform_url_here";
var queryParams = 'email=' + encodeURIComponent(email) + '&first_name=' + encodeURIComponent(firstName);
return baseURL + '?' + queryParams;
}
</script>
You’ll need to copy and paste your Typeform URL in the code above on line 24.
Adding the Hidden Fields to typeform URL
With this event handled, we now need to make sure we are adding the hidden fields to the Typeform URL.
Go to your typeform and navigate to Logic from the left sidebar.
Now, click Personalize with your Data.
Next, click Hidden Fields to open up a pop up to enter the hidden fields.
Add the following fields:
email
first_name
By doing the above, your hidden fields will be added to the Typeform URL as query parameters.
The event handler we wrote above will take data passed from the Hubspot form and pass it to Typeform as hidden fields.
Integrating with Hubspot
With all the above done, the final bit remains: integrating the information with Hubspot.
Luckily, Typeform gives a built in Hubspot integration that just needs to be toggled on.
Go to the Connect tab in Typeform and find the Hubspot integration and turn it on if you haven’t done so already.
Once toggled, click the ellipsis icon and click 'Edit' to open the settings, then click 'Map to Contact properties' to map the questions.
If the Typeform questions do not naturally map to any default Hubspot fields, you’ll need to create custom properties on Hubspot.
The Hidden Fields will appear in the 'Map form elements' of the pop up to map your elements and questions.
Map the email hidden field to the HubSpot email property.
Since HubSpot uses email as the unique identifier for a contact, your Typeform response will be successfully synced to the right contact on HubSpot.
And that’s it! Let me know if this was helpful for you, or if you have any questions about this solution.