Hubspot Form Elements in Webflow

This page represents HTML structure of some of the HubSpot form elements, use the power of Webflow designer to define CSS styles for a raw HubSpot form embed.

Some Form Elements

hs-form

form-columns-1

form-columns-2

hs-form is main form class.

form-columns-1 is class of wrapper with 1 column for inputs.

form-columns-2 is class of wrapper with 2 columns for inputs.

input and label

hs-input

Form label

Field Description / Help text

hs-field-desc

Form label

This is help text for the field

Field error message

hs-error-msgs inputs-list

hs-error-msg

Form label

Error message label

hs-error-msgs inputs-list is an HTML list element.

hs-error-msg is a text span inside HTML List Item element.

Text area Input

hs-input hs-fieldtype-textarea

Form label

hs-fieldtype-textarea is added as combo class.

Checkboxes

hs-form-booleancheckbox

hs-form-booleancheckbox-display

inputs-list

hs-input

Nature
Politics
Technology

Note: HubSpot uses basic HTML checkboxes, Webflow checkboxes work differently than the default HTML checkboxes, hence in order to style HubSpot checkboxes you need custom CSS.

Checkbox 3

you can use Webflow checkbox to style and then copy CSS from it.

Radio Buttons

inputs-list

hs-form-radio

hs-form-radio-display

inputs-list

hs-input

Success message

submitted-message

This is form success message

RecaptCHA

hs-recaptcha

Submit button

hs_submit

hs-button

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.