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

  • 13 October 2014
  • 16 replies
  • 146 views
M

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.

16 replies

Johnny_Opao
Userlevel 3

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

M

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.

Quinn_Omori
Rank
Userlevel 3
Badge +1

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

Carter
Rank

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!

M

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. 😉

Elysium_Nguyen

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.

latearrival

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!

Elysium_Nguyen

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

latearrival

HI Elysium.

Sure.

This is the view in the designer:

image

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

image

Javascript as per your suggestion:

image

Cheers
Dave

Elysium_Nguyen

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:
com-resize-2
Read more: The Master List of Unbounce Tips, Scripts & Hacks

Elysium_Nguyen

hi Dave

have you tried using CSS to achieve that ??

raget

The text replacement is working, but is it possible to replace it with an image?

B

Did anything happen with this feature? It’s been a long time since November 2014 (5+ years?) and I’m sure that lots of users need a solution.

D

Metoo, Until now everything has not changed

Clixigen

Hi @Quinn_Omori / @Carter , we also just ran into this issue when integrating to a Hubspot form to work within some workflow / deal automation on the HS side. The issue we’re seeing is Hubspot is not able to update the property values of the (in this case) the package on their internal value for the option property that our potential customer is selecting. A workaround is to use the https://api.jquery.com/attr/ and advanced coding section. If there were an easy way to customize the individual property names, so for example, the Unbounce form Radio / Checkbox select label say: ‘Silver Package’ then it converts to ‘silver_package’… whereas Hubspot knows that property as ‘Silver_Package’ (or whatever), it would be helpful to update the internal value option in unbounce. Also just occurs to me I can create new values in Hubspot with the exact match unbounce provides to exactly match the label (in this case) and port all the data over. So this isn’t a hard roadblock, but a nice to have (for Hubspot at least) Thx!

Andre_at_MarketPitch

hi everyone,

I haven’t seen a proper answer here so I decided to investigate a bit into how this can be achieved.

Turns out a simple JS script will do the trick.

<script>
  document.getElementById("replace_this_with_field_id_1").value = "your_value_1";
  document.getElementById("replace_this_with_field_id_2").value = "your_value_2";
</script>

Add this to your “Javascripts” on your Unbounce page and select the placement “Before Body End Tag”

Easy enough.

To get the actual field ids, just right click on the radio button and select “inspect element”. That should highlight the field in the page code and you can copy it over from there.

The end result
The form will display the labels as you’ve entered them in your page builder, but the “value” field will have the values you’ve entered in your script e.g. your_value_1, your_value_2

Remember to do a few tests to make sure the data is being pushed correctly to your CRM or other integrations.

I’m no developer but I’m happy to help troubleshoot anyone having issues with this solution as best as I can.

Cheers,
Andre

Reply


Terms & ConditionsCookie settings