HubSpot forms for developers

I am a software engineer. I don’t like to drag’n’drop stuff, to use a pre-generated code, anything that is not under my direct control. I am an old, average-angried backend developer (and CEO of my own startup, but this is another story)

Welcome, HubSpot Forms!
“It’s easy, just create a form in HubSpot and embed the generated code in our landing. 5 minute, copypaste, done”.

Expectation:

Result:

Oooky, easy. We need to add the placeholder and change the css class of the field, and we should remove the flag. As described in the HubSpot documentation, it seems that the right w̶o̶r̶k̶a̶r̶o̶u̶n̶d̶ approach is to use the onFormGenerated callback and editing the DOM with jQuery, an evergreen.

This is the snippet I used to customize the form

Ok, almost there. Some padding, some margins, but almost there.

Let’s try to fill it with an email. Let’s test it.

[7 minutes later] The validation! Of course, the validation. My email is invalid until I type the “.co”, and fore some obscure reason, the hubspot validator remove all the classes from the field and add a custom class. Ok, there is a w̶o̶r̶k̶a̶r̶o̶u̶n̶d̶ approach described in the docs. I can use the errorClass attribute.

I am a certified Cloud Solution Architect. I’ve spent the last 15 years of my careers designing and writing code for the backend. I really admire frontend developers.
Clearly, all the classes are removed while the validation run. This lag create the resizing animation effect (I have an “it’s not a bug, it is a feature” mindset).

The input has a base class hs-input which is never removed. But it is not possible to specify a custom class. After 25 minutes, I realized that what I was missing was just the width. I ended up with this code

I am Tommaso Doninelli, CEO and Founder of Hakuna Cloud. We help CTO and companies to lower the cloud computing bill by providing them a SaaS product to dynamically start and stop unused cloud servers.