CODEWITHSUNDEEP
wordpressgoogle-sheetscontact-form-7
Ashot Davtyan
Ashot Davtyan

Reputation: 1

Dynamically populate a dropdown CF7 field using data from google sheet or a third-party API

How can I retrieve data from a Google Sheets spreadsheet and populate a Contact Form 7 drop down field with that data?

All solutions that I could find is how to send data from Contact Form 7 to Google spreadsheet, and no solutions for reverse direction.

I have an API, from where I can get list of data, and I want to get that data by Zapier and populate Google sheet with that data, and then populate many Contact Form 7 drop down fields, located in many websites, with data from spreadsheet.

Upvotes: 0

Views: 400

Answers (1)

Aurovrata
Aurovrata

Reputation: 2289

Following the comment discussion, one solution is to retrieve the dropdown list of options from the third-party source via the API and populate the CF7 form dropdown dynamically when the form is loaded.

This is possible using the Dynamic dropdown field available with the Smart Grid layout CF7 extension plugin. The field can take 3 sources of dynamic data to populate a dropdown field: a list of taxonomies; a series of posts; or a filter hooked function that programmatically supplies a list. This last option can be used to programmatically fetch the required list from a third-party source via the API. Assuming the form dynamic dropdown field name is zappier-select, the plugin will automatically create a filter helper code that looks like this,

add_filter( 'cf7sg_custom_dynamic_select','zapier_select_dynamic_options',10,3);
/**
* Filter dropdown options for dynamic drodpwn list of taxonomy terms.
* @param Array $options the option to filter.
* @param WPCF7_FormTag $tag field tag object.
* @param string $cf7_key  the form unique key.
* @return Array $options return either an array of <option value> => <option label> pairs or 2 arrays, one for values and another for attributes.
*/
function zapier_select_dynamic_options($options, $tag, $cf7_key){
  if('ui-form'!==$cf7_key || 'zapier-select' !== $tag->name){
    return $options;
  }
  //these are the label users will see when the dropdown opens.
  //you can group your options if need be. Let's assume you have an array of arrays of data to display in groups.

  $data = ... //fetch your data from your API third-party.

  foreach($data as $value=>$label){
    $options[$value]=$label;
    //if you are displaying more complex select2 fields, or imagegrid for dynamic checkbox, then add extra parameters into a 2nd array of attributes,
    $options['values'][$value]=$label;
    $options['attributes'][$value]= array('data-thumbnail'=>'<image url>');
  }
  return $options;
}

For more examples, see this youtube tutorial.

Upvotes: 0

Related Questions