This article was created in partnership with JotForm. Thank you for supporting the partners who make SitePoint possible.
The Problem
It all started in October 2017, when we were searching for HackWeek project ideas.
Our team at JotForm noticed that our new form design, JotForm Cards, didn’t look as good as a standalone version when it was embedded in a user’s website. Uh oh.
Basically, the design of JotForm Cards wasn’t a great fit for the website in question. Although the form itself looked beautiful, using the design in a context that was so different to the standard use case was ruining it.
And as we continued embedding JotForm Cards into websites, we became aware that this situation was pretty common. Double uh oh.
We noticed things like forms being squeezed into columns...:
And feature colors that didn’t match the website:
And repeated titles with different typefaces.
These issues don’t seem huge at first glance, but because we only had our 7 day HackWeek to fix them, we were nervous, real nervous.
Structure
Before I dive into implementation, I’ll share some structural information about JotForm Cards.
The styling structure on the front-end uses SCSS (basically SASS with fancy syntax) as a preprocessor and PostCSS as post processor. The remaining front-end structure (markup, logics) is mostly based on React.
Side note: the CSS files of the forms are prepared and served by PHP, which is the main back-end language for this implementation.
Challenges
We decided to automate the design to achieve the following goals:
Continue reading %How to Automate a Design%