Fluidic Groath Agency

Form Designer

Welcome to the form designer that HubSpot should have created! This was developed as a weekend side project to scratch our own itch, but we decided to release it to the world so that everyone can benefit.

Use the tool to save yourself hours of work. Simply and easily style your HubSpot form to match your website — without the complexity of learning css or hiring a developer!

Set your styles using the panel on the left and watch them change the appearence of default HubSpot form on the right in real time.

  • When you are finished hit the button and we'll email your HubSpot form css code. Then, add it to your website and watch the magic happen :-)
  • Bookmark this page and if you leave and come back in the future your current settings will be remembered (providing you don't clear your browsers cache).
  • FYI, margins and padding accept 4 quantities corresponding to the top, right, bottom and left sides of the element (in clockwise order).
How does it work?
01. Form
02. Form Input
03. Placeholder Text
04. Labels
05. Checkbox/Radio Buttons
06. Datepicker
07. Help Text
08. Errors
Error Colour Font Size
Font Style Font Weight
Error Messages Margin
09. Recaptcha
Recaptcha Margin
10. GDPR
11. Buttons
11. Submitted Message
Reset Form Values  


Make sure you wrap your form embed code in an element with id="hbspt-form" in order for the css code to apply properly!