Use the options below to customize a HubSpot form's embed code and edit a default HubSpot form. Before getting started, do take note of the following:

• These options are only available for forms created using the form editor in:
  • Marketing Hub Professional or Enterprise
  • CMS Hub Professional or Enterprise
• 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.

If you want to customize your form to add functionality not otherwise provided by HubSpot, use the methods documented in this article. If you require a more complex use-case and further customization over the styles and actions in your form, it is recommended to use the Forms API.

Learn how to generate an embed code on a form. For information on how to using the generated form, please see the developer documentation.

Please note: HubSpot forms should be loaded using the HubSpot-hosted JavaScript file. Making a copy of the form embed code and self-hosting it is not supported. Any improvements that HubSpot makes to improve security, anti-spam, accessibility, and performance will not propagate to your form if you decide to self-host the HubSpot form embed code.

If you're using jQuery to manipulate the values of form inputs (i.e. using val() or prop()), you must trigger a change event using change() or trigger('change') for the change to properly register.

Examples:
$('input[value="checkbox_1"]').prop('checked', true).change();
$('input[name="firstname"]').val('Brian').change(); 
    
If not using jQuery:
input.value = value;
input.dispatchEvent(new Event('input', { bubbles: true }));

For Checkboxes:
input.click()
    

Configuration options

Tag legend:

• R - (required) This attribute must be provided for the embed code to work properly.
• O - (optional) Optional form customization attribute intended for use by end-users.

Examples

Make labels/fields side-by-side instead of stacked

As the default CSS styling is 'stacked', i.e. labels atop inputs, removing the default classes on the form will result in an alignment of inputs to the right of their labels. To accomplish this, simply set your own custom cssClass that does not include the class 'stacked'. View the example in the right code pane.

Add internationalized error messages

HubSpot provides a number of custom validation messages in many different languages by default. View the example in the right code pane.

Customize internationalization

You can add custom languages or override the error messages and datepicker months/days displayed on the form by passing language objects into the translations parameter described above.

The embed code expects the format {locale: {messageKey: customMessage}}. You can override field labels by specifying the label as {locale: {fieldLabels: {fieldName: customLabel}}}, and the submit button text using {locale:{submitText: customSubmitText}} See the example in the right code pane.

To override existing messages, just pass in a language object with the desired locale found in the above table. For locales listed in the table above, you only need to provide the keys and messages you wish to override.

It's also possible to register new locale codes to use with the locale parameter. In this case, make sure to specify messages for all of the keys listed in the table below. Omitted keys will show a "missing translation" message in their place.