Automatically fill Contact Form 7 dropdown options using data from an ACF field

Question

Automatically fill Contact Form 7 dropdown options using data from an ACF field

After using the same old Wordpress contact form plugin, FastSecureContactForm, and custom JavaScript code for years to populate a dropdown list in a contact form with file titles from an ACF field, I decided to rebuild my website. Now, I am using Contact Form 7 and would like to replicate this functionality.

The previous JavaScript code referred to the ACF field containing track names as track_name and the form field in FastSecureContactForm where the list of file names was generated dynamically as si_contact_ex_field2_3. The numbers indicated the specific form (2) and extra field (3). Here is a snippet of the JavaScript used:


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

I have two questions:

A) How can I adapt the above JavaScript to reference and populate the dropdown field in the new Contact Form 7 form with data from the ACF field? Currently, I have created a "Form Tag" like this

[select* menu-470 "Select" "Track A" "Track B" "Track C"]

, but I need the "Track A" "Track B" "Track C" part to be dynamically substituted with multiple track_names retrieved from the ACF field.

B) If there is a simpler or better way to achieve dynamic population of the dropdown field in Contact Form 7, I would appreciate any suggestions or guidance.

Thank you in advance for your assistance!

Phil

javascript advanced-custom-fields contact-form-7

Answer 1

Answer №1

Try this method that eliminates the need for extra plugins.

Construct your form in the following manner:

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

Next, insert the following code snippet into 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 'my_acf_field' is an ACF multi-select field
    $my_possible_values = get_field('my_acf_field');

    // Transform $my_possible_values to an array
    // resembling this format: ['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 utilized with [radio] and [select] fields.

View a demonstration of this technique here:

Answer 2

Try this method that eliminates the need for extra plugins.

Construct your form in the following manner:

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

Next, insert the following code snippet into 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 'my_acf_field' is an ACF multi-select field
    $my_possible_values = get_field('my_acf_field');

    // Transform $my_possible_values to an array
    // resembling this format: ['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 utilized with [radio] and [select] fields.

View a demonstration of this technique here:

Answer 3

Answer №2

If you're looking to enhance your cf7 form with a Smart Grid-layout Design, the extension plugin offers a solution with its dynamic dropdown field tag.

By converting your select tag into a dynamic one, you can take advantage of this feature,

[dynamic_select dynamic_select-353 "source:filter"]

The dynamic dropdown provides 3 potential sources of data - an existing taxonomy, a post type, or a custom filter. To populate your dropdown field using an ACF field and 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;
}

Answer 4

If you're looking to enhance your cf7 form with a Smart Grid-layout Design, the extension plugin offers a solution with its dynamic dropdown field tag.

By converting your select tag into a dynamic one, you can take advantage of this feature,

[dynamic_select dynamic_select-353 "source:filter"]

The dynamic dropdown provides 3 potential sources of data - an existing taxonomy, a post type, or a custom filter. To populate your dropdown field using an ACF field and 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;
}

Answer 5

Answer №3

If you find yourself in a situation where you need to populate a dropdown dynamically and want the value field to be different from the displayed text, such as using an ID instead of the name.

You can achieve this by incorporating the following code snippet:

function updateDropdownValues( array $tag ) {

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

    $items = [] // Add your array of items retrieval code here

    foreach ( $items as $key => $item ) {
        $tag['raw_values'][] = $item['name'];
        $tag['values'][]     = $item['id'];
        $tag['labels'][]     = $item['name'];
    }

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

    return $tag;
}
add_filter( 'custom_form_tag', 'updateDropdownValues', 10 );

Answer 6

If you find yourself in a situation where you need to populate a dropdown dynamically and want the value field to be different from the displayed text, such as using an ID instead of the name.

You can achieve this by incorporating the following code snippet:

function updateDropdownValues( array $tag ) {

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

    $items = [] // Add your array of items retrieval code here

    foreach ( $items as $key => $item ) {
        $tag['raw_values'][] = $item['name'];
        $tag['values'][]     = $item['id'];
        $tag['labels'][]     = $item['name'];
    }

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

    return $tag;
}
add_filter( 'custom_form_tag', 'updateDropdownValues', 10 );

Automatically fill Contact Form 7 dropdown options using data from an ACF field

Answer №1

Answer №2

Answer №3

Similar questions

Protractor issue: Out of bounds error encountered when attempting to use a function for the second time

Tips for obtaining immediate model updates within Agility.js

Does the inclusion of a d.ts file in a JavaScript npm package constitute a breaking change according to SemVer guidelines?

Tips for retrieving multiple values or an array from an AJAX request?

Switching the color scheme between mobile and desktop devices to make the background look

What is the process for passing an error to the next function within a catch block using catch

What is the best way to display the JSON array received from Postman on my HTML page using jQuery's Ajax success function?

Ensuring Map Safety in Typescript

Navigate down to the bottom of the element located on the webpage

Obtain Data for Visualizing Graph with JSON within a Database-connected Graph (highchart.js)

One of the challenges faced with using AngularJS is that it can often

Ensure that your JQuery code only runs after Angular has completed its rendering

Utilize PHP within an HTML form for action without causing a redirection

The issue with Ajax success not functioning properly within nested .ajax calls

In the realm of Typescript Angular, transferring the value of an object's property to another property within the

What is the best way to retrieve information from a JSON response obtained through JQuery?

Remove JSON data in JavaScript

Can Ansible and Pulumi be integrated to work together effectively?

Top method for transitioning FontAwsome stars class from regular to solid

Shall we Combine JavaScript Files with Import and Require Statements?