如何在联系表 7 中创建动态下拉列表

Question

I have a wordpress project (dqsnigeria/website/contact) and I am having a challenge of creating a dynamic dropdown menu using contact form 7. Below is the link of what I must replicate for the client.

https://www.dqs-holding.com/en/contact-us/contact-form-general-inquiry/

At the top dropdown that says choose a form. If you choose one option you see a different form display until you see all options. Some options are just common links to pages. My approach to this problem is to first create different form pages but now I am stuck at using Javascript to trigger actions on different dropdown.

Could someone assist me with the code answer to this problem or a resource online where I can follow steps to achieve this task. Thank you !

Answer 1

First of all you need to put below code in functions.php

function cf7_select_dropdown($tag, $unused ) {
     if ( $tag['name'] != 'cf7-dropdown' )
         return $tag;

     $tag['raw_values'][] = "One";
     $tag['labels'][] = "One";
     
     $tag['raw_values'][] = "Two";
     $tag['labels'][] = "Two";

     $tag['raw_values'][] = "Three";
     $tag['labels'][] = "Three";

     $pipes = new WPCF7_Pipes($tag['raw_values']);
     $tag['values'] = $pipes->collect_befores();
     $tag['pipes'] = $pipes;

     return $tag;
}

add_filter( 'wpcf7_form_tag', 'cf7_select_dropdown', 10, 2); 

Now use "cf7-dropdown"

[select cf7-dropdown]

That's it, now you will see custom values in dropdown.

you can populate woocommerce products in contact form 7 select.

visit this link article for more details https://lets-solve.com/populate-woocommerce-products-in-contact-form-7-select/