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.
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.
| Field type | Class 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
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.
