Client-First — Version 2.1

HubSpot Form Guide

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
input
hs-form-field
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
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.

Field Description / Help text

hs-field-desc
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Field error message

hs-error-msgs inputs-list
hs-error-msg
  • Error message label
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
hs-error-msg

is a text span inside HTML List Item element.

hs-error-msgs inputs-list

is an HTML list element.

Field error message

hs-input hs-fieldtype-textarea
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
hs-input hs-fieldtype-textarea

is added as combo class.

Checkboxes

hs-form-booleancheckbox
hs-form-booleancheckbox-display
inputs-list
hs-input
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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.

hs-form-checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Success message

submitted-message
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

RecaptCHA

hs-recaptcha
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Submit button

hs_submit
hs-button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.