ACF Repeater Form Submit
### 1. Create the Custom Form
You can create your custom form with the necessary fields, including the repeater fields. Here's an example of how you can create a simple form in PHP:
<form method="POST">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="repeater_field">Repeater Field</label>
<div id="repeater_container">
<div class="repeater_item">
<input type="text" name="repeater_field[0][sub_field]" placeholder="Sub Field" required>
</div>
<button type="button" id="add_repeater_field">Add More</button>
</div>
<input type="submit" value="Submit">
</form>### 2. Add JavaScript to Add Repeater Items
You can use JavaScript to dynamically add new rows to the repeater field on the frontend.
document.getElementById('add_repeater_field').addEventListener('click', function() {
const container = document.getElementById('repeater_container');
const index = container.querySelectorAll('.repeater_item').length;
const newItem = document.createElement('div');
newItem.classList.add('repeater_item');
newItem.innerHTML = `
<input type="text" name="repeater_field[${index}][sub_field]" placeholder="Sub Field" required>
`;
container.appendChild(newItem);
});### 3. Handle the Form Submission
In your `functions.php`, you'll need to handle the form submission and save the data to ACF using `update_field()`.
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// Assuming the repeater field is in a post with ID $post_id
$post_id = 123; // You can dynamically set this, e.g., using the current post ID
// Sanitize and validate input fields
$name = sanitize_text_field($_POST['name']);
$repeater_data = [];
if (isset($_POST['repeater_field'])) {
foreach ($_POST['repeater_field'] as $item) {
if (isset($item['sub_field'])) {
$repeater_data[] = [
'sub_field' => sanitize_text_field($item['sub_field'])
];
}
}
}
// Save name field (example)
update_field('field_name_key', $name, $post_id);
// Save repeater field
update_field('repeater_field_key', $repeater_data, $post_id);
}### 4. Adjust Field Keys
Replace `'field_name_key'` and `'repeater_field_key'` with the actual field keys from ACF. You can find these in the ACF field group editor.
### 5. Optional: Redirect After Submission
To redirect the user after the form submission (e.g., to avoid resubmission on page refresh), you can add a redirect after processing the form:
wp_redirect(get_permalink($post_id));
exit;With this setup, when the user submits the form, the repeater field will be saved to the specified post (or custom post type) in the WordPress database.
sub field name- service_name
### 1. Create the Custom Form
<form method="POST">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="services_offered">Services Offered</label>
<div id="services_container">
<div class="service_item">
<input type="text" name="services_offered[0][service_name]" placeholder="Service Name" required>
</div>
<button type="button" id="add_service">Add More Service</button>
</div>
<input type="submit" value="Submit">
</form>### 2. Add JavaScript to Add More Services Dynamically
This JavaScript will allow the user to add more `service_name` inputs dynamically to the form.
document.getElementById('add_service').addEventListener('click', function() {
const container = document.getElementById('services_container');
const index = container.querySelectorAll('.service_item').length;
const newItem = document.createElement('div');
newItem.classList.add('service_item');
newItem.innerHTML = `
<input type="text" name="services_offered[${index}][service_name]" placeholder="Service Name" required>
`;
container.appendChild(newItem);
});### 3. Handle the Form Submission and Save Data
In your `functions.php`, handle the form submission and save the `services_offered` repeater field and its sub field `service_name`.
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// Get the post ID where the ACF fields will be saved
$post_id = 123; // Replace with the actual post ID (e.g., dynamic based on your context)
// Sanitize and validate the 'name' field (example field)
$name = sanitize_text_field($_POST['name']);
// Initialize an empty array for the repeater field data
$services_offered_data = [];
// Check if there are any services submitted
if (isset($_POST['services_offered'])) {
foreach ($_POST['services_offered'] as $item) {
if (isset($item['service_name'])) {
// Sanitize the 'service_name' field
$services_offered_data[] = [
'service_name' => sanitize_text_field($item['service_name'])
];
}
}
}
// Save the 'name' field
update_field('field_name_key', $name, $post_id); // Replace with the actual field key for 'name'
// Save the 'services_offered' repeater field
update_field('services_offered', $services_offered_data, $post_id); // Replace with the actual field key for 'services_offered'
}### 4. Adjust Field Keys
Replace `'field_name_key'` with the actual ACF field key for your `name` field, and replace `'services_offered'` with the field key for the `services_offered` repeater field.
– You can find these field keys by going to the ACF field group editor and clicking on the field. The key will be displayed in the field settings.
### 5. Optional: Redirect After Form Submission
To prevent users from resubmitting the form upon page refresh, you can add a redirect after the form submission:
wp_redirect(get_permalink($post_id)); // Redirect to the same page or another URL
exit;With this setup, when the form is submitted, the `services_offered` repeater field with the sub field `service_name` will be saved to the specified post.
what is this
### How to Find the ACF Field Key
1. **Go to the ACF Field Group Editor**:
– In your WordPress admin, go to **Custom Fields**.
– Find the field group that contains your `name` field (or any other field you're working with).
2. **Click on the Field**:
– Click on the `name` field (or any other field).
3. **Find the Field Key**:
– On the field settings page, scroll down to find the **Field Key** section. This will be a string like `field_123abc456def`, which is the unique key for that field.
4. **Use the Field Key**:
– Replace `'field_name_key'` with the actual field key you found. For example, if the field key for your `name` field is `field_abc123`, your code would look like this:
update_field('field_abc123', $name, $post_id);### Why Use the Field Key?
Using the field key ensures that ACF updates the correct field, as field names can sometimes be duplicated or changed. The field key is always unique and specific to each field in your WordPress site.
### Example:
Assuming the field key for the `name` field is `field_abc123` and the field key for the `services_offered` repeater field is `field_xyz789`, the code would look like this:
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$post_id = 123; // Post ID
$name = sanitize_text_field($_POST['name']);
$services_offered_data = [];
if (isset($_POST['services_offered'])) {
foreach ($_POST['services_offered'] as $item) {
if (isset($item['service_name'])) {
$services_offered_data[] = [
'service_name' => sanitize_text_field($item['service_name'])
];
}
}
}
// Save the 'name' field
update_field('field_abc123', $name, $post_id); // Use the actual field key for 'name'
// Save the 'services_offered' repeater field
update_field('field_xyz789', $services_offered_data, $post_id); // Use the actual field key for 'services_offered'
}This ensures the data is saved to the correct fields.