Contact Form 7 Pipes not working

See https://contactform7.com/selectable-recipient-with-pipes/

Thanks for your quick response.

I have followed the instructions from that page, as you can see in the code provided above. I have discovered that the plugin is saving the variables. The issue is that it is not pulling the variables into the options generated on the frontend. See below:
<select name="service" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="Please Select Service...">Please Select Service...</option><option value="Construction">Construction</option><option value="Bespoke Joinery">Bespoke Joinery</option><option value="Haulage">Haulage</option><option value="Ground Works">Ground Works</option><option value="Materials Handeling">Materials Handeling</option><option value="Volumix Concrete">Volumix Concrete</option><option value="Waste Management/Recycling">Waste Management/Recycling</option><option value="Tyre & Body Shop">Tyre & Body Shop</option><option value="Other">Other</option><option value="Recruitment">Recruitment</option></select>

As you can see the option labels are being inserted as the value also. Any suggestions?

Kind regards,
Ben

It’s working correctly.

I have added the below Javascript to modify the select options:

<script type="text/javascript">
$( document ).ready(function() {
     $("select[name=service]").html('<option value="[email protected]">Construction</option><option value="[email protected]">Bespoke Joinery</option><option value="[email protected]">Haulage</option><option value="[email protected]">Ground Works</option><option value="[email protected]">Materials Handeling</option><option value="[email protected]">Volumix Concrete</option><option value="[email protected]">Waste Management/Recycling</option><option value="[email protected]">Tyre & Body Shop</option><option value="[email protected]">Other</option><option value="[email protected]">Recruitment</option>');
						
$( "select[name=service]" ).change(function() {
    var text = $( "select[name=service] option:selected" ).text();
    $("input[name=service2]").val(text);
    $("input[name=service2]").text(text);
});

});
</script>

I have reverted it back so you can see what I am referring to above. If you need any more information, just let me know. Thanks again in advance.

Kind regards,
Ben

Also having this issue on some sites with latest Contact Form 4.9.2. When pipes turned on in config, then form’s select options have the same both text & value. When turned off it just shows same text as set in form.

My temporary solution is:
1) turn off pipes by adding define('WPCF7_USE_PIPE', false); to your wp-config.php
2) add this jquery to your theme header/footer or in js files (stripping script tags of course)

<script>
$(document).ready(function()
{		
	//Change form with pipes class text & values
	$('.wpcf7-pipes .wpcf7-form .wpcf7-select option').each(function(index,element) {
		//split element text by "|" divider
		var data = element.text.split('|');
		
		//replace text and value of option
		$(this).val(data[0]);
		$(this).text(data[1]);
	});
});
</script>

3) wrap needed forms with class “wpcf7-pipes” like <div class=”wpcf7-pipes”>YOUR FORM CODE HERE</div>

Hope this help someone while this bug is not fixed…

Contact from 5.0

As you can see the example

<label> What is your query about?
[select* your-query
“Query|[email protected]”
“Article Submissions|[email protected]”
“Illustration Submissions|[email protected]”
“Customer Services/Subscription|[email protected]”
“General Enquiries|[email protected]”
“Website|[email protected]”]
</label>

is displaying as

<span class=”wpcf7-form-control-wrap your-query”><select name=”your-query” class=”wpcf7-form-control wpcf7-select wpcf7-validates-as-required” aria-required=”true” aria-invalid=”false”><option value=”Query”>Query</option><option value=”Article Submissions”>Article Submissions</option><option value=”Illustration Submissions”>Illustration Submissions</option><option value=”Customer Services/Subscription”>Customer Services/Subscription</option><option value=”General Enquiries”>General Enquiries</option><option value=”Website”>Website</option></select></span>

With no reference to the pipes in the code

This took me a really long time to figure out but it’s only after form submission that CF7 replaces the values. You won’t see it by just viewing the source of your webpage.
I hope this helps someone else.

thank you nicolejaz this helped me a lot! I was about to spend hours searching for the answer :/ ??