Possible? If not, any ideas? (custom radio buttons for donation amounts) [RESOLVED]

Hey all, I’m working on a donation form and really like the idea of user being able to simply select a dollar amount … similar to what can be seen in the image.

Another, and more complete example (please no politics), is this donation form [link].

While I don’t think this is possible with Gravity Forms, I’m not completely sure. If it isn’t possible, any ideas on how to get it done?

1 Like

Edit: Phil Meyers reply below is better for this

Alternative:
Probably a combination of these two could get you where you want to go:

Change radio select to (image) buttons: https://jetsloth.com/gravity-forms-image-choices

And the inline alignment:
For example, to display the choices horizontally rather than vertically, enter the gf_list_inline CSS ready class in the field’s Custom CSS Class field under the Appearance tab:

2 Likes

Here you go:

1 Like

Great! Thanks you two. :)) I wonder if this is on the Gravity Forms dev team radar.

1 Like

There is no plan at this time to incorporate this functionality into Gravity Forms. There are several possible approaches to it, using either CSS to create the ‘buttons’ or using the JetSloth image choices plugin, or equivalent.

1 Like

Follow up. All is good except, I can’t seem to hide the [type=radio] on my form using CSS.

Can someone take a quick gander and see what they come up with?

Here is link to testPage I have the form on [LINK]

Thank you.

Adding the following to your page using Developer Tools:

.gfield_radio input[type="radio"] + label:before {
	display: none;
}

.uael-gf-style .gform_wrapper .gfield_radio li label {
	margin: 0;
	width: 60px;
	padding: 5px;
}

… gave me the following:

image

You may have to play around with it a bit, but it’s definitely doable.

2 Likes

Whoa! Thanks for looking and showing me how to get it done @tcgsa … very much appreciated. ))

1 Like

No problem! Hope you can make it look the way you want it. Shout if there’s anything I can help with. :slightly_smiling_face:

2 Likes

@tcgsa - Could you please help out with similar issue?
Trying to accomplish similar restyling. I’m assuming what you added for @vitamineg was for Elementor. This site is using Beaver Builder.

Hi Andy,

I actually use Divi myself, but this was not a result of the page builder at all. You simply need to use some CSS footwork to get that effect.

This CSS code, which you could add to your page via a code module or something (I’m assuming) should help to get you started:

.gfield_radio input[type="radio"] + label:before {
	display: none;
}

.uael-gf-style .gform_wrapper .gfield_radio li label {
	margin: 0;
	width: 60px;
	padding: 5px;
}

I don’t remember if this code was specific to his form nor what I used for the orange background, but you could start with it and play around if you wanted.

Otherwise, If you could show me the page with the form I could take a look and try to give you something more specific.

Cheers,
Phil

Oh I found your form. Try sticking this CSS code in there and see what you get:

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

.gfield_radio li label {
	padding: 16px 20px;
	border: 1px solid #DBB19A;
}

ul.gfield_radio li {
	margin: 3.5%;
}

ul.gfield_radio li:last-child {
	margin-right: 0;
}

You can tweak and also experiment with background colors on hover and active etc.

Please let me know if this helped - I’m happy to help where I can.

Phil

1 Like

Awesome, Phil. You definitely got me started. I just need to keep cleaning up. I’m not a css person at all. This is where I need to grow for sure. Thanks!

No problem Andy, I hope I made any sense at all - it was already way past pumpkin time in my neck of the woods…

I’m happy to help out if you want. If you get stuck perhaps create a temp. admin account and I could try and sort it out for you.

I wouldn’t call myself an expert by any stretch of the imagination, but I’ve had to dig myself out of enough holes in the past and might just be able to help you as well. :wink:

1 Like

Hey All,

I was trying to accomplish the very same thing but keep running into an issue with the buttons not sizing correctly, I tried adjusting the CSS but it stays the same.

Any help would be great!

Link to test form

Hi Marco. I moved your comment to a new topic and I will close this one. Can you please add a new post there to update the issue? Thank you.