This 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 , JotForm Cards, didn’t look as 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 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.


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.


We decided to the design to achieve the following goals:

Continue reading %How to Automate a Design%

Source link
thanks you RSS link


Please enter your comment!
Please enter your name here