How do I give a checkbox a separate value and label?

[SB1]

I have a series of checkbox fields in our form, but in the ‘checkbox choices’ control there doesn’t appear to be a way to separate the value of the checkbox from the label of the checkbox. If I want a label of “I am interested in the $500 promo package” and “I am interested in the $1000 promo package”, those large text strings are the values that get sent to our endpoint. I would prefer to have a value of “500” and then whatever wording the department feels like using.

Is there a way to assign a separate value and a label to a checkbox?

[Quinn_Omori]

Hi SB - There’s not native support for this, but there is a workaround that should do the trick.

You can set the checkbox labels to 500 and 100 and then float a text box over top of each with your full label text. Just set the opacity on the text box to 100%, so that it obscures the label underneath completely:

[Rene]

How can I make this workaround work for a question that spans multiple lines?

[Justin]

Great question, Rene! This one would be a bit trickier, admittedly, but it’s still possible with a bit of craftiness.

First, you’ll want to create a bit of space in your options, like this:

Lastly you’ll create a text box similar to how Quinn did, with the opacity set to 100%. Make the box the appropriate width, and new lines will be created automatically:

That’s about it! You can see how this looks when published here:
http://unbouncepages.com/checkbox-wor…

Hope this helps, Rene!

[Justin]

See the response below.

[Justin]

Great question, Rene! This one would be a bit trickier, admittedly, but it’s still possible with a bit of craftiness.

First, you’ll want to create a bit of space in your options, like this:

Lastly you’ll create a text box similar to how Quinn did, with the opacity set to 100%. Make the box the appropriate width, and new lines will be created automatically:

That’s about it! You can see how this looks when published here:
http://unbouncepages.com/checkbox-wor…

Hope this helps, Rene!

[Justin]

Great question, Rene! This one would be a bit trickier, admittedly, but it’s still possible with a bit of craftiness.

First, you’ll want to create a bit of space in your options, like this:

Next, you’re going to want to completely cover the two null options with a box that matches your background:

Lastly you’ll create a text box similar to how Quinn did, with the opacity set to 100%. Make the box the appropriate width, and new lines will be created automatically:

That’s about it! You can see how this looks when published here:
http://unbouncepages.com/checkbox-wor…

Hope this helps, Rene!

[Michael_Crump]

I am really surprised there is no way to assign value fields to check boxes. This is pretty fundamental … I want a tick box for email list opt-in agreement. need to pass a value of on to Eloqua and I end up passing (i_agree_to_receive_email_from…) instead. Not ideal.

[Michael_Crump]

I will try this workaround, but its an ugly hack, got to check its positioning on desktop and mobile across a range of mobile devices. Yuck. By the way, this is Bradley Hughes, digital marketing specialist, Michael is my manager.

[Michael_Crump]

Well, it won’t work on a form with a background image in it. Can’t Opacity that away. Eugh. http://study.upskilled.edu.au/vet-fee…

Any other suggestions on how to pass value=“on” through when ticked and nothing through when not?

I’ve been having a pretty good run building new landing pages last couple of days, this was the final element needed before going live. Black flagged on the last lap.

Any solutions?

[Carter]

Hey Michael,
Just a quick update that this exact issue is something we’re working on Ñ being able to give your form fields a different name from your field labels. It’s probably a couple of weeks away, but we’ll update this thread when it’s released or if anything changes.

[Darren_Carter]

Any updates on this functionality? We need this feature, too.

[Carter]

Hey Darren, my apologies Ñ we actually implemented an improvement for this problem several months ago but just forgot to update this thread. I’ve posted an update below with a bit more details on how this is possible. Cheers!

[Kevin_Caruso]

How about adding the ability to give the Checkbox Choices a value different than what is displayed? For example to say True or False, instead of pass the actual checkbox text. THIS would also be extremely helpful!

[Gabriel_Ruiz]

This!!!

[Sam_Melamed]

Gabriel, I had a similar issue and made it through. Check this thread.
https://community.unbounce.com/unbounce/topics/add-ability-to-add-a-passed-value-for-checkboxes-inst…

[KJ11]

I’ve read through this and a few other other threads. I’m not advanced enough to write script and hope there’s another solution. 

I’ve inserted multiple checkboxes into my form as opt-ins for different partners in a sweepstakes we’re hosting. Works/looks great.

But … when we download the CSV file, all the optins are in one column. I’ve tried parsing the column in Excel to no avail.

I also tried creating each checkbox as a separate field, which works for the CSV file results, but it messes up the spacing on the form, I don’t see that I can control that?

Any and all help much appreciated! 

[Carter]

Hey everyone, 
I’m not sure how we missed this, but we rolled out an improvement to our forms for this very problem a little while ago! When you are editing your form, you can now provide separate values for the label and the field name/ID. By default, the field name/ID is generated automatically based off of the label, but you can now uncheck a “Auto-generate from Field Label” checkbox and provide your own. This is possible with any field type, but here’s an example of how you would accomplish this thread’s original problem:

Let us know if you still aren’t able to accomplish what you need.

Cheers,
Carter

[Sean_McKenna]

This is not the same thing. We should be able to specify the checkbox VALUE and LABEL separately. When posting data to other systems, this is a requirement.

Should not have to go through weird workarounds to get this.

Example:

<div class="option">
<input type="checkbox" value="Show me how this works." id="guidedtour_Show me how this works." name="guidedtour" class="checkbox form-builder-checkbox-input form_elem_guidedtour" checked="">
<label for="guidedtour_Show me how this works." class="form-builder-checkbox-label" id="label_guidedtour">Show me how this works.</label>
</div>

[Rob]

Hi everyone, while this isn’t a built in feature with Unbounce yet, there is some fairly straight forward javascript that will allow you to set the value of a checkbox field. By using the ID of the specific option as a target for the javascript you can set the value with a single line of code:

https://gist.github.com/RobertCam/dbf8287c941253632683718875896fbc

You’ll need an instance of the above script for every option you want to change the value for. You’ll also need to add your own ID and value. The ID for a checkbox option in Unbounce is comprised of the label for the field and the label for the option separated by an underscore.

In the code above the checkbox field is labelled “untitled” and the option I’m setting the value for is labelled “choice_1” (It’s the default naming when adding the checkbox field to the page).

Ex. field label = "choose a plan"
option 1 label = "starter"
option 2 label = "Pro99"
option 3 = “Free”

The IDs:
option 1: #choose_a_plan_starter
option 2: #choose_a_plan_pro99
option 3: #choose_a_plan_free

You can set the value to anything you choose

Pro-tip: Copy and paste are your best friends for this one if you have a lot of options

Hope this helps out a bit!