Question

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

以前使用的Javascript引用了ACF字段（从该字段中，它获取（多个）轨道名称）为track_name，并引用了FastSecureContactForm中的form字段，其中文件名列表将动态构建为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）如何在新表单（基于联系表单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/

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

1 个答案: