Is it possible to set custom radio button values, separate from the label text?


#1

I need to post form submissions to a script on our server for processing. Users are required to select a product option using radio buttons. The problem is that our system requires the HTML “value” of the radio buttons to be product numbers, which don’t make a bit of sense if presented to the user.

So, what I really need is the ability to put descriptive text alongside each radio button, but set the HTML value attribute independently of that.

Can this be done in Unbounce? It seems like it would be a very common need, but so far I haven’t been able to find a way to do it.


#2

Hey Matthew

Sorry but not with how our current radio buttons work. It is however possible to override and set new values with javascript. If you have the coding chops to do so you may be able to override the ‘value’ attribute using some jquery

http://api.jquery.com/attr/

Hope that points you in the right direction


#3

Thank you for your reply. Unfortunately I do not have the “coding chops” to do this on my own.

Is there any way this feature could be added in the near future? It seems like it would be relatively simple to add an option to independently set the value attribute for each radio button, and I can’t imagine that I’m the only one who would find this immensely helpful.

For that matter, couldn’t there be an “advanced” option for each form field that would allow the field name and value to be set explicitly for those who need to do so? This seems like it would be critical functionality for most clients who need to submit to their own scripts for processing, and I can’t help but think that the lack of this feature is costing you business.


#4

Hi Matthew - this is something we’re considering, but I don’t have a timeline for it (we plan on tackling some smaller Page Builder tweaks, but it’ll be after Mobile Responsive is out of beta).

We have had some requests for it, but because a lot of software that accepts POST data requires some further coding regardless of the incoming format of the data, so far we’ve found that anyone connecting something like that to Unbounce usually has a developer on hand already, so making changes like the ones Johnny alluded to aren’t a problem for them.

That said, there is a much lower tech solution, provided you form has a solid background colour. You can just name the radio button labels numerically, then float a text field with an opaque background of the same colour over top with whatever text label you’d like. Here’s a quick video I put together to show you what I mean: http://screencast.com/t/8UjyfkHRxt


#5

Hey Matthew, I just want to add that this specific functionality is actually at the top of the list as soon as Mobile Responsive is out the door (which is currently scheduled for Nov 17th.) I know that’s a month away, but we will try our best to get it out sooner. Hopefully Quinn’s solution of floating a text element next to the form field instead of using the default label is an acceptable workaround for now.

Cheers!


#6

Well, that’s a bit of an ugly hack. [grin] However, it sounds like a workable option for now, so I’ll check it out.

Javascript has always been elusive to me, but I’m not a bad back-end developer. I have already modified our processing script to accept data from other Unbounce form fields, but unfortunately there is nothing reliably unique for me to “grab” from the radio buttons for processing unless I can include a product number somehow.

Look at it this way: A store can easily feature identical options and pricing for very different products. Without a unique identifier, how are you supposed to reliably tell the difference programmatically?

In any case, I’m glad this one is at the top of the list. I think we can hold out for a month. :wink:


#7

i see the problem here is the fact that Unbounce needs the label and its value in radio buttons to be the same.
sometimes this can create errors with third party software and services, like Infusionsoft.

for example, these pairs of labels and values ( label - value ):

I like pizza - 0010
I like sushi - 0012

to make things work, in the form, write the value of the radio button in the label field.
for example:

Screenshot of Google Chrome (27-9-17, 17-54-21)

which in HTML is:

Screenshot of Google Chrome (27-9-17, 18-15-42)

i have wrote a script that changes the labels of radio buttons of Unbounce forms:

<script>

	lp.jQuery(document).ready(function($) {
		$("label[for*='what_do_you_prefer_0010'] span").text("I like pizza");
		$("label[for*='what_do_you_prefer_0012'] span").text("I like sushi");
	});

</script>

insert the script in the page before the Body end tag and it will result in:

Screenshot of Google Chrome (27-9-17, 17-55-29)

with the values set so when a user selects pizza, the value sent by the form is going to be “0010” as required.


#8

This is quite a clever solution. But it doesn’t work when the radio button text spans more than one line. In that situation the text of each radio button overlaps the text of the other buttons.

Come on Unbounce - separating checkbox and radio button values from labels has been a long time coming!


#9

hi, can you show us your code so i can help you out (and others with the same problem) in the meantime ??


#10

HI Elysium.

Sure.

This is the view in the designer:

And this is the view when published. It’s because the text for one of the radio buttons wraps over two lines.

Javascript as per your suggestion:

Cheers
Dave


#12

what you are requesting seems doable. i’ll get to that, in the meantime, check this new super tool i developed for the Unbounce community:


Read more: The Ultimate List of Unbounce Tips, Scripts & Hacks


#13

hi Dave

have you tried using CSS to achieve that ??