Build a simple product visualiser with Gravity Forms Color Picker

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

We’ll use standard Gravity Forms fields, along with our Gravity Forms Color Picker addon, and pair it with some custom CSS and custom JavaScript to get an interactive image changing product configurator.

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.

Download Form Export example

1. HTML Field (for the images)
2. Radio field (With Color Picker plugin installed and turned on for that field)
3. HTML field (for the javascript)

Example CSS

Copy the below CSS, and paste it into your Gravity Forms. Color Picker 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

You should have something like this after adding in your javascript into the HTML field.

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:

Extras

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

Advanced CSS

Advanced JS

Advanced HTML

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.