If you loved our previous tutorial on how to build a product configurator with Gravity Forms with a couple of requests on the blog we’ve created a simple product viewer or configurator using our Gravity Forms Color Picker and a bit of custom CSS and JS to get a super cool and interactive result. Learn how to display a product visualiser with Gravity Forms Color Picker
Build a simple product visualiser with Gravity Forms Color Picker
Let’s look at how far you can take JetSloth’s Color Picker 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 simple product visualiser with Gravity Forms Color Picker.
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.
Demo code & examples
What you’ll be creating
Add the fields to Gravity Forms
Create a new Gravity Form and add the below list of fields in this order. You can also download a form export of the example below to start with if you wish.
- HTML Field (for the images)
- Radio field (With Color Picker plugin installed and turned on for that field)
Copy the below CSS, and paste it into your Gravity Forms. Color Picker settings > custom CSS screen.
Copy below CSS
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
Adding the images
Go back to the first HTML box and add in the markup to showcase all your images. I’ve got 4 t-shirt images in this example so I’ll just add 4 <img class=”product”> tags along with the src to each image. Note you’ll need to add the class=”product” to each <img> tag so the JS can find it. So the end result would like so:
A few extra things you can play with and know:
- You can add as many product images and color swatches as you like, just make sure the number of images equals the number of color options you have…der.
- If you set a starting color from your color swatches within gravity forms, and you want the product image to also show on the load of the form (ie red color + red t-shirt) just edit the JS line
jQuery( “.gform_body li.preview-area img:eq(2)” ).css(‘display’,’block’); and change number 2 to the starting number you can. Remember this index starts from “0” so #2 would be the 3rd image.
Advanced Demo – with Image Choices
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.
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.