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.

1 Like

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
© 2008 - 2019. Gravity Forms is a project by Rocketgenius Inc.