How to Style HubSpot Lead Capture Forms with Bootstrap 4

Bootstrap is the leading responsive framework for developing mobile-first websites. It’s a free and open-source toolkit that comes with a responsive grid system, global CSS settings, extensive pre-built components, and optional JavaScript plugins that speed up the website design and development process.

HubSpot offers a way to embed lead capture forms on your website where the entered information is stored and tracked in HubSpot.  The forms can come pre-designed and offer several nifty customizations you can do from a WYSIWYG editor.  However, the generated form will never look EXACTLY like other forms on your Bootstrap-based website.  So, here’s the CSS you can use to turn that super-cool, but hideous-looking HubSpot form into a mobile-first, responsive, killer-looking, and consistently-designed form for your website lead generation delight.

Create a Naked HubSpot Form

1. In your HubSpot account, navigate to Marketing > Lead Capture > Forms.
2. Select your form.
3. In the form editor, click the Options tab.
4. Click to toggle the “Unstyled” form switch on. The form will render as a raw HTML element on your external page as opposed to inside an iframe, and any default HubSpot styling applied to the form will be removed.

Customize this (Bootstrap v4) CSS

An unstyled HubSpot lead capture form is pretty ugly.  Might look something like this.

Let’s copy the appropriate Bootstrap CSS and change the classes to work with HubSpot’s.  That can be kind of a pain, so here’s a Gist to get you started.

[gist id=”33fb1b57caa01dc966108ff6a8e4ca36″]

That’ll make that same form look more like this.

Or, Use SASS

Bootstrap comes with Sass mix-ins, so we could do pretty much the same thing extending those with a scss file, like so.

[gist id=”59b1fcbf1c318185642fb0ea03916946″]

Special thinks to Felix Häusler for his Medium post on the topic.