Skip to content

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

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.

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

Field typeClass name to add
HTML Field (for the images)preview-area
Radio field (With Color Picker plugin installed and turned on for that field)color-choice
HTML field (for the javascript)

Example CSS

Copy the below CSS, and paste it into your Gravity Forms. Color Picker settings > custom CSS screen.

If you use the below styles, just make sure you have your Color Picker style/theme settings to “none”.

/* Preview Area */
.preview-area {
    height: auto;
    position: relative;
    width: 100%;
    display: block;
    max-width: 600px;
    margin: 0 auto;
}
/* Preview Layer */
.preview-area img {
    transform: translate(-50%);
    position: relative;
    left: 50%;
}
/*Chocies Styles*/

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.

<script type="text/javascript">
    jQuery(document).bind('gform_post_render', function(e, formId, currentFormPage) {
      // Hide all the product images
      jQuery( ".gform-body .preview-area img" ).css('display','none');
      // Now show the first image to start with
      jQuery( ".gform_body .preview-area img:eq(0)" ).css('display','block');
      // On color swatch click/selection
      jQuery(document).on("click",".color-picker-choice", function(){
        // Get index of color selection input
        var $radioIndex = jQuery( ".color-picker-choice ").index(this);
        // Refernce the images in the preview
        var $imageRef = jQuery( ".gform-body .preview-area .product");
        // Hide all images to start with
        $imageRef.css("display","none"); 
        // Show relevant image in reference to click color selection index
        $imageRef.eq( $radioIndex ).css("display","block"); 
      });
    });
</script>

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:

<img class="product" src="https://yourwebsite.com/link_to_your_image/my_image1.png"/>
<img class="product" src="https://yourwebsite.com/link_to_your_image/my_image2.png"/>
<img class="product" src="https://yourwebsite.com/link_to_your_image/my_image3.png"/>

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.

Buy Gravity Forms Color Picker

3,135+ happy customers

Gravity Forms Color Picker

Let users select from a pre-defined set of swatches you make available or even let your users select a custom hex value from the color picker.