javascript - 使用 ACF 字段中的内容动态填充 Contact Form 7 下拉字段

Question

我一直在使用旧的 Wordpress 联系表单插件 (FastSecureContactForm) 以及几年前有人为我构建的一些 javescript，以使用从 ACF 字段中提取的文件标题下拉列表动态填充表单中的字段。这对我来说效果很好，但我重建了我的网站，现在正在使用 Contact Form 7 并希望重复此功能。

之前使用的 Javascript 引用了 ACF 字段，从那里将(多个)轨道名称作为 track_name 并引用了 FastSecureContactForm 中的表单字段，其中文件名列表将动态构建为 si_contact_ex_field2_3 其中数字 2 引用设置中的表单 2，数字 3 引用表单上的额外字段 3 (ex_field3)。与该功能相关的javascript部分如下(我了解基本的php但没有javascript知识):

    <script type="text/javascript">

var field_to_update = document.getElementById('si_contact_ex_field2_3');
field_to_update.innerHTML = '';

var elOptNew = document.createElement('option');
elOptNew.text = 'Select'
elOptNew.value = 'Select';

field_to_update.add(elOptNew);

field_to_update.options[0].selected = true;

var track_names = document.getElementsByName('audioFileName');  

for (i=0; i<track_names.length; i++) {

    var track_name = track_names[i].innerHTML;

    var elOptNew = document.createElement('option');
    elOptNew.text = track_name.replace("&amp;", "&");
    elOptNew.value = track_name;

    field_to_update.add(elOptNew); // standards compliant; doesn't work in IE

}

我想知道的是:

A) 我如何在新表单(基于 Contact Form 7)中引用下拉字段并利用上面的 javascript 以便它由 ACF 字段填充(与以前的表单一样)。目前我创建了一个像这样的“表单标签”[select* menu-470 "Select""Track A""Track B""Track C"] 但显然 "Track A""Track B""Track C"部分标签需要动态替换为ACF字段中输入的多个track_name。

B) 或者，如果有更好/更简单的方法来动态填充 Contact Form 7 表单上的下拉字段，我最想知道

非常感谢在此问题上提供的任何帮助。

菲尔

Answer 1

这是一种不需要任何额外插件的方法。

像这样创建你的表单:

[checkbox my-values data:my_possible_values]
[submit]

然后将其添加到主题的 functions.php 文件中

add_filter('wpcf7_form_tag_data_option', function($n, $options, $args) {
  if (in_array('my_possible_values', $options)){
    
    // Assuming that my_acf_field is an ACF multi-select field
    $my_possible_values = get_field('my_acf_field');

    // turn $my_possible_values into an array
    // that looks like this: ['val 1', 'val 2', 'val 3']
    return array_map(function($el) {
        return $el['value'];
    }, $my_possible_values);
  }
  return $n;
}, 10, 3);

注意:data 属性也可以用在 [radio] 和 [select] 字段中。

在此处查看实际效果:https://bdwm.be/dynamically-populate-a-contact-form-7-dropdown-list-or-any-other-input-field/