[Plugin: Contact Form 7] Giving unique value to seperate radio button options

Each radio button has unique value in nature, doesn’t it?

True, but Contact Form 7 set the value similar to the option name. And that is a string containing letters like this:

<input class="radio_toggle" type="radio" name="service" value="option 1" />option 1
<input class="radio_toggle" type="radio" name="service" value="option 1" />option 2

What I want, is to change these unique values to make it possible to perform calculations with them, like such:

<input class="radio_toggle" type="radio" name="service" value="100" />option 1
<input class="radio_toggle" type="radio" name="service" value="200" />option 2

No, it’s not the correct output from Contact Form 7. If you surely use Contact Form 7, you should see this type of output:

<span class="wpcf7-form-control-wrap radio-123">
<span class="wpcf7-radio">
<span class="wpcf7-list-item">
<input type="radio" name="radio-123" value="100" />
&nbsp;<span class="wpcf7-list-item-label">100</span>
</span>
<span class="wpcf7-list-item">
<input type="radio" name="radio-123" value="200" />
&nbsp;<span class="wpcf7-list-item-label">200</span>
</span>
</span>
</span>

I think there’s some miscommunication going on…

What I showed was an example of how Contact Form 7 handles VALUES of radiobuttons. Contact Form 7 sets the value of the radiobutton EXACTLY the same as the name of the option…

If I call my radio button: option_1
The value will be: option_1

I want to change that!
I want to call my radiobutton: option_1
and set the value to a number: 100

The name is for the website visitor to see, the value is for me to perform calculations with. If the value is called option_1, I can’t use that for any calculation of course ??

I need to define them seperately… is this possible?

It’s not correct. Try this tag in your form

[radio radio-123 "100" "200"]

You’ll just get what I wrote.

How did you set your radio buttons?

I’m sorry, but that’s not what I mean. I know that the radio button is supposed to do that, but I don’t want that ??

If I make a radio button like this:
[radio radio-123 "100" "200"]

The visitor will see a radio button with the values 100 and 200… Which doesn’t make sense to him!

I want the radio button to DISPLAY a text at every option but have a DIFFERENT VALUE in the background…

Ok, that makes sense. See this doc. It will help.
Selectable Recipient with Pipes

That looks great, I’m going to try that ??

Thanks a lot Takayuki Miyoshi!

hmm, it doesn’t seem to work.

I make the code in Contact Form 7:
[radio pages class:radio_toggle "1 to 10 pages|200" "11 to 20 pages|300"]

And the result in the page is:

<input type="radio" name="pages" value="1 to 10 pages" />&nbsp;<span class="wpcf7-list-item-label">1 to 10 pages</span></span><span class="wpcf7-list-item"><br />
<input type="radio" name="pages" value="11 to 20 pages" />&nbsp;<span class="wpcf7-list-item-label">11 to 20 pages</span></span></span></span>

It doesn’t seem to work… Am I doing something wrong?

It works correctly. They are shown as “1 to 10 pages” and “11 to 20 pages” in form HTML, then converted to “200” and “300” when you see them in mail.

Al right, that’s clear. But I need the value in the HTML. The Javascript uses the values to calculate instant prices.

If so, you don’t need to use Contact Form 7’s tags, just put HTML <input> tag into the form instead.

Yeah that should work.
Thanks for helping me ??