javascript - Dynamically populate Contact Form 7 dropdown field with content from ACF field - Stack Overflow

admin管理员组

文章数量:1297134

I have been using an old Wordpress contact form plugin (FastSecureContactForm) alongside some javescript someone built for me years ago to dynamically populate a field in the form with a dropdown list of file titles pulled from an ACF field. This has worked very well for me but I've rebuilt my website and am now using Contact Form 7 & wish to repeat this functionality.

The Javascript previously used referenced the ACF field from where it took the (multiple) track names as track_name and referenced the form field in FastSecureContactForm where the list of file names would be dynamically built as si_contact_ex_field2_3 where the number 2 referenced Form 2 in the setup & the number 3 referenced extra field 3 (ex_field3) on the form. The part of the javascript relating to this function is as follows (I understand basic php but have no javascript knowledge):

    <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 pliant; doesn't work in IE

}

What I'd like to know is:

A) How can I reference the dropdown field in the new form (built on Contact Form 7) and utilise the above javascript so that it is populated by the ACF field (as in the previous form). At the moment I have created a "Form Tag" like this [select* menu-470 "Select" "Track A" "Track B" "Track C"] but obviously the "Track A" "Track B" "Track C" part of the tag needs to be dynamically replaced by the multiple track_names inputted into the ACF field.

B) Or if there's a better / simpler way to dynamically fill the dropdown field on the Contact Form 7 form I'd be most interested to know

Many thanks in advance for any help with this issue.

Phil

I have been using an old Wordpress contact form plugin (FastSecureContactForm) alongside some javescript someone built for me years ago to dynamically populate a field in the form with a dropdown list of file titles pulled from an ACF field. This has worked very well for me but I've rebuilt my website and am now using Contact Form 7 & wish to repeat this functionality.

The Javascript previously used referenced the ACF field from where it took the (multiple) track names as track_name and referenced the form field in FastSecureContactForm where the list of file names would be dynamically built as si_contact_ex_field2_3 where the number 2 referenced Form 2 in the setup & the number 3 referenced extra field 3 (ex_field3) on the form. The part of the javascript relating to this function is as follows (I understand basic php but have no javascript knowledge):

    <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 pliant; doesn't work in IE

}

What I'd like to know is:

A) How can I reference the dropdown field in the new form (built on Contact Form 7) and utilise the above javascript so that it is populated by the ACF field (as in the previous form). At the moment I have created a "Form Tag" like this [select* menu-470 "Select" "Track A" "Track B" "Track C"] but obviously the "Track A" "Track B" "Track C" part of the tag needs to be dynamically replaced by the multiple track_names inputted into the ACF field.

B) Or if there's a better / simpler way to dynamically fill the dropdown field on the Contact Form 7 form I'd be most interested to know

Many thanks in advance for any help with this issue.

Phil

• javascript
• advanced-custom-fields
• contact-form-7

Share Improve this question Follow asked Dec 27, 2019 at 9:58 Phil LeggPhil Legg 9311 silver badge1010 bronze badges 1

• does this post help stackoverflow./questions/45779950/… ?? – fubar Commented Dec 27, 2019 at 10:24

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Here's an approach that doesn't require any additional plugins.

Create your form like this:

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

Then add this to your theme's functions.php file

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);

Note: the data attribute can also be used in [radio] and [select] fields.

See it in action here: https://bdwm.be/dynamically-populate-a-contact-form-7-dropdown-list-or-any-other-input-field/

The Smart Grid-layout Design for cf7 extension plugin has a dynamic dropdown field tag designed to solve this type of issues.

You would convert your select tag into a dynamic one,

[dynamic_select dynamic_select-353 "source:filter"]

the dynamic dropdown has 3 potential source of data, an existing taxonomy, a post type or a custom filter. Use the custom filter source to programmatically pull the data from your ACF field and populate your dropdown field usinf this filter,

add_filter( 'cf7sg_dynamic_dropdown_custom_options','dynamic_select_353_dynamic_options',10,3);
/**
* Filter dropdown options for dynamic drodpwn list of taxonomy terms.
* @param mixed $options the opttion to filter.
* @param string $name the field name being populated.
* @param string $cf7_key  the form unique key.
* @return mixed $options return either an array of <option value>=><option label> pairs or a html string of option elements which can be grouped if required.
*/
function dynamic_select_353_dynamic_options($options, $name, $cf7_key){
  $data = ... //fetch your data from your ACF field.
  foreach($data as $label=>$value){
    $options += '<option value="'.$value.'">'.$label.'</option>';
  }
  return $options;
}

If anyone is ing here trying to dynamically populate a dropdown and realize that the value field is the same as the text that shows in the dropdown, and you instead want a value to be something different like an ID.

Then you can use the code below:

function populateBusinessesDropdown( array $tag ) {

    if ( $tag['name'] !== 'plaint-business' ) {
        return $tag;
    }

    $saved_businesses = [] // Add code to get your array of items here

    foreach ( $saved_businesses as $key => $business_info ) {

        $tag['raw_values'][] = $business_info['name'];
        $tag['values'][]     = $business_info['id'];
        $tag['labels'][]     = $business_info['name'];
    }

    $tag['raw_values'][] = 'Other';
    $tag['values'][]     = 0;
    $tag['labels'][]     = 'Other';

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

本文标签： javascriptDynamically populate Contact Form 7 dropdown field with content from ACF fieldStack Overflow