Forms reference - HubSpot docs

HubSpot forms allow you to capture information from website visitors, which you can then access throughout HubSpot. You can share links to forms directly with users, submit form data via the API, and embed them on your website pages using the CMS. Below, find reference documentation for forms, including form embed configuration options, internationalization and validation error messages, and form events.

Please note:

This article covers additional functionality you can use for new forms created through the updated forms editor. If you need to consult the corresponding functionality for legacy forms, check out this article instead.
If you require a more complex use-case for your form, like sending custom form submission data to HubSpot, you should review the v3 forms REST API documentation.

Global form events

Global form events allow you to extend the functionality of your form and define custom behavior for specific events triggered by your form (e.g., display a custom success message when a user submits a form). Learn more about the available global form events in the reference documentation.

Define custom styling for embedded forms using CSS

You can define CSS variables to override the default styling for your embedded forms. This allows you to apply granular styling to specific elements of your forms, as well as define global styling rules to maintain consistency across all embedded forms.

:root {
  --hsf-global__font-family: 'impact';
  --hsf-global__font-size: 18px;
  --hsf-global__color: #fff;
  --hsf-background__background-color: #000;
}

The CSS variables you can override are listed in the tables below. The global styles will override top-level styling across all your embedded forms. You can also target individual elements of your forms such as a form element row, submit buttons, or form headings.

Global

Variable	Description
`--hsf-global__font-family`	Sets the font family for all elements
`--hsf-global__font-size`	Sets the font size for all elements
`--hsf-global__color`	Sets the default text color for all elements
`--hsf-global-error__color`	Sets the color for errors

Row

Variable	Description
`--hsf-row__horizontal-spacing`	Sets the horizontal spacing between rows
`--hsf-row__vertical-spacing`	Sets the vertical spacing between rows
`--hsf-module__vertical-spacing`	Sets the vertical spacing between modules

Button

Variable	Description
`--hsf-button__font-family`	Sets font family of all buttons
`--hsf-button__font-size`	Sets font size of all buttons
`--hsf-button__color`	Sets text color of all buttons
`--hsf-button__background-color`	Set background color of all buttons
`--hsf-button__background-image`	Set background image of all buttons
`--hsf-button__border-radius`	Sets border radius of all buttons
`--hsf-button__padding`	Sets the padding of all buttons
`--hsf-button__box-shadow`	Sets the box shadow of all buttons

Rich Text

Variable	Description
`--hsf-richtext__font-family`	Sets the font family for rich text elements
`--hsf-richtext__font-size`	Sets the font size for rich text elements
`--hsf-richtext__color`	Sets the text color for text elements

Heading

Variable	Description
`--hsf-heading__font-family`	Sets the font family for the form’s headings
`--hsf-heading__color`	Sets the text color for form’s headings
`--hsf-heading__text-shadow`	Sets the text shadow for form’s headings

Background

Variable	Description
`--hsf-background__background-color`	Sets the background color of the form
`--hsf-background__background-image`	Set the background image of the form
`--hsf-background__background-size`	Set the background size
`--hsf-background__background-position`	Set the background position
`--hsf-background__background-repeat`	Set the background repeat behavior
`--hsf-background__border-style`	Sets the border style of the form
`--hsf-background__border-color`	Sets the border color of the form
`--hsf-background__border-radius`	Sets the border radius of the form
`--hsf-background__border-width`	Sets the border width of the form
`--hsf-background__padding`	Sets the padding of the form

Progress Bar

Variable	Description
`--hsf-progressbar-text__font-family`	Sets the font family for the progress bar text
`--hsf-progressbar-text__font-size`	Sets the font size for the progress bar text
`--hsf-progressbar-text__color`	Sets the color for the progress bar text
`--hsf-progressbar-progressLine__background-color`	Sets the background color of the progress line
`--hsf-progressbar-progressLine__background-image`	Sets the background image of the progress line
`--hsf-progressbar-progressLine__border-color`	Sets the border color of the progress line
`--hsf-progressbar-progressLine__border-style`	Sets the border style of the progress line
`--hsf-progressbar-progressLine__border-width`	Sets the border width of the progress line
`--hsf-progressbar-trackLine__background-color`	Sets the background color of the track line

