Unbounce Form Radio Buttons as Images


#1

Is is possible to set radio buttons as custom images? As opposed to the simple circle with a text next to it


#2

I haven’t tried this, but this may help – https://gist.github.com/rcotrina94/7828886


#3

Hi @Joel_Cortez,

It’s possible but you would need to custom code it with a bit of JS and CSS.

JS to control the checked/unchecked state and CSS to swap out images (I would advise on using SVGs).

This is an example of what the JS would look like:

$('.checkbox-group .option input').on('change', function() {
        var checked = $(this).is(':checked');
        if (checked) {
            $(this).parents('.option').addClass('checked');
        } else {
            $(this).parents('.option').removeClass('checked');
        }
    });

Of course, you would need to write the corresponding CSS.

Hope this points you in the right direction.

Best,
Hristian