How to Populate Contact Form 7 form with repeater data from Advanced Custom Fields

To populate a Contact Form 7 form with repeater data from Advanced Custom Fields, you can use a combination of PHP and JavaScript. Here’s how to do it:

1. In your WordPress theme’s functions.php file, create a new function to retrieve the repeater data from the Advanced Custom Fields and pass it to the Contact Form 7 form as a JavaScript variable. Here’s an example:phpCopy codefunction cf7_populate_repeater_data() { $repeater_data = get_field('my_repeater_field'); if ($repeater_data) { $data = array(); foreach ($repeater_data as $row) { $data[] = array( 'field_1' => $row['field_1'], 'field_2' => $row['field_2'], 'field_3' => $row['field_3'] ); } wp_enqueue_script('cf7_repeater_data', get_stylesheet_directory_uri() . '/js/cf7-repeater-data.js', array('jquery'), '1.0.0', true); wp_localize_script('cf7_repeater_data', 'cf7RepeaterData', $data); } } add_action('wp_enqueue_scripts', 'cf7_populate_repeater_data'); In this example, the cf7_populate_repeater_data function retrieves the repeater data from the my_repeater_field field of the Advanced Custom Fields and passes it to the Contact Form 7 form as a JavaScript variable using the wp_localize_script function.
2. Create a new JavaScript file called cf7-repeater-data.js in your theme’s js directory and add the following code:javascriptCopy codejQuery(document).ready(function($) { var data = cf7RepeaterData; if (data) { data.forEach(function(row) { var html = ''; html += '<div class="repeater-row">'; html += '<label>Field 1</label>'; html += '<input type="text" name="repeater_field_1[]" value="' + row.field_1 + '">'; html += '</div>'; html += '<div class="repeater-row">'; html += '<label>Field 2</label>'; html += '<input type="text" name="repeater_field_2[]" value="' + row.field_2 + '">'; html += '</div>'; html += '<div class="repeater-row">'; html += '<label>Field 3</label>'; html += '<input type="text" name="repeater_field_3[]" value="' + row.field_3 + '">'; html += '</div>'; $('#my_repeater_field').append(html); }); } }); In this example, the cf7RepeaterData variable is used to generate HTML for the Contact Form 7 form. The HTML is then appended to a container with an ID of my_repeater_field.
3. In your Contact Form 7 form, add the following HTML:htmlCopy code<div id="my_repeater_field"></div> This creates a container for the repeater data to be populated.
4. Customize the field names and HTML output in the JavaScript code to match your Contact Form 7 form and repeater data.

With these steps, you should be able to populate a Contact Form 7 form with repeater data from Advanced Custom Fields.