Load or Show Form Based on Media Query


#1

We using HubSpot forms on our external site. We’d like to be able to show a long form on our external page for desktop and tablet devices, and a shorter version of the form on mobile devices. I already created a mobile version of the form in HubSpot, eliminating any unnecessary fields. My question is, what’s the best way to create the form based on a media query?

I added the following js to the end of the html page and neither form loaded. My knowledge in js is very limited and I put this snippet of code together based on google search results.

<!--[if lte IE 8]>
	<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js">
	$(document).ready(function () {
		if (window.matchMedia("screen and (min-width: 767px)").matches) {
			/* the view port is at least 767 pixels wide */
			 hbspt.forms.create({ 
				css: '',
				portalId: 'xxxxxxx',
				formId: '7694f3a4-8cb3-4105-a3e3-ab0cb8e86bb5',
				submitButtonClass: 'cta-common cta-ghost-dark'
			  });
		} else {
			/* the view port is less than 767 pixels wide */
			hbspt.forms.create({ 
				css: '',
				portalId: 'xxxxxxx',
				formId: '43a1ee7b-2f04-4162-be00-1819181444d6',
				submitButtonClass: 'cta-common cta-ghost-dark'
			});
		}
	});
</script>

Is this the best way to go about this? If not, any other suggestions?