Can't set values for select option in Contact form 7

Question

I am trying to add a option value for select dropdown in CF7. I am using following shortcode to generate HTML like

<select name="Construction" class="form-control">
    <option value="opt1">Masonry</option>
    <option value="opt2">Frame</option>
    <option value="opt3">Mixed Masonry-Frame</option>
</select>

My Shortcode is:

[select* Construction class:form-control "Masonry|opt1" "Frame|opt2" "Mixed Masonry-Frame|opt3"]

But All I got is:

<select name="Construction" class="form-control">
    <option value="Masonry">Masonry</option>
    <option value="Frame">Frame</option>
    <option value="Mixed Masonry-Frame">Mixed Masonry-Frame</option>
</select>

I just followed the patterns used in https://contactform7.com/selectable-recipient-with-pipes/

Note : WPCF7_USE_PIPE was set true.

Answer 1

You might not need it anymore, but I came across the same problem today.

I solved it by filtering wpcf7_form_tag.

In my opinion a better solution than using JS because the values will be changed server-side before any form HTML is rendered.

Example implementation which should make the pipes work the way you want:

function so48515097_cf7_select_values($tag)
{
    if ($tag['basetype'] != 'select') {
        return $tag;
    }

    $values = [];
    $labels = [];
    foreach ($tag['raw_values'] as $raw_value) {
        $raw_value_parts = explode('|', $raw_value);
        if (count($raw_value_parts) >= 2) {
            $values[] = $raw_value_parts[1];
            $labels[] = $raw_value_parts[0];
        } else {
            $values[] = $raw_value;
            $labels[] = $raw_value;
        }
    }
    $tag['values'] = $values;
    $tag['labels'] = $labels;

    // Optional but recommended:
    //    Display labels in mails instead of values
    //    You can still use values using [_raw_tag] instead of [tag]
    $reversed_raw_values = array_map(function ($raw_value) {
        $raw_value_parts = explode('|', $raw_value);
        return implode('|', array_reverse($raw_value_parts));
    }, $tag['raw_values']);
    $tag['pipes'] = new \WPCF7_Pipes($reversed_raw_values);

    return $tag;
}
add_filter('wpcf7_form_tag', 'so48515097_cf7_select_values', 10);

Edit:

In the backend, the [tag] will be replaced by the value, not the label. But if you still want to have the label displayed in the e-mails instead, then that is also possible by recreating (reversing) the CF7 pipes. That way, you can actually choose which one to use. [tag] will display the label and [_raw_tag] will display the value.

I have edited the code above to reflect this. It is optional of course.