Turn Radio Buttons into actual buttons

Get Help
, , ,
1

Can anybody point me to a good, and recent source/tutorial on how to turn GF radio buttons field into nice looking buttons?
Everything I’ve found so far either didn’t work anymore, or wasn’t up to more modern standards. Not sure if classes or hierarchies have changed in 2.5.

2

I followed this advice to make the buttons on my sitie ScubaMedical.com - These are standard radio buttons in GravityForms (with a bunch of CSS to change usability)

2 Likes
3

This can be accomplished by using a ready class and CSS.

Here are a few sources as to how you might accomplish this as well as a service provider who can convert radio buttons into actual buttons for you.

1.) Source by typewheel This resource is provided by a Gravity Forms employee and is completely free.

2.) Make radio buttons into actual buttons This is a service I offer, and I can add snippets for you and further customize the color and other various styling elements.

3.) Of course, here is another thread in which the same topic has been addressed before: See previous topic from the community

1 Like
4

Thank you very much. That helped a lot.

5

Unfortunately:
#1 is outdated, working only on Legacy CSS rather than the new (Grid-based) 2.5 css.
#3 link is not available.
Is your #2 service up to date with GF 2.5 modern Grid CSS?

6

  1. You will want to remove li out of your CSS selector for 2.5 compatibility.

  2. Yes

  3. Interesting the link is currently working on this end.

7

Not sure why #3 isn’t working for me… I just tested in three different browsers. In all cases I get “Oops! That page doesn’t exist or is private.”

8

2.5 changed a lot of the code. But if you focus on understanding the concept that is being achieved all of the background info should help you figure out a way to style the buttons in the way you want. This is going to be the best way to solve achieve what you want - learning the concepts, rather than looking for drop-in code.

The general concept here is to hide the system default radio button and instead transform the label element in to something you want. This is nothing GF specific, there are standard HTML elements.

2 Likes
9

Hi to All
I have a CSS code that works and i think it will help a lot more than than this: How to Present Radio Fields & Checkboxes As Buttons in Gravity Forms

Very difficult to find another reference on Google !

Ok So let’s go :

.gform_wrapper ul.gfield_checkbox, .gform_wrapper ul.gfield_radio {
margin: 0px 0 !important;
}

.gform_wrapper .gfield_required {
display: none !important;
}

.gform_wrapper .gfield_radio li input[type=radio] {
    display: none;
}


/* Form */

.gform_wrapper ul.gfield_checkbox li label, .gform_wrapper ul.gfield_radio li label {
text-align: center;
display:inline-block;
text-shadow: none;
min-width: 150px;
margin: 0 !important;
padding: 15px 20px 5px 20px;
border: 1px solid #4078A6;
border-radius: 2px;
color: black;
height: 50px;
}


input:checked + label {
            background-color: #4078A6;
            color: #fff !important;
            box-shadow: none;
          }


h4 {
    margin: 32px 0 50px 0;
}

.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
    border-color: #4078A6;
    background-color: white;
}

body .gform_wrapper .gform_body .gform_fields .gfield select {
border: 1px solid #4078A6;
height: 50px;
}

.gform_wrapper textarea.medium {
border-color: #4078A6;
}



#gform_wrapper_2 .gform_fields .gfield input::-webkit-input-placeholder {
	/* Chrome/Opera/Safari */
  color: black !important;
}
#gform_wrapper_2 .gform_fields .gfield input::-moz-placeholder { 
	/* Firefox 19+ */
  color: black !important;
}
#gform_wrapper_2 .gform_fields .gfield input:-ms-input-placeholder {
	/* IE 10+ */
  color: black !important;
}
#gform_wrapper_2 .gform_fields .gfield input:-moz-placeholder {
	/* Firefox 18- */
  color: black !important;
}
1 Like