Show a Live Count of Repeater Fields in Your Form

Would you like to display a live count of how many repeater field rows have been added to your form? This can be useful when you want users to see how many items they’ve entered, especially in scenarios like adding names, tasks, or product items.

In this tutorial, we’ll walk you through how to automatically update a “Count” field in real-time using a simple PHP snippet.

Note: This tutorial involves adding both PHP and JavaScript. If you need help with adding snippets to your site, please review this guide on adding custom code for WPForms.

Creating Your Form

To get started, create your form and include a Repeater field along with a Single Line Text field labeled something like “Count”. This field will be updated automatically and should not be filled manually by the user.

If you need help creating a form, see our tutorial on creating your first form.

Adding the Code Snippet

Use the following snippet to enable the live count feature on your form.

Customizing the Code Snippet

You’ll need to update the following IDs in the snippet to match your own form:

  • wpforms-5410-field_1-container: Replace 5410 with your actual Form ID and field_1 with your Repeater Field ID.
  • wpforms-5410-field_3: Replace field_3 with your Count Field ID.

To locate your form and field IDs, check out this tutorial.

Once this snippet is added and the IDs are updated, the Count field will update automatically as users add or remove rows from the repeater.

And that’s it! You’ve now added a dynamic counter to your repeater field, giving users a clear overview of how many entries they’ve made.