Add Repeater Fields Module to User Registration and Edit Profile Forms with Profile Builder

repeater-fields-banner
Patricia Borlovan
Last Updated: 05/04/23

One of the heavily requested features by Profile Builder users was the ability to add repeater fields or groups of fields dynamically to front-end user registration forms, without having a predefined number.

The user should be able to repeat a certain field or set of fields when registering or editing his profile in the front-end. Most of the requests were regarding the upload of multiple files or PDF documents, or multiple images for creating user galleries.

That’s how the Repeater Fields Module was born. It makes adding Repeater Fields to User Registration and Edit Profile Forms fast and easy.

How to use Repeater Fields

Repeater Field can be used when you need your users to insert similar information from your users, such as: add multiple phone numbers, upload multiple pdf, images or another type of files.

To activate the Repeater Fields in your back-end, you have to go to Modules tab, inside Profile Builder and there select “Active”.

Under the Manage Fields tab, you have a field type called “Repeater” that will give you full control over the repeater fields that appear on the front-end register and edit profile forms.

Once you have selected the Repeater field you will need to set out several Field properties, such as Field Title, Limit, then simply click “Edit field group” button and select which fields should be repeated.

The number of fields generated by users in the front-end forms can be also limited from the back-end by adding a general limit or one per User Role.

In the example bellow, for the upload of user pictures, we chose a General Limit of three and with a default pop-up message “To add up to 7 pictures, join us to become a contributor!”. Also, we added another two limitations, up to 7 user pictures for Contributors and unlimited for Editors.

To manage your Repeater Fields you have to click the Edit field group. From there a secondary interface will open and you will manage the fields or group of fields that you want to duplicate.

For this example, I have added a Heading field with the title “Upload Picture” and an Upload field with the title “Select picture”.

How Repeater Fields Module look like

In the front-end of your Registration Form or Edit Profile Form, you will have your Repeater Fields displayed. Here we have the three entries, where users can upload several pictures.

repeater_upload_pictures

We also set a general limitation of three pictures for uploading, with a custom message when the limit has been reached.

repeater_limitation_reached_popup_message2

 

Displaying the Repeater field in User Listing

Now that we have a Repeater field and we uploaded a few pictures, let’s see how we can display them using Profile Builder’s User Listing module.

If you don’t already have a WordPress user listing, simply create a new page where you place this shortcode: [wppb-list-users name="userlisting"].
Make sure that the User Listing module is active in the Profile Builder -> Modules tab.

From the Profile Builder -> User Listing tab, edit your listing entry. We’re going to modify the Single-Userlisting Template, to include the repeated upload field.
The variable names for our repeater field example are:

{{#meta_upload-pictures}}
   {{meta_select_pic}}
{{/meta_upload-pictures}}

Using the following syntax, we have added the user’s avatar, first name, and uploaded pictures. Make sure you get the correct variable names from the Available Variables tab.

<p style="text-align:center;">{{{avatar_or_gravatar}}}</p>
<p><strong>User:</strong> {{meta_first_name}} </p>
<p><strong>Uploaded pictures:</strong>
  {{#meta_upload-pictures}}
    <div style="clear:both; padding-bottom: 20px; overflow: hidden;"> 
       <img src="{{meta_select_pic}}" style="max-width: 300px; display:block; margin-right:auto; margin-left: auto;"/>
    </div>
  {{/meta_upload-pictures}}
</p>

Then, update the User Listing.

This is the final result when viewing John Doe’s user list profile. As you can see, John Doe is just a subscriber, so he gets to upload only 3 cat pictures.

user-list-repeater-field

Update: The User Listing add-on now offers the possibility to use pre-designed templates for the all-users page and the single-user pages. You can read more about the new user listing features here.

Conclusions

This repeater fields module represents an effective way to easily duplicate a field in the front-end registration and edit profile forms.

The main advantage of this module is that new and existing users can easily add several pieces of information of the same type without a predefined number, things like uploading various documents or images, all without leaving the front-end page.

How are you using Repeater Fields in your front-end forms? Let us know in the comments section below.

13 thoughts on “Add Repeater Fields Module to User Registration and Edit Profile Forms with Profile Builder

    Can you make a set of fields repeat for multiple addresses?

    Reply

    +1. I need to make a set of fields (text, date, upload) repeatable.

    Reply

    Yes. It’s not just one field, you can make entire groups of fields repeatable as well.

    Reply

    How can i repeate field group and i want to upload bulk images using one input.. is it possible?

    Reply

    Currently no. It will probably be possible when we create a gallery field in the future.

    Reply

    I am doing some custom PHP and retrieving user fields for a client who purchased the profile builder pro. However, I am having issues finding out how I can call the repeater fields. Is there a quick function located somewhere in your source code? or an easy way to run a loop inside a loop to call the repeater fields?

    Reply

    Hi,
    I want to create user profile look like a resume page, where user able to repeat qualifications, experience, and references etc , all of them are a group of fields, will i able to do this ?
    2nd its buddypress profile builder or its create own separate profile? Actually i want this with buddypress, because I want all the social media functionality,

    Reply

    Hi Tahir,

    Yes, you can create repeater group of fields.

    As for buddypress, we have a good integration with it via our BuddyPress Addon: https://www.cozmoslabs.com/add-ons/buddypress/

    However, we’re not using the BuddyPress fields, as those are stored in a custom table, we’re using normal WordPress user meta for storing information. So you might want to look into how that’s done and see if it’s the right thing for your project.

    Reply

    I happened to read “a gallery field” above. If that existed now, I would use it instantly. I’ve looked hard for galleries that integrate with PB, but found nothing.

    Reply

    You’re right, however it can be done using the repeater field. Please contact us via out support and we can help you integrate the repeater with a simple html/css gallery inside the user list.

    Reply

    there is no conditional logic option on custom fields in repeater field

    Reply

    No, the way it’s implemented is that you can hide an entire repeater group based on another field’s conditional logic. But no conditional logic inside the repeater group unfortunately.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.