Hotjar and tracking Unbounce form submissions

B

I’ve added hotjar to our unbounce pages via GTM and the form fields track great, except for form submission.  We use confirmation popups and can’t get hotjar to fire on a submit. 

Hotjar suggests (http://docs.hotjar.com/v1.0/docs/using-javascript-to-handle-form-submissions) overriding the form’s submit function with javascript and adding functions to fire the formSubmitSuccessful and formSubmitFailed events, but I can’t see where I can do that?

Any ideas?  I’ve attached their code to the click event on the submit button, but that’s just a hack, since it will still fire on a form that hasn’t passed validation.

2 replies

BrianEricksonCO

Load this as its own script (besides the normal Hotjar script). I prefer to do this under Settings > Scripts. Make sure you choose which pages to apply the script to.

Best,
Brian

<script type="text/javascript">
lp.jQuery(function($) {
	function notifyHotjar() {
		lp.jQuery('.lp-pom-form form').submit();
		hj('formSubmit' + ($('.lp-pom-form form').valid() ? 'Successful' : 'Failed'));
	}

	$('.lp-pom-form .lp-pom-button')
		.unbind('click tap touchstart')
		.bind('click.formSubmit', notifyHotjar); 

	$('form')
		.unbind('keypress')
		.bind('keypress.formSubmit', function(e) {
			if(e.which === 13 && e.target.nodeName.toLowerCase() !== 'textarea' ) {
				notifyHotjar();
			}
		});
});
N

Hello Brian,

I am new to coding, could you please explain step by step where this code needs to installed. I have one landing page and a form. When the submit button for form is press a pop up confirmation box pops up on the same page. Thanks.

Reply


Terms & ConditionsCookie settings