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: class of wrapper with 1 column for inputs.
  • form-columns-2: class of wrapper with 2 columns for inputs.

input and label

  • hs-input
  • Form label
  • Field Description / Help text:
    • hs-field-desc: This is help text for the field
  • Field error message:
    • hs-error-msgs inputs-list
    • hs-error-msg: Error message label

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
    • Yes
    • No

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.

Live Example

Webflow Form

  • First name
  • Email

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

HubSpot form

Please insert your own HubSpot code inside the embed :)

  • Your first name*
  • Your last name*
  • Your title
  • Your company
  • Your work email*
  • Nominee's name*
  • Nominee's title*
  • Nominee's company*
  • Nominee's work email*
  • Briefly describe why you're nominating this person for a FLOW Award:*

Success!

Thank you! We have received your submission.