Examples of Advance HubSpot Form Method Part 2- onFormReady [Hacks]

Itzhak Wolkowicz -

In my last post describing Advance HubSpot Form Embedding, I gave a few example of "onFormSubmit" behaviors. Today I would like to share how to modify values of form input fields in both 'Raw HTML' forms and 'regular' HubSpot forms.

HubSpot documentation is a bit lacking in regards on how to make it work - just recently they have added the following paragraph regarding the requirement of usage of 'trigger('change')' in jQuery to make input field value modification work - and yet even this does not cover what one need to do if he wishes to change the value of the submit button.

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:

HubSpot onFormSubmit example - 'normal' forms

As HubSpot form validation refreshs the value of the submit button, it is nececeray, AFAIK, to hide the button and create a new one if you wish to change the text of the button. The rest of the input fields work just fine by using .prop/.attr and triggering a change as shown in HubSpot developer documentation.

HubSpot formatted forms (unlike 'raw html') are injected to the page inside an iframe, therefore their selectors differ a bit than the 'raw html' example coming next.

  
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

	<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js">
	<script>
		hbspt.forms.create({
			portalId: "469680",
			formId: "2f602927-8810-46be-8184-e766f7cdd04b",
			
			onFormReady: function($form) {
				var iframe = $('#hs-form-iframe-0');
				$('input[type=email]',iframe.contents()).attr('value', 'test2').trigger('change');
				
				$('input[type=submit]',iframe.contents()).hide()
				$('.actions',iframe.contents()).append($('<input type="submit" value="Custom Submit Name" class="hs-button primary large" data-reactid=".hbspt-forms-0.5.1.0"/>'));
			}
			
		});
	</script>

The Result

HubSpot onFormSubmit example - 'Raw HTML' forms

  
	<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

	<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js">
	<script>
		hbspt.forms.create({
			portalId: "469680",
			formId: "3318761a-4f13-421b-9b4f-1244206df4ed",
			
		onFormReady: function($form) {
				$('input[type=email]').attr('value', 'test2').trigger('change');

				$('input[type=submit]').hide()
				$('form').append($('<input type="submit" value="Custom Submit Name"/>'));
			}
			
		});
	</script>

The Result

 

I wish to thank Erez Shinan for pointing me into the right direction regarding the form behavior upon validation!