Here at JetSloth, we’re always trying to push the boundaries of design and code. With previous demos, we’ve tried to show you all how great Gravity Forms is with our Image Choices add-on. We wanted to design and prepare another great example of these two plugins, but this time push it a little further.
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. Let’s make forms great again.
In this tutorial showcase we show you how to build a product configurator with Gravity Forms and Image Choices
Just a heads up. The below guides and examples are intended for users with a little bit of CSS and jQuery knowledge. You don’t have to be an expert, but the more confident you are with these, the better results you’ll get.
The idea
We’ve been toying with the idea of using Gravity Forms to power a product configurator for simple product orders, for a while now. This is the first step in our prototypes to see how we could use Image Choices to achieve this quickly and easily for existing users of our Image Choices add-on.
The design
He’res the design mockup we put together before jumping into custom CSS and jQuery. This helps us understand what needs to be put together, and how each element could be generated within the constraints of just using Gravity Forms and Image Choices add-on. We wanted to be able to recreate this design only using standard Gravity Forms with Image Choices, no theme updates or server logins required. Just WordPress logins, Gravity Forms and Image Chocies.
Demo code & examples
In the above video, we show you how to create the basic product configurator seen below in the live demo. For this basic example, we’ve stripped back a lot fo the custom styles and CSS, that’s relevant to our website, and made it fairly generic, so you should be able to theoretically take the below CSS, jQuery and instructions and create your own.
What you’ll be creating
So how did we do it?
SO this tutorial is already getting long, watch the below video where we’ll show you step by step on how to build your own product configurator using Gravity Forms and Image Choices. Make sure to grab the demo CSS and JS below the video.
Look straight forward? Great! Scroll down and grab the required CSS and jQuery we mention in the video above. Then if you need, follow along with the video tutorial to the next step.
Example CSS
Copy the below CSS, and paste it into your Image Choices settings > custom CSS screen.
Copy below CSS
Example JS
Create a new HTML field, add it to the bottom of your form within the Gravity Forms form editor, and paste in the below jQuery script.
Copy below JS
Other Examples
Clothing demo
Product bundle demo
With the first demo completed andlooking/workingg great, we wanted to keep pushing, see how far we could make the forms look amazing, but also show how versatile this concept could be. The next example shows how you could develop a product bundle builder within Gravity Forms to give your users a visual representation of a product bundle being built.
Product bundle Demo
Thanks to the guys at Quadlock.com.au for letting us use their awesome product images.
Notes & things to consider
Now whilst this example might get you 70% of what you’re after, you’ll probably need to further customise the CSS to get it looking how you want it. WordPress themes differ dramatically, so more often than not, you’ll need to tweak the example custom CSS provided further.
These examples are currently not mobile friendly. Yeh we know we know, we’ll get to it as soon as possible and update the CSS example code above when we do.
Disclaimer
Due to the somewhat custom nature of this tutorial, we’re only able to offer very basic support to help you get these examples working. Evey WordPress install is unique for your needs and thus near impossible for us to help implement these examples into everyone’s site. Take these examples as inspiration to try it yourself and see if you learn anything along the way. We’ll help where we can but can’t promise the world. Thanks for understanding.
Please be sure to drop us a line or share on facebook or twitter, instagram.