Error Alert

Variable	Description
`--hsf-erroralert__font-family`	Sets the font family for error alerts
`--hsf-erroralert__font-size`	Sets the font size for error alerts
`--hsf-erroralert__color`	Sets the text color for error alerts

Info Alert

Variable	Description
`--hsf-infoalert__font-family`	Sets the font family for info alerts
`--hsf-infoalert__font-size`	Sets the font size for info alerts
`--hsf-infoalert__color`	Sets the text color for info alerts

Field Input

Variable	Description
`--hsf-field-label__font-family`	Sets the font family of the field label
`--hsf-field-label__font-size`	Sets the font size of the field label
`--hsf-field-label__color`	Sets the text color of the field label
`--hsf-field-label-requiredindicator__color`	Sets the color of the required indicator for the field label
`--hsf-field-description__font-family`	Sets the font family of the field description
`--hsf-field-description__color`	Sets the text color of the field description
`--hsf-field-footer__font-family`	Sets the font family of the field footer
`--hsf-field-footer__color`	Sets the text color of the field footer
`--hsf-field-input__font-family`	Sets the font family of the field input
`--hsf-field-input__color`	Sets the text color of the field input
`--hsf-field-input__background-color`	Sets the background color of the field input
`--hsf-field-input__placeholder-color`	Sets the placeholder color of the field input
`--hsf-field-input__border-color`	Sets the border color of the field input
`--hsf-field-input__border-width`	Sets the border width of the field input
`--hsf-field-input__border-style`	Sets the border style of the field input
`--hsf-field-input__border-radius`	Sets the border radius of the field input
`--hsf-field-input__padding`	Sets the padding of the field input

Field Textarea

Variable	Description
`--hsf-field-textarea__font-family`	Sets the font family for the textarea
`--hsf-field-textarea__color`	Sets the text color for the textarea
`--hsf-field-textarea__background-color`	Sets the background color for the textarea
`--hsf-field-textarea__placeholder-color`	Sets the color for the placeholder text in the textarea
`--hsf-field-textarea__border-color`	Sets the border color for the textarea
`--hsf-field-textarea__border-width`	Sets the border width for the textarea
`--hsf-field-textarea__border-style`	Sets the border style for the textarea
`--hsf-field-textarea__border-radius`	Sets the border-radius for the textarea
`--hsf-field-textarea__padding`	Sets the padding for the textarea

Field Checkbox

Variable	Description
`--hsf-field-checkbox__padding`	Sets the padding within form checkboxes
`--hsf-field-checkbox__background-color`	Sets the background color of the checkboxes
`--hsf-field-checkbox__color`	Sets the text color of the checkboxes
`--hsf-field-checkbox__border-color`	Sets the color of the checkbox’s border
`--hsf-field-checkbox__border-width`	Sets the width of the checkbox’s border
`--hsf-field-checkbox__border-style`	Sets the style of the checkbox’s border

Field Radio

Variable	Description
`--hsf-field-radio__padding`	Sets the padding for radio button
`--hsf-field-radio__background-color`	Sets the background color for radio button
`--hsf-field-radio__color`	Sets the text color of radio button
`--hsf-field-radio__border-color`	Sets the border color for radio button
`--hsf-field-radio__border-width`	Sets the border width for radio button
`--hsf-field-radio__border-style`	Sets the border style for radio button

​Global form events

​Define custom styling for embedded forms using CSS

​Global

​Row

​Button

​Rich Text

​Heading

​Background

​Progress Bar

​Error Alert

​Info Alert

​Field Input

​Field Textarea

​Field Checkbox

​Field Radio