Manipulating forms with jQuery

In order to use jQuery to manipulate the values of form inputs using .val() or .prop(), you must trigger a change event using change() or trigger('change') for the change to properly register.

Since HubSpot forms are rendered after the DOM builds, you must either trigger the manipulation after the window loads, or modify the embed to use the onFormReady parameter.


Update fields when page finishes loading:

$(window).load(function(){
    $('input[value="checkbox_1"]').prop('checked', true).change();
    $('input[name="firstname"]').val('Brian').change();     
    });

Modified embed code to update fields when form builds:

    hbspt.forms.create({ 
    portalId: 'XXXXXX',
    formId: 'aa8b5b4a-62ac-461b-a387-XXXXXXXXXXX',
    onFormReady($form, ctx){
   		$('input[value="checkbox_1"]').prop('checked', true).change();
    	$('input[name="firstname"]').val('Brian').change();   
   	}
  });