Gone are the days of dull, boring and static looking forms. One of JetSloth’s missions is to make forms great again.
Good looking, easy to use forms should be a delight to use and complete. That’s why we’ve developed add-on plugins to help you clean up your Gravity Forms. Let’s look at how far you can take JetSloth’s Image Choices addon for Gravity Forms, with a little design skill, and some heavy custom CSS, the results speak for themselves.
The Idea
We wanted to showcase the power and ease of use of our Image Choices Gravity Forms add-on. So we set out to see what kind of results we could achieve if we pushed the boundaries of design and custom CSS.
Starting out we looked at some references on Dribbble to get some visual style ideas and how we could present some product form options. We wanted a strong, colourful and impactful design to help showcase what Image Choices could do.
We jumped into Sketch App and starting developing a design that did just that, see design concept below. The example would showcase 2 product buying options that could be used in a retail store environment online. A scenario we see a lot of, where Gravity Forms and Image Choices being used.
Design concept
The overall effect should have movement and interaction with all hover and select states of each radio option. We’d custom style and create the layout using custom CSS and the Image Choices custom CSS input setting.
On hover and radio select we’ll scale the images and elements and have a unique styling for the selected state to make it easier to use.
Standard Gravity Forms Styling
The stand styling which most people would use straight out of the box when using Gravity Forms would look something like below. This shows a huge contrast to how far we’re pushing this idea and concept from the out of the box solution.
Standard styling
Gravity Forms with Image Choices – Live Demo
With some heavy custom CSS added to the Image Choices setting page, we added our custom styling and CSS animations. The results are simply awesome! And the best thing is it’s all powered with Gravity Forms, so all your entries are stored as any normal Gravity Form would do. Have a play with the demo below.
Live demo
The animations are smooth, the custom CSS looks amazing, and it looks and works so great, it doesn’t even feel or look like a Gravity Forms form, or a form at all really! Goes to show how much difference you can achieve with a little design skill, and CSS know how (and of course Image choices addon).
Final must read notes
A quick final couple disclaimer notes worth mentioning. Now whilst the results of this demo look and work great, there’s a bit of work that went into it. Our Designer Blaz Robar is a full-time interface designer so knows a few things about making things look great online.
When it comes to custom CSS for the demo, you’d want to be fairly efficient and confident with CSS or suggest getting your developer to help out with this. You’d want to know your way around CSS to get the best results possible. We deliberately wanted to test ourselves and Image Choices to see what could be achieved.
At some point, we’ll release the custom CSS used in this demo into our Image Choices support docs so you can have a play yourself. But be aware this demo is very specific to the design so may not be applicable to everyone.
Again with the custom CSS used here, we’ve not made it responsive, but something we’ll look at doing to show how it could work on mobile. So for best viewing experience, view the demo on a tablet or desktop device.
