Making your forms look amazing with JetSloth’s Image Choices
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.
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.
Live Demo
Gravity Forms with Image Choices
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.
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).
CSS example
The below CSS was used in the above example. Apply the CSS to your theme or Image choices CSS setting screen.
Make sure you set your image choices theme style to none in the form or field setting first, and add the class name ic-theme--shoe to the field itself in the appearance field tab.
/* Style overides - edit these - make sure to set the image field theme to "none" and add the ic-theme-shoe class to the field also*/
.ic-theme--shoe {
--ic-width: 300px;
--ic-height: 400px;
--ic-image-background-color: none!important;
--ic-text-color: white!important;
--ic-text-weight:bold!important;
--ic-border-radius: 15px;
}
.ic-theme--shoe .image-choices-choice .gform-field-label {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 100%;
position: relative;
}
.ic-theme--shoe:not([class*=ic-cols--]) .image-choices-choice .gform-field-label {
width: var(--ic-width);
max-width: 100%;
}
.ic-theme--shoe .image-choices-choice-image-wrap,
.ic-theme--shoe .image-choices-choice-image-wrap:before {
display: block;
width: 100%;
height: var(--ic-height);
border-radius: var(--ic-border-radius);
}
.ic-theme--shoe .image-choices-choice-image-wrap {
position: relative;
z-index: 1;
margin-bottom: var(--ic-padding);
}
.ic-theme--shoe .image-choices-choice-image-wrap img {
position: relative;
z-index: 0;
}
/* Make white border smaller */
.ic-theme--shoe .image-choices-choice label:before {
content: "";
border-radius: var(--ic-border-radius);
position: absolute;
top: 50%;
left: 50%;
width: 70%;
height: 70%;
transform: translate(-50%,-50%);
pointer-events: none;
-webkit-box-shadow: inset 0 0 0 0 var(--ic-feature-color);
box-shadow: inset 0 0 0 0 var(--ic-feature-color);
will-change: box-shadow;
-webkit-transition: -webkit-box-shadow var(--ic-transition-duration) var(--ic-transition-easing);
transition: -webkit-box-shadow var(--ic-transition-duration) var(--ic-transition-easing);
transition: box-shadow var(--ic-transition-duration) var(--ic-transition-easing);
transition: box-shadow var(--ic-transition-duration) var(--ic-transition-easing), -webkit-box-shadow var(--ic-transition-duration) var(--ic-transition-easing);
z-index: 1;
}
/* White border on selected */
.ic-theme--shoe .image-choices-choice-selected label:before {
-webkit-box-shadow: inset 0 0 0 6px var(--ic-feature-color);
box-shadow: inset 0 0 0 6px var(--ic-feature-color);
}
@media only screen and (min-width: 480px) and (max-width: 1079px) {
.ic-theme--shoe:not([class*=ic-cols-md--]) .image-choices-choice .gform-field-label {
width: var(--ic-width-medium);
}
.ic-theme--shoe[class*=ic-cols-md--] .image-choices-choice .gform-field-label {
width: 100%;
}
}
@media only screen and (max-width: 479px) {
.ic-theme--shoe:not([class*=ic-cols-sm--]) .image-choices-choice .gform-field-label {
width: var(--ic-width-small);
}
.ic-theme--shoe[class*=ic-cols-sm--] .image-choices-choice .gform-field-label {
width: 100%;
}
}In Summary
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.
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.
