Sprinkling some Wow on Your Hubspot Forms

Hubspot is a Third Party Form Provider that makes it super easy to add forms to your Webflow site.

But... there's a problem.

They're ugly. They're clunky. And other forms think they smell.

‍

They have one incredible feature though - they give your client a lot of control. Whatever they want to ask their users, they can - and that's powerful.

... But only if they weren't so ugly...

... and smelly...

Well, here at Stormfors we've figured out how to spruce up those boxy monstrosities, so you can style them to match your website's design system and still give your clients control of form creation.

‍

Hubspot, Let's Make You Beautiful

‍

Now, like we've already mentioned, the code snippets you get from Hubspot result in forms that are pretty damn ugly… Just like your friend’s newborn baby. (Go on, we dare you to tell them).

They’re not going to fit your design system and even if they’re styled using Hubspot's Native Form Builder, they’ll still look out of place on your website and will make it feel cheap, or worse yet - untrustworthy.

Now here at Stormfors, we don’t like cheap and we don’t like untrustworthy.

Look at this form, for example. This is an out-of-the-box solution, without any wow sprinkled on. See what we mean?

‍

‍

Now, take a look below at this form we did for our client, KSMG. See how it blends perfectly with the rest of the UI? Do you smell any cheap? Detect any untrustworthy? Of course you don’t. In fact, you want to fill that beautiful little form out and you have no idea why. That’s the power of great design. 

‍

‍

You give total form control to your client, while sacrificing none of your original design vision and trust. Better yet, when a client wants to add a new form it doesn’t necessitate a meeting or any of your developer’s time.

‍

‍They just create one on their side and it appears on their site like magic.

Well, there’s a few little technicalities to that magic, so let’s get into them…

‍

The Webflow CMS + Hubspot = Good Times

‍

Let’s get a bit technical.

Here at Stormfors we utilize the power of the Webflow CMS and give our clients an easy way to inject whatever form they create right into the site, appearing as a beautifully styled form, as per the website’s design.

We create a Rich Text Field in the CMS, which enables our clients to utilize code blocks and paste in whatever snippet they get given by Hubspot. We add a bunch of Descriptive Text under that field too, because we’re nice like that.

Now, here's an important caveat.

You have to tell your client (or do it yourself, if you have access to their Hubspot) to turn on the “Set as raw HTML form” switch in their form settings.

‍

‍

If you don’t, what happens is that the Hubspot snippet calls in an iFrame, which is much harder to style.

Not impossible, just harder.

How do we know this? Well, we didn’t realize this switch existed at first 🤦, and so developed a Sneaky Ninja Javascript Technique to essentially break into the iFrame and style it. Cool? Yes. Necessary? No.

So anyway, let’s get back on track. Now that you’ve turned this switch on your Hubspot Form will be generated by the Hubspot Library on the page.

In order to style it, however - you’ll need to use some custom CSS and some possible DOM traversal to style it according to your site’s Style Guide.

Last thing: Make sure you cover all possible inputs!

And there you have it. Beautiful, on-design forms that are controlled by your client.

---

‍

We hope you enjoyed this post. If you’re a developer and wish to learn the Sneaky Ninja Javascript Technique, meet us under the Stone Warrior Bridge at midnight on the 3rd Full Moon of the year and if we deem you worthy, we shall bless you with The Knowledge.

And if you’re interested in working with a world-class team in order to turn your dream into a fully developed reality, get in touch. We’d love to chat with you and hear your vision.

Team Stormfors

‍