[How To] Add Icons To Radio Buttons In Unbounce Forms


Userlevel 7
Badge +4

Hi everyone 👋

We’ve put together a tutorial that demonstrates how you can style your radio buttons in your Unbounce landing pages and replace them with clickable images using only CSS properties. Additionally, we’re going to add a hover feature to indicate when an option has been selected by the user. This feature can be done by adding the stylesheet into your Unbounce page.

See it in action! 💥 Here’s a landing page (built in Unbounce) using icon radio buttons.

webistry

👈


🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, the Unbounce support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


Step 1. (Optional)

Directly from the edit page, you can edit the radio button to have it shown in rows or columns inside the properties options.

image

Step 2.

After creating your form, your radio buttons will have a field name that needs to be referenced to. You can find this in the box under “Field Name and ID”. You can use an auto-generated form field label or choose one yourself by typing it inside the box. In this project, it’s labeled as “icon”.

image

Step 3.

Host the images/icons you want to use on an image hosting website (ex: https://imgur.com/, AWS, your server, or Google Drive)

Each image will have its own url link that needs to be used.

Step 4.

The CSS is commented below to help you understand what’s being done. Then you can copy it into your stylesheet. Wherever you see the word “icon”, you will need to replace it by the field name that you used in your form. Depending on how many options your form will have, each radio button will need to follow the same styling. Therefore, copy and paste the CSS properties that holds the word “icon” and edit it to make it work with your form field.

<style>
  
    .option input{
        margin:0;
        padding:0;
        -webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;
    }

    /* Place imugr link here. We do it for Male, Female and Other here.  */ 
    #ub-option-icon-item-0 > label{
        background-image:url(https://i.imgur.com/1Mgn2bV.png);
    }

    #ub-option-icon-item-1 > label{
        background-image:url(https://i.imgur.com/GbFNNKu.png);
    }

    #ub-option-icon-item-2 > label{
        background-image:url(https://imgur.com/lXwtXAL.png);
    }

    /* Here you can edit the opacity of the images. */ 
    .option input:active +.opt-label{
        opacity: .9;
    }

    /* Here you want to make sure that there's no filter your images */ 
    .option input:checked +.opt-label{
        -webkit-filter: none;
        filter: none;
    }

    /* This is where you can style the image that you desire to use with any CSS properties.
    The width and height of your image can be adjusted here. Depending on the images you use, it 
    will need adjusting. */
    .opt-label{
        cursor: default;
        background-size: contain;
        background-repeat: no-repeat;
        display: inline-block;
        width: 70px;
        height: 70px;
        -webkit-transition: all 100ms ease-in;
        transition: all 100ms ease-in;
        -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
        filter: brightness(1.8) grayscale(1) opacity(.7);
    }

    /* Here is where the hover feature is implemented */
    .opt-label:hover{
        -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
        filter: brightness(1.2) grayscale(.5) opacity(.9);
    }

    /* Here we make the label names hidden (Male, Female, Penguin)  */ 
    #ub-option-icon-item-0 > label> span{
        visibility: hidden;
    }

    #ub-option-icon-item-1 > label> span{
        visibility: hidden;
    }

    #ub-option-icon-item-2 > label> span{
        visibility: hidden;
    }
  

</style>

In the stylesheet, it happens on two occasions.

  1. When the image is placed as the background-image

#ub-option-icon-item-0 > label{ background-image:url(https://i.imgur.com/1Mgn2bV.png); }

  1. When we hide the label names.

#ub-option-icon-item-0 > label> span{ visibility: hidden; }

Therefore, if you have more than 3 options, you will follow the same convention and put in:

#ub-option-icon-item-4 > label{ background-image:url(https://i.imgur.com/image#4here.png); }

image

That’s it! You’re done!

Let us know if you have any questions about these instructions in the comments section below. 👇


Want to take your Unbounce landing pages to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


10 replies

Userlevel 5
Badge +2

I think this has been long anticipated in the community! Great share, guys! 💙

Thanks so much, Stefano for your kind help!

I will follow your instructions!

Stay safe and healthy!

Have a great day!

Tania

Userlevel 5

This is amazing! Well done 😃

But can we talk about that yellow duck/penguin icon? 😦
It seems happy tho… so I guess that’s good.

This is pretty cool

Userlevel 7
Badge +4

Likewise, enjoy!

I would love to use this feature for vertical radio buttons (not horizontal radio buttons). When I implement the solution above, though, the images overlap as the space in-between the buttons isn’t large enough. Do you have a solution for this issue?

I already tried to increase the space in-between the radio buttons by increasing the Font Size in the Checkbox / Radio Button section which just works a bit, unfortunately. Thanks for your help!

Userlevel 7
Badge +4

Hi there! Although we haven’t done this yet, I am sure it is possible with a little CSS. I will provide you with an update once we tackle this 😀

Hi, this is great! Thanks! however, I wasn’t able to create more than one question since the pictures are covering each other. I would be able to do this if there was a way to change the field attributes above 48. Is there a better way to do this?

I am having the same issue, ideally i’d want to have 2 rows of buttons that are evenly spaced out so the icons don’t overlap. I thought i could change it from the page attributes by spacing out the buttons but the functionality is limited.

@Stefano

Thanks !

Userlevel 7
Badge +4

Hi all! Let me know if this helps:

  #ub-option-icon-item-0 {
     position: static;
     height: 75px;
    }
    #ub-option-icon-item-1 {
     position: static;
     height: 75px;
    }
    #ub-option-icon-item-2 {
     position: static;
     height: 75px;
    }

and if you want to position them, you can use margins, for example this centers them:

#ub-option-icon-item-0 {
  margin-left: auto;
  margin-right: auto;
}

or you can do margin-left: 60px; etc.

The solution above is to have 1 icon per row, if you want to have multiple icons per row can also add this to each icon item:

#ub-option-icon-item-0 {
   display: inline-block;
}

Reply