You Are Here: Home » TLC Blog » How to Turn Radio Buttons into Big Buttons in Your Gravity Form

How to Turn Radio Buttons into Big Buttons in Your Gravity Form

Radio Buttons are Ugly!

This is a screenshot of radio buttons

Radio Buttons do not create an eye-catching set of options for a donation form.

This is a screenshot of buttons

Styled, big buttons are much better looking, professional and appealing

I recently reached out in Slack and got a quick solution to turning my radio buttons into BIG BUTTONS. When collecting donations on a website, it is important to make the process clear and easy for the user. The simpler the better!

Here is the trick, in css:

Make sure to apply this class to your Gravity Forms field class under Appearance, like this:
gravity forms button setting

Thanks to @NaomiCBush, Gravity Forms Wrangler for the help!

 

9 Comments

  1. Gina on April 18, 2018 at 12:15 pm

    Hi there, thanks for these great buttons. I’m trying to use them on a form for options that are quite long and they are not displaying in a nice row. What would I change to get them to sit 3 in a row? Or alternatively stacked in a column? I can’t post a link publicly unfortunately as it’s totally unfinished and on a client’s site, but could send by email if you would be kind enough to help me 🙂

    • Tara Claeys on July 27, 2018 at 2:18 am

      I am sorry I never saw this comment! I hope you figured it out …

  2. Annette on November 28, 2018 at 12:00 am

    This is nice, but how to you make the selected button stay a different color?

    • Tara Claeys on November 29, 2018 at 11:56 am

      You can control that with CSS for the active state of the button.

  3. David Albert on December 19, 2018 at 9:25 pm

    That answer isn’t very helpful. If you want the selected button to be a different color, use:

    .gfp_big_button .gfield_radio input[type=”radio”]:checked+label {
    background-color: #414142;
    }

    Where #414142 is your selected color. This post is great but not very useful if the user can’t tell what they’ve selected.

    • Tara Claeys on January 8, 2019 at 8:35 am

      Thanks for clarifying that, David!

  4. Rafael Hernandez on April 1, 2019 at 3:44 pm

    Great tutorial Tara.

    David’s comment was very helpful but I had remove the quotes from input[type=”radio”] in order for the selected button stay a different color. It may also help to leave a space after the word checked.

    so that line for me looked like:

    .gfp_big_button .gfield_radio input[type=radio]:checked +label {
    background-color: #414142;
    }

  5. Abraham Walker on April 29, 2019 at 8:45 pm

    Great post. The comment section was super useful.

    I happen to notice that you’re located in Arlington, VA.

    I’m in Alexandria, VA on the Fairfax County side.

    Thanks for the tip. I’m adding this fix to my Gravity form ASAP.

    Do you have any solutions for aligning the Label next to the Input on mobile devices or small screens? It looks like Gravity form has a default media query set for 642 px but I’ve been unsuccessful at getting the same CSS to work on mobile.

    Thanks in advance for your help.

    Onward,

    AW

Leave a Comment