Global form events are a set of event callbacks that you can use to extend form functionality and define custom behavior in response to form events triggered by users on your site.
Please note: the functionality described in this article only pertains to forms created through the updated forms editor in HubSpot’s UI. If you need to work with global form events for a legacy form, check out this article instead.

​
Form events

Throughout their lifecycle, HubSpot forms will emit various events based form readiness and user interactions. These events are defined in the table below. You can define listeners for each event by using the window.addEventListener(EVENT_NAME) function.
Event nameDescription
hs-form-event:on-readyThe form has finished loading and has been fully rendered.
hs-form-event:on-submission:successThe form has been submitted successfully.
hs-form-event:on-submission:failedThe form submission failed.
hs-form-event:on-interaction:navigateOn a multi-step form, the user has navigated to either the previous step or next step in the form.
hs-form-event:on-interaction:navigate:nextOn a multi-step form, in addition to the generic hs-form-event:on-interaction:navigate event, this event is also fired to indicate the user navigated to the next step in the form.
hs-form-event:on-interaction:navigate:previousOn a multi-step form, in addition to the generic hs-form-event:on-interaction:navigate event, this event is also fired to indicate the user navigated to the previous step in the form.
For example, the code snippet below defines an event listener that listens for a successful form submission: 
window.addEventListener('hs-form-event:on-submission:success', (event) => {
  console.log('User successfully submitted the form!');
});

​
Event object

All global form events are emitted with an event object that’s passed to the event handler. This event object includes two nested IDs, the formId and the instanceId, within the details field, which allows you to reference the ID of the form and the specific instance of that form on your page. 
window.addEventListener('hs-form-event:on-ready', (event) => {
  const { formId, instanceId } = event.detail;
  console.log(formId);
});
The event object can also be passed as an argument to the getFormFromEvent method accessible from the HubSpotFormsV4 object, which is available on any page where your form is present. This method returns a form instance that can be used to retrieve or populate data in the from. 
window.addEventListener('hs-form-event:on-submission:success', (event) => {
  const form = HubSpotFormsV4.getFormFromEvent(event);
  const conversionId = form.getConversionId();
  console.log(conversionId);
});
Please note: you should define any hs-form-event:on-ready listeners on your page before the form embed code is executed. This will ensure that your listeners are set up to listen for the event before it’s emitted and avoid race conditions.

​
Getting form instances

HubSpot provides instance API methods within the window.HubSpotFormsV4 object. The available methods are detailed in the sections below.

​
getForms

To retrieve all form instances on a page, call the getForms method. The method will return an array of form instances. 
HubSpotFormsV4.getForms();

​
getFormFromEvent

To get a specific form instance using an emitted form event, call the getFormFromEvent method, using the emitted event object as an argument. The method will return a specific form instance object. 
HubSpotFormsV4.getFormFromEvent(event);
Please note: the form instance object includes several fields intended for internal use only, such as __SECRET_INTERNAL_DO_NOT_USE. Avoid usage of these fields as they are unstable, and are not designed for public usage. Usage of these fields could break your integration.

​
Form instance methods

Form instance methods are useful for retrieving and passing data to and from your form. Although these methods can be called at any point in the form’s lifecycle, some form data fields can only be retrieved or set before the form is submitted, while others can only be accessed after form submission.

​
getFormId

Use the getFormId method to retrieve the ID of your form. The method will return the ID as a string. 
HubSpotFormsV4.getForms()[0].getFormId();
HubSpotFormsV4.getFormFromEvent(event).getFormId();

​
getInstanceId

Use the getInstanceId method to retrieve the ID of the form instance. The method will return the ID as a string. 
HubSpotFormsV4.getForms()[0].getFormId();
HubSpotFormsV4.getFormFromEvent(event).getInstanceId();

​
getFieldValue

Use the async getFieldValue method to retrieve the value of a field in your form. The method accepts the field’s name as a string argument, and returns either a string value or an array of string values for multi-checkbox fields. You can also use this method to retrieve the value of a conditionally hidden field. 
HubSpotFormsV4.getForms()[0]
  .getFieldValue('0-1/firstname')
  .then((value) => value);
await HubSpotFormsV4.getFormFromEvent(event).getFieldValue('0-1/firstname');
The method will return data that resembles the following: 
// "John"

​
getFormFieldValues

Use the async getFormFieldValues method to retrieve the values of all the fields in your form. This method returns an array of key-value pair objects that contain the field name as a string and the value as either a string or an array of strings for multi-checkbox fields. You can also use this method to retrieve the value of a conditionally hidden field. 
HubSpotFormsV4.getForms()[0]
  .getFormFieldValues()
  .then((values) => values);
await HubSpotFormsV4.getFormFromEvent(event).getFormFieldValues();
The method will return data that resembles the following: 
[
  {
    "name": "0-1/firstname",
    "value": "Hubspot"
  },
  {
    "name": "0-1/multicheckbox",
    "value": ["yes", "no"]
  }
]
Please note: the value of a file field will not be returned if you attempt to get the value using either the getFieldValue or getFormFieldValues methods.

​
getConversionId

Use the getConversionId method to retrieve the ID of a form conversion. The method will return a valid string value when called after the form is successfully submitted. 
HubSpotFormsV4.getForms()[0].getConversionId();
HubSpotFormsV4.getFormFromEvent(event).getConversionId();

​
getRedirectUrl

For forms set up to redirect to a specific URL after submission, you can use the getRedirectUrl method to retrieve the redirect URL. This method returns the URL as a string after successful form submission. 
HubSpotFormsV4.getForms()[0].getRedirectUrl();
HubSpotFormsV4.getFormFromEvent(event).getRedirectUrl();

​
setExtraSubmissionMetadata

Use the setExtraSubmissionMetadata method to pass additional metadata to the form submission. The method accepts an object with a set of key-value pairs, which will be sent as part of the form submission. 
HubSpotFormsV4.getForms()[0].setExtraSubmissionMetadata({ pageId: 'page-123' });
HubSpotFormsV4.getFormFromEvent(event).setExtraSubmissionMetadata({
  pageId: 'page-123',
});

​
setFieldValue

You can use the setFieldValue method to programmatically update the value of a field on the form. Provide the field’s name as the first string argument, then the field’s value as the second argument. 
HubSpotFormsV4.getForms()[0].setFieldValue('0-1/firstname', 'John');
HubSpotFormsV4.getFormFromEvent(event).setFieldValue('0-1/firstname', 'John');
Please note: setting the value of a file field is not supported.
The table below provides a list of supported field types and data types accepted for their values:
Field typeData type
Single-line textstring
Numberstring, number
Single checkboxboolean
Multiple checkboxesstring[]
Dropdownstring
Phone numberstring, number
Datestring, number (provided as a UNIX timestamp in milliseconds)
Multi-line textstring
Radiostring
Hiddenstring[]