Examples of Advance HubSpot Form Method [Hacks]

When users wish to embed a HubSpot form on a website they will most likely use the HubSpot embed code provided by the HubSpot Form editor. This is of course not the only way to integrate HubSpot forms with your website - but it is a very easy and common one.

The embed code provided by HubSpot covers a very basic use-case (an embeddable HubSpot form, with no unique post-submission behavior, and with settings defined in HubSpot Graphical User Interface).

If you do have advance use-cases AND you wish to solve them via embedded forms - you will need to Customize the embed code. What you might be unaware of is that the possibilities of HubSpot Embed code are broader than what HubSpot describes in their documentation.

HubSpot describes the following requirements for Customizing the form embed code:

These options are only available for forms created using the marketing form builder in Marketing Hub and CMS Hub Professional or Enterprise subscriptions.

These options can only be used with forms that have been set as raw HTML.

Other forms, such as collected forms or lead flows, do not support these customization options.

In reality - the 2nd requirement is only a suggestion - You can, if you wish, control the behavior of HubSpot forms that are not set as Raw HTML. It will require extra effort, but it is possible.

Here are a few examples of advanced form behavior, using the embedded code and it's built-in "onFormSubmit" function, working with 'plain vanilla' forms.
Please note that I'm not a developer - The examples below are served mostly as a way to 'open' your appetite for more advance use cases with HubSpot forms, and to show that you are not limited to forms that were set to Raw HTML:

Full Name splitting to First Name and Last Name

This demo uses a full name custom property, and two hidden properties for First Name and Last Name:

hbspt.forms.create({
	portalId: "469680",
	formId: "37693102-07d5-4508-ade5-853645094612",
	onFormSubmit: function($form) {
		
		var formObj = $form;							
		var fullName = formObj[0][0];
		var firstName = formObj[0][1];
		var lastName = formObj[0][2];
		
		
		splitName = fullName.value.split(' ');
		firstName.value = splitName[0];
		lastName.value = splitName[splitName.length - 1];
		if (firstName.value == lastName.value) {
			lastName.value = '[Missing]'; 
		};
		
		console.log('first name:' + firstName + ' last name:' + lastName);
	}		
});

Trying to modify the values of the fields directly using jQuery as in the examples given by HubSpot will probably not work for you (without using Raw HTML option, which embed the form a bit differently) - but the form is there - therefore it can be manipulated by JavaScript.

Do note that the above example uses a basic method of Full Name splitting - by considering anything after the first 'space' character be a part of the last name. The exact split method of course can be modified to whatever rule-set needed. Alternatively you can send a request to an API that handles the splitting in a way that will work better with middle-names, nicknames etc.

But wait Itzhak, why not use a Webhook/Zapier/etc? I heard you are a fan!

If you split the full name prior to pushing it to HubSpot, any processes that might use the first name / last name fields (be it notifications, processes in external CRM such as SFDC etc.) will be done correctly, and will not require unnecessary delay intervals. If you the above is too complex for you, you might want to consider the automation route anyway.

Redirecting after a Form Submission, but Based on the submitted data in the form

Note: HubSpot recently added the ability to control redirection based on form values via the UI as a beta feature for enterprise users [February 2024]

This one has many practical uses such as Resource Centers that redirect user to an asset based on questions the user answered in a form, or for landing pages that allow a user to register to a webinar that is being conducted several times for different time-zones, etc.

The below example will redirect you to Yahoo or Google based on your form choice (don't forget to hit the back button after you test it out :) )

hbspt.forms.create({
		portalId: "469680",
		formId: "22be3fc0-1910-4958-bada-76ba1cc0a7e4",
		onFormSubmit: function($form) {
			 var formData = $form.serialize();
			 console.log(formData);
			 var fieldName = "iliketest";
			 var fieldPosition = formData.search(fieldName);

			 if(formData[fieldPosition + fieldName.length+1] === 'G'){
				window.top.location.href = "https://google.com";
			 }
			 else{
				window.top.location.href = "https://yahoo.com";
			 }
		}		
});