CSS for radio buttons convert to big button not working [RESOLVED]

We are trying to create a small lead-in form to our main giving form. We would like the radio buttons to big buttons. I’ve tried the following technique:

… but the buttons are still appearing as radio.

Any suggestions for how I might be able to troubleshoot? Thanks in advance!

Do you have a link to the page on your site where we can see the form with your classes on the fields, and the additional CSS? Thank you.

Certainly! Here’s the link to the form:

Here’s an alternative solution that I’ve pulled together for some of my forms.


In your current form, it appears that the gfp_big_button class is not being applied.

1 Like

Did you add the CSS snippet or only the classes to the form?

1 Like

Does this still work in Gravity Forms 2.5? I’ve added the CSS class as well as the snippet to my site, but only seeing standard radio buttons.

Hi Brian, it will work in Gravity Forms 2.5 and later if you are using the Legacy markup. If you are not using legacy markup, you would need to modify the code, because the code targets list items, which are no longer used in Gravity Forms. If you are using the column editor, and not Legacy Markup, then you would need to modify the code provided to target the new elements in your form. You may have to do a little detective work to determine which elements need to be targeted (view the source of the page to inspect.)

I did get this code updated so that it should be working properly with new markup.

1 Like

Oh cool! Is the updated code available somewhere I can grab it? I think I was only seeing the old article.

I put the updated code directly in the article. Should be live with caches cleared. Maybe also clear your browser cache.

Sorry this article How to Present Radio Fields & Checkboxes As Buttons in Gravity Forms

Ah, that was it. I must have gotten a hold of an older repost of the article. Thank you!

1 Like
© 2008 - 2019. Gravity Forms is a project by Rocketgenius Inc.