nicholas decker NickDeckerDevs

Sometimes, a customer might have data being loaded programmatically into a page and want that data to write to form fields. Because HubSpot Forms are generated programmatically with React, there need to be two considerations in your code that make setting fields programmatically more difficult:

The data must be inserted after the form has finished loading
Data that is inserted programmatically must have a js "change" event fired on the field in order to propagate the change into the React data layer

These two considerations are handled separately.

Inserting form data after form load

There are two methods to handle this - one including jQuery and one using vanilla javascript

	//Trigger on pages and customize as needed.
	<script>
	window.addEventListener('message', function(event) {
	if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
	dataLayer.push({'event':'hubspot-form-ready','hubspot-form-id':event.data.id});
	}

	//Form Submission #1
	if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
	dataLayer.push({'event':'hubspot-form-submission','hubspot-form-id':event.data.id});

	{% if contents.total_page_count > 1 %}
	<div class="blog-pagination">

	{% set page_list = [-2, -1, 0, 1, 2] %}
	{% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %}
	{% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %}
	{% elif current_page_num == 2 %}{% set offset = 1 %}
	{% elif current_page_num == 1 %}{% set offset = 2 %}
	{% else %}{% set offset = 0 %}{% endif %}

	<script type="application/ld+json">
	{
	"@context": "http://schema.org",
	"@type": "Organization",
	"@id": "#organization",
	"name": "Outlyer",
	"url": "https://www.outlyer.com/",
	"sameAs": [
	"https://github.com/outlyerapp",
	"https://twitter.com/outlyer",

	var trackOutboundLink = function(url, category) {
	ga('send', 'event', category, 'click', url, {
	'transport': 'beacon',
	'hitCallback': function() {
	document.location = url;
	}
	});
	}
	function addClickOnOutboundLink(link, category) {
	var href = link.attr('href');